diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-17 09:24:39 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-17 09:24:39 +0200 |
| commit | 68c5ddcbe358df8bbbc1a40b9a596c60e19c21d7 (patch) | |
| tree | f2385b330277d475a5bf803b8668fabbba69d8b9 | |
| parent | c24e3ee594f5487d4f2fb1dcb1a4d9135d3c6704 (diff) | |
| download | danixxyz-68c5ddcbe358df8bbbc1a40b9a596c60e19c21d7.tar.gz danixxyz-68c5ddcbe358df8bbbc1a40b9a596c60e19c21d7.zip | |
feat: add prefers-reduced-motion support (disable animations when motion-reduced)
Adds a CSS media query that respects user motion preferences by:
- Disabling all animations and transitions when prefers-reduced-motion: reduce
- Using !important to override all animation/transition declarations
- Ensuring focus-visible outline remains visible for keyboard navigation
This improves accessibility for users with motion sensitivity.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
| -rw-r--r-- | themes/danix-xyz-hacker/assets/css/main.css | 18 |
1 files changed, 18 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css index 8d05052..99a278d 100644 --- a/themes/danix-xyz-hacker/assets/css/main.css +++ b/themes/danix-xyz-hacker/assets/css/main.css @@ -1163,3 +1163,21 @@ select:focus-visible { @apply left-[-4px] right-auto; transform: rotate(315deg); } + +/* Motion Safety - Respect prefers-reduced-motion */ + +@media (prefers-reduced-motion: reduce) { + /* Remove all animations */ + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + } + + /* Ensure focus-visible is still visible */ + :focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + } +} |
