Respect prefers-reduced-motion when adding motion.
This commit is contained in:
parent
5c62458176
commit
4bd1e30dba
3 changed files with 14 additions and 5 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue