website: Add micro-animations including scroll progress bar, nav logo entrance spin, and button shine sweeps

This commit is contained in:
KoalaDev
2026-07-03 11:26:45 +02:00
parent 60c80ad7fb
commit 5460ac3a01
3 changed files with 84 additions and 1 deletions
+2 -1
View File
@@ -201,6 +201,7 @@
</noscript>
</head>
<body>
<div class="scroll-progress-bar"></div>
<a class="skip-link" href="#main-content">Skip to main content</a>
@@ -213,7 +214,7 @@
<nav>
<div class="container nav-content">
<div class="logo-area">
<img src="{{ASSET_PATH}}assets/NewLogoIcon_128.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_64.webp 64w, {{ASSET_PATH}}assets/NewLogoIcon_128.webp 128w, {{ASSET_PATH}}assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64">
<img class="nav-logo-img" src="{{ASSET_PATH}}assets/NewLogoIcon_128.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_64.webp 64w, {{ASSET_PATH}}assets/NewLogoIcon_128.webp 128w, {{ASSET_PATH}}assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64">
<span>KoalaSync</span>
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="12" height="12"><polyline points="20 6 9 17 4 12"></polyline></svg>