diff --git a/base.css b/base.css index b2183cf..3be57cd 100644 --- a/base.css +++ b/base.css @@ -11,7 +11,7 @@ hsl(195deg, 100%, 67%), hsl(155deg, 70%, 62%) ); - --size: 1.75rem; + --size: 15pt; --weight: 600; --link-color: hsl(196deg, 100%, 85%); --hover-color: hsl(50deg, 100%, 82%); @@ -135,10 +135,12 @@ dd { content: var(--around-image); } +rt::before { margin-left: -1.25em; } +rt::after { margin-right: -1.25em; } /* hacky fix for firefox mobile 68 freaking out at blend modes ☹ */ @media (-moz-touch-enabled) { - body { + :root { background: var(--gradient) fixed; background-blend-mode: initial; } @@ -164,7 +166,7 @@ dd { /* ~the "not actually supported by browsers yet" zone~ */ @media (prefers-contrast: high), (prefers-color-scheme: dark) { - body { + :root { --gradient: linear-gradient(135deg, hsl(42deg, 56%, 55%), @@ -179,26 +181,12 @@ dd { -webkit-image-set(url(media/bg_dim.png) 1x, url(media/bg_2x_dim.png) 2x) top center fixed, - linear-gradient(135deg, - hsl(42deg, 56%, 55%), - hsl(348deg, 56%, 55%), - hsl(334deg, 60%, 43%), - hsl(234deg, 60%, 40%), - hsl(195deg, 60%, 44%), - hsl(155deg, 60%, 55%) - ) fixed; + var(--gradient) fixed; background: image-set(url(media/bg_dim.png) 1x, url(media/bg_2x_dim.png) 2x) top center fixed, - linear-gradient(135deg, - hsl(42deg, 56%, 55%), - hsl(348deg, 56%, 55%), - hsl(334deg, 60%, 43%), - hsl(234deg, 60%, 40%), - hsl(195deg, 60%, 44%), - hsl(155deg, 60%, 55%) - ) fixed; + var(--gradient) fixed; } main { @@ -216,7 +204,7 @@ dd { } @media (prefers-reduced-transparency) { - body { + :root { background: var(--gradient) fixed; background-blend-mode: initial; } diff --git a/index.css b/index.css index b4aac4e..07f3266 100644 --- a/index.css +++ b/index.css @@ -44,7 +44,6 @@ rt { } - @media (hover) { [title] { text-decoration: dotted underline; @@ -70,6 +69,9 @@ rt { rt { --around-image: url(media/star.svg); } h1, h2 { --around-image: url(media/sparkles.svg); } +h1, h2, .ones { letter-spacing: 0.1ch; } +.ones rt { letter-spacing: initial; } + [href='#listen']::before { vertical-align: middle; @@ -92,7 +94,7 @@ h1, h2 { --around-image: url(media/sparkles.svg); } #links ul { display: grid; grid-column-gap: 1em; - grid-template-columns: repeat(auto-fit, minmax(3em, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(4.5em, 1fr)); max-width: 85%; margin: auto;