valknar/pivoine.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish: CSS-only hover transitions for nav and footer links

Browse Source 
Adds translateY lift and smoother easing on hover for desktop nav,
footer nav, and social links. Active underline gets expo easing.
No markup changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-04-10 18:45:57 +02:00
parent 00ee9e15ed
commit e57a15f733
1 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+31
View File
@@ -577,6 +577,37 @@
animation: glitch-clip 2.5s steps(1) infinite; animation: glitch-clip 2.5s steps(1) infinite;
} }
/* ── Nav & footer link hover polish ─────────────────────────── */
/* Desktop nav links — lift + glow on hover */
header nav a.label {
transition: color 0.2s var(--ease-sharp), transform 0.2s var(--ease-out-expo);
}
header nav a.label:hover {
transform: translateY(-1px);
}
/* Active underline — smooth width via transition */
header nav a.label span {
transition: width 0.35s var(--ease-out-expo);
}
/* Footer links — subtle lift */
footer nav a.label {
transition: color 0.2s var(--ease-sharp), transform 0.2s var(--ease-out-expo);
}
footer nav a.label:hover {
transform: translateY(-1px);
}
/* Footer social links — icon nudges on hover */
footer nav a.label svg {
transition: transform 0.2s var(--ease-out-expo);
}
footer nav a.label:hover svg {
transform: translate(1px, -1px);
}
/* ── View Transitions ────────────────────────────────────────── */ /* ── View Transitions ────────────────────────────────────────── */
::view-transition-old(main-content) { ::view-transition-old(main-content) {
animation: 160ms var(--ease-sharp) both page-out; animation: 160ms var(--ease-sharp) both page-out;