add alternate versions for accessibility

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)
 

index.html

@@ -16,7 +16,10 @@
     <div id=mlem>
       <p class='mlem-text niss'>“mlem”</p>
       <p class='mlem-text nisse'>“mlem also”</p>
-      <img src=mlem.gif alt='niss &amp; nisse'>
+      <picture>
+        <source srcset=mlem_static.png media='(prefers-reduced-motion)'>
+        <img src=mlem.gif alt='niss &amp; nisse'>
+      </picture>
     </div>
     <h2>
       a

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;
+  }
+}