diff options
| author | user <user@clank> | 2026-08-30 16:09:39 +0200 |
|---|---|---|
| committer | user <user@clank> | 2026-08-30 16:09:39 +0200 |
| commit | bbdd1a8a50f81f2be9e399661f42a1a10993ba38 (patch) | |
| tree | db1885354d165cdb387aa52401a8ae99477ce039 /web/site.css | |
| parent | web: the logo's colour cycle gets range, speed, and a Safari lane (diff) | |
| download | slosh-bbdd1a8a50f81f2be9e399661f42a1a10993ba38.tar.gz slosh-bbdd1a8a50f81f2be9e399661f42a1a10993ba38.tar.xz slosh-bbdd1a8a50f81f2be9e399661f42a1a10993ba38.zip | |
web: reduced motion stills the logo's slide, not its colour
Both of the owner's browsers showed the cycle frozen, and the culprit
was neither of the browsers: the OS asks for reduced motion, both pass
it on, and the media rule here answered by killing every animation.
The preference is about motion -- patterns that travel, the vestibular
kind -- not about colour, so the position slide goes and the in-place
hue rotation stays, at half speed. Nothing moves, everything still
breathes, and a visitor who asked the OS for stillness gets exactly
the stillness they asked for.
Diffstat (limited to 'web/site.css')
| -rw-r--r-- | web/site.css | 5 |
1 files changed, 4 insertions, 1 deletions
diff --git a/web/site.css b/web/site.css index 2e0e819..fb67b48 100644 --- a/web/site.css +++ b/web/site.css @@ -120,7 +120,10 @@ kbd { to { filter: hue-rotate(360deg); } } @media (prefers-reduced-motion: reduce) { - .logo-float.show pre { animation: none; } + /* The preference is about motion, not colour: the slide -- a pattern + * that travels -- goes; the hue rotation, colour changing in place, + * stays, at half speed. Nothing moves, everything still breathes. */ + .logo-float.show pre { animation: logo-hue 24s linear infinite; } } @media (max-width: 54rem) { |