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