diff --git a/assets/sass/_reset.scss b/assets/sass/_reset.scss index 40f5a0f..9632297 100644 --- a/assets/sass/_reset.scss +++ b/assets/sass/_reset.scss @@ -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; diff --git a/assets/sass/base/links/_links.scss b/assets/sass/base/links/_links.scss index 76342ae..4ee17ca 100644 --- a/assets/sass/base/links/_links.scss +++ b/assets/sass/base/links/_links.scss @@ -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 { diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss index d33d299..5b3ffed 100644 --- a/assets/sass/mobile.scss +++ b/assets/sass/mobile.scss @@ -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; + } } } }