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%; min-height: 100%;
// Use the saner border-box model. // Use the saner border-box model.
box-sizing: border-box; box-sizing: border-box;
// Use smooth scrolling.
scroll-behavior: smooth;
// Improve text rendering. // Improve text rendering.
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;

View file

@ -38,6 +38,14 @@ a:active {
text-decoration: none; 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,
%link-nav { %link-nav {
a { a {

View file

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