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%;
|
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;
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -151,10 +151,13 @@
|
||||||
&__toggle,
|
&__toggle,
|
||||||
&__hamburger rect,
|
&__hamburger rect,
|
||||||
&__sheet {
|
&__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 & {
|
.js-nav-open & {
|
||||||
transition: all 330ms ease-out;
|
transition: all 330ms ease-out;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue