diff --git a/index.html b/index.html index 8b6837b..8390a8e 100644 --- a/index.html +++ b/index.html @@ -16,19 +16,18 @@
-

so basically? im gecs

+

so basically? im gecs

“mlem”

“mlem also”

- niss & nisse + — the gecs
-

+

a big one (niss) and a little one (nisse) -


diff --git a/style.css b/style.css index 10a93be..715a1c2 100644 --- a/style.css +++ b/style.css @@ -12,6 +12,7 @@ body { hsl(155deg, 70%, 62%) ); --bg-image: url(images/niss_uwu_bg.png); + --size: 1.75rem; --weight: 600; background: @@ -20,7 +21,7 @@ body { background-blend-mode: overlay; font-family: 'Muller'; - font-size: 1.75rem; + font-size: var(--size); font-weight: var(--weight); color: white; text-shadow: @@ -45,7 +46,7 @@ main { margin: 0 auto 1em; } -h1, h2, h3, h4, h5, h6 { +header p, h1, h2, h3, h4, h5, h6 { font-weight: 700; margin-top: 0; } @@ -54,6 +55,10 @@ h1 { font-size: 200%; } +h2, header p { + font-size: 150%; +} + b { font-weight: 800; } @@ -65,6 +70,7 @@ b { width: 420px; } .mlem-text { + font-size: var(--size); position: absolute; font-weight: 700; margin: 0; @@ -82,7 +88,7 @@ header { header h1 { margin-top: 0; } -header rt { +rt { font-size: 60%; font-style: italic; } @@ -144,29 +150,26 @@ a:hover { color: hsl(50deg, 100%, 82%); } -.cake { - color: hsl(115deg, 100%, 84%); -} -.cake::before, .cake::after, -header rt::before, header rt::after, -section h2::before, section h2::after { - mix-blend-mode: overlay; + +:is(rt, h1, h2)::before, :is(rt, h1, h2)::after { padding: 0 0.25em; vertical-align: middle; display: inline-block; height: 1em; width: 1em; + mix-blend-mode: overlay; + content: var(--around-image); } -.cake::before, .cake::after { content: url(images/shortcake.svg); } -header rt::before, header rt::after { content: url(images/star.svg); } -section h2::before, section h2::after { - content: url(images/sparkles.svg); -} + +rt { --around-image: url(images/star.svg); } +h1, h2 { --around-image: url(images/sparkles.svg); } + .emojo { vertical-align: middle; height: 1.2em; width: 1.2em; } + footer { max-width: 35em; margin: 2em auto 0; @@ -244,9 +247,7 @@ footer a { border-color: hsla(0, 0%, 0%, 30%); } - .cake::before, .cake::after, - header rt::before, header rt::after, - section h2::before, section h2::after { + :is(#links ul, rt, h1, h2)::before, :is(#links ul, rt, h1, h2)::after { mix-blend-mode: screen; } @@ -280,10 +281,7 @@ footer a { background-blend-mode: initial; } - .cake::before, .cake::after, - header rt::before, header rt::after, - section h2::before, section h2::after, - [title]::after { + :is(#links ul, rt, h1, h2)::before, :is(#links ul, rt, h1, h2)::after { mix-blend-mode: initial; } }