diff --git a/Makefile b/Makefile index 03ca33e..217bea0 100644 --- a/Makefile +++ b/Makefile @@ -2,7 +2,8 @@ FONTS = $(shell find fonts -type f) CSS = style.css PAGES = index.html IMAGES = \ - mlem.gif icon.png niss_uwu_bg.png \ + mlem.gif mlem_static.png icon.png \ + niss_uwu_bg_dim.png niss_uwu_bg.png \ star_small.png sparkles_large.png niss_wave_large.png \ shortcake_large.png @@ -44,6 +45,10 @@ $(BUILDDIR)/%_large.png: %.svg @mkdir -p $(dir $@) @inkscape -e $@ -h 30 $< >/dev/null +$(BUILDDIR)/%_dim.png: %.png + @echo $(notdir $@) + @convert -channel A -evaluate Multiply 0.75 $< $@ + clean: $(RM) -r $(TMPDIR) $(BUILDDIR) diff --git a/index.html b/index.html index 7e6b16a..48e696f 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,10 @@

“mlem”

“mlem also”

- niss & nisse + + + niss & nisse +

a diff --git a/style.css b/style.css index aca932f..ba1599f 100644 --- a/style.css +++ b/style.css @@ -9,11 +9,12 @@ body { hsl(234deg, 100%, 76%), hsl(195deg, 100%, 67%) ); + --bg-image: url(niss_uwu_bg.png); } body { background: - url(niss_uwu_bg.png) top center fixed, + var(--bg-image) top center fixed, var(--gradient) fixed; background-blend-mode: overlay; } @@ -65,7 +66,7 @@ h1 { } .niss { bottom: 100%; left: 20px; } .nisse { bottom: 85%; right: 0; } -#mlem img { +#mlem picture { filter: drop-shadow(0 0 30px hsla(52deg, 85%, 95%, 75%)); } @@ -171,3 +172,77 @@ footer a { background-blend-mode: initial; } } + + +/******************************/ +/* actual accessibility stuff */ +/******************************/ + +@media (prefers-reduced-motion: reduce) { + /* see also the alternate source in #mlem > picture */ + .mlem-text { + display: none; + } +} + + +/* ~the "not actually supported by browsers yet" zone~ */ +@media (prefers-contrast: high) { + body { + --gradient: + linear-gradient(to bottom, + hsl(42deg, 56%, 55%), + hsl(348deg, 56%, 55%), + hsl(334deg, 60%, 43%), + hsl(234deg, 60%, 40%), + hsl(195deg, 60%, 44%) + ); + --bg-image: url(niss_uwu_bg_dim.png); + } + + main { + background: hsla(0, 0%, 0%, 60%); + border-color: hsla(0, 0%, 0%, 30%); + } + + .cake::before, .cake::after, + header rt::before, header rt::after, + section h2::before, section h2::after { + mix-blend-mode: screen; + } + + a { + text-decoration: underline; + text-decoration-thickness: 2px; + } + + footer { + background: hsla(0, 0%, 0%, 50%); + color: white; + } + + footer a { + color: hsl(254deg, 100%, 85%); + } + + footer .emojo { + background: hsla(52deg, 85%, 95%, 75%); + padding: 2px; + border-radius: 1000px; + } + + hr { + background: white; + } + + #mlem picture { + filter: drop-shadow(0 0 20px hsla(52deg, 85%, 95%, 35%)); + } +} + +@media (prefers-reduced-transparency) { + body { + background: var(--gradient) fixed; + background-blend-mode: initial; + } +}