colin/uninsane
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style: make this react better to resizing

Browse Source
This commit is contained in:
Colin 2022-04-04 08:46:49 +00:00
parent 44b15d6a45
commit 5a834a5a6c
1 changed files with 89 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
sass/static/style.scss
View File

@ -54,6 +54,50 @@ $color_bg: $color_cream;
$color_title: $color_teal;
$color_header: $color_purple;
$font_scale_hdr: 1.50;
$indent_hdr: 1.3rem;
// effective margin of h1, h2
$margin_hdr_max: $indent_hdr;
$margin_hdr_min: 0.2rem;
$margin_hdr_delta: $margin_hdr_max - $margin_hdr_min;
// reset browser defaults
body
{
padding: 0;
margin-left: 0;
margin-right: 0;
}
h1, h2
{
font-size: $font_scale_hdr * 1rem;
padding: 0;
margin-left: 0;
margin-right: 0;
}
p
{
padding: 0;
// this aligns the paragraphs with the header indents
margin-left: $margin_hdr_max;
margin-right: $margin_hdr_max;
// interpolate margins from 0 (at 20em) -> max (at 40em):
@media (max-width: 40rem)
{
margin-left: calc(#{$margin_hdr_delta / 20rem * 100%} + #{$margin_hdr_min - $margin_hdr_delta});
margin-right: calc(#{$margin_hdr_delta / 20rem * 100%} + #{$margin_hdr_min - $margin_hdr_delta});
}
@media (max-width: 20rem)
{
margin-left: $margin_hdr_min;
margin-right: $margin_hdr_min;
}
}
body
{
@ -64,7 +108,7 @@ body
.body-text
{
text-align: justify;
max-width: 40em;
max-width: 40rem;
// center this within its container
margin-left: auto;
margin-right: auto;
@ -72,6 +116,7 @@ body
h1
{
background-color: $color_title;
display: flex;
}
h2
@ -80,14 +125,52 @@ body
display: flex;
}
h2::after
h1::after, h2::after
{
content: "";
background: -moz-element(#tile-slash) center;
flex: 1 0 0;
margin-left: 0.1em;
margin-right: 0.1em;
flex-grow: 1;
min-width: $indent_hdr - 0.3rem;
margin-left: 0.15rem;
margin-right: 0.15rem;
}
h1::before, h2::before
{
content: "";
width: $indent_hdr - 0.3rem;
margin-left: 0.15rem;
margin-right: 0.15rem;
}
h2::after, h2::before
{
background: -moz-element(#tile-slash) center;
}
// TODO colin: the max-width media stuff applies to the browser window, as if the scrollbar didn't exist.
// but the % calculation applies to the body-width, which because of the scrollbar is NOT the same as the max-width.
// maybe can use CSS variables to deal with this?
$h_disappear_max: 40rem;
$h_disappear_delta: 2*($indent_hdr - 0.3rem);
$h_disappear_min: $h_disappear_max - $h_disappear_delta;
@media (max-width: #{$h_disappear_max})
{
h1::before, h2::before
{
width: calc(50% - #{$h_disappear_min * 0.5});
}
h1::after, h2::after
{
min-width: calc(50% - #{$h_disappear_min * 0.5});
}
}
// at small width, force the header margins to shrink
@media (max-width: #{$h_disappear_min})
{
h1::after, h2::after, h1::before, h2::before
{
min-width: 0;
width: 0;
}
}
}