mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-28 03:50:29 -04:00
Jake Jarvis
b755b66d19
* convert GitHub cards grid from lit-html to preact * give hit counter the preact treatment * extract loading spinner component to a shared location * move *some* loading spinner styles to its JSX * Update .percy.yml * pick up images in JS w/ webpack * pull star/fork icons straight from @primer/octicons * a bit of cleanup * check `typeof window !== "undefined"` before rendering * bump misc. deps * silence missing license warnings for preact-hooks and preact-compat * add source-map-loader * Update loading.js
100 lines
1.8 KiB
SCSS
100 lines
1.8 KiB
SCSS
@use "../abstracts/themes";
|
|
|
|
.wave {
|
|
display: inline-block;
|
|
animation: wave 5s infinite;
|
|
animation-delay: 1s;
|
|
transform-origin: 65% 80%;
|
|
will-change: transform;
|
|
}
|
|
|
|
.beat {
|
|
display: inline-block;
|
|
animation: beat 10s infinite; // 6 bpm, call 911 if you see this please.
|
|
animation-delay: 7.5s; // offset from wave animation
|
|
will-change: transform;
|
|
}
|
|
|
|
@keyframes wave {
|
|
// stylelint-disable rule-empty-line-before
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
5% {
|
|
transform: rotate(14deg);
|
|
}
|
|
10% {
|
|
transform: rotate(-8deg);
|
|
}
|
|
15% {
|
|
transform: rotate(14deg);
|
|
}
|
|
20% {
|
|
transform: rotate(-4deg);
|
|
}
|
|
25% {
|
|
transform: rotate(10deg);
|
|
}
|
|
30% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
// pause for 3.5 out of 5 seconds
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
// stylelint-enable rule-empty-line-before
|
|
}
|
|
|
|
@keyframes beat {
|
|
// stylelint-disable rule-empty-line-before
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
2% {
|
|
transform: scale(1.25);
|
|
}
|
|
4% {
|
|
transform: scale(1);
|
|
}
|
|
6% {
|
|
transform: scale(1.2);
|
|
}
|
|
8% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
// pause for ~9 out of 10 seconds
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
// stylelint-enable rule-empty-line-before
|
|
}
|
|
|
|
// modified from https://tobiasahlin.com/spinkit/
|
|
@keyframes loading {
|
|
// stylelint-disable rule-empty-line-before
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
40% {
|
|
transform: scale(0.6);
|
|
}
|
|
// stylelint-enable rule-empty-line-before
|
|
}
|
|
|
|
// https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
::before,
|
|
::after {
|
|
animation-delay: -1ms !important;
|
|
animation-duration: 1ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0s !important;
|
|
transition-delay: 0s !important;
|
|
}
|
|
}
|