gazesys/website
gazesys/website
1
0
Fork 1
Code Actions Releases 1 Activity

fix: navbuttons now bounce in reverse

Browse Source 
this makes it so that the user cant trigger a reset of the animation by just placing the cursor at the bottom and the button going out of the cursors area
This commit is contained in:
dusk 2024-09-29 21:53:59 +03:00
parent ca946b1ad0
commit 64f2864617
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/navButton.svelte
View File

@ -10,7 +10,7 @@
max-w-36 p-0.5 pr-1.5 border-ralsei-white border-4
{highlight
? 'min-w-36 bg-gradient-to-l to-ralsei-pink-neon/30 from-ralsei-pink-regular/20 from-30% border-ridge motion-safe:animate-pulse hover:animate-none'
: 'w-fit border-double hover:border-solid motion-safe:hover:animate-bounce hover:underline'}
: 'w-fit border-double hover:border-solid animate-bounce-reverse hover:underline'}
flex gap-1 items-center justify-center align-middle text-center
{highlight ? 'text-ralsei-pink-regular app-selected-route' : 'text-ralsei-green-light'}
"

18
src/styles/app.css
View File

@ -175,6 +175,24 @@
background-position: 0px 0px;
}
}
@media (prefers-reduced-motion: no-preference) {
@keyframes bounce-reverse {
0%, 100% {
transform: none;
animation-timing-function: cubic-bezier(0,0,0.2,1);
}
50% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1);
}
}
}
@media (prefers-reduced-motion: no-preference) {
.animate-bounce-reverse:hover {
animation: bounce-reverse 1s infinite;
}
}
}
a.app-selected-route {