foodogsquared/website
1
0
Fork 0
mirror of https://github.com/foo-dogsquared/website.git synced 2025-01-31 01:57:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update site animation rules

Browse Source
This commit is contained in:
Gabriel Arazas 2023-05-19 12:59:06 +08:00
parent 7cfc8878c3
commit 0a48343eb7
No known key found for this signature in database
GPG Key ID: ADE0C41DAB221FCC
3 changed files with 8 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/scss/animations.scss
View File

@ -1,6 +1,6 @@
@keyframes shake {
$distance: 1px;
from { transform: translate(-$distance); }
from { transform: translate(-$distance, $distance); }
to { transform: translate($distance); }
}
@ -41,18 +41,3 @@
}
}
}
@media (prefers-reduced-motion) {
@keyframes bounce {
$baseSize: 1em;
$baseRotation: 10deg;
from {
transform: rotate($baseRotation) translateX($baseSize)
translateY(-#{$baseSize / 5});
}
to {
transform: rotate(-$baseRotation) translateX(-$baseSize)
translateY(-#{$baseSize / 5});
}
}
}

2
assets/scss/extend.scss
View File

@ -137,6 +137,6 @@ code[data-lang] {
// Prefer reduced animations.
@media (prefers-reduced-motion) {
#logo svg {
animation: bounce 0.6s ease-in-out alternate infinite;
animation: none;
}
}

6
assets/scss/roles.scss
View File

@ -22,3 +22,9 @@
.extreme-shake {
animation: extreme-shake 0.1s alternate ease-in-out infinite;
}
@media (prefers-reduced-motion) {
.shake, .extreme-shake {
animation: none;
}
}