Respect prefers-reduced-motion when adding motion.

This commit is contained in:
Fredrik Jonsson 2024-01-05 17:35:37 +01:00
commit 4bd1e30dba
3 changed files with 14 additions and 5 deletions

View file

@ -12,8 +12,6 @@ html {
min-height: 100%;
// Use the saner border-box model.
box-sizing: border-box;
// Use smooth scrolling.
scroll-behavior: smooth;
// Improve text rendering.
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

View file

@ -38,6 +38,14 @@ a:active {
text-decoration: none;
}
// Use smooth scrolling unless user prefer less motion.
@media (prefers-reduced-motion: no-preference) {
:has(:target) {
scroll-behavior: smooth;
scroll-padding-block-start: var(--gutters);
}
}
.link-nav,
%link-nav {
a {

View file

@ -151,10 +151,13 @@
&__toggle,
&__hamburger rect,
&__sheet {
transition: all 130ms ease-in;
// Add some transitions unless user prefer less motion.
@media (prefers-reduced-motion: no-preference) {
transition: all 130ms ease-in;
.js-nav-open & {
transition: all 330ms ease-out;
.js-nav-open & {
transition: all 330ms ease-out;
}
}
}
}