fix: replace dark logo with light logo across all pages and update menu toggle animations

This commit is contained in:
George Birikorang 2025-08-31 22:47:28 -04:00
parent 1d80addd7a
commit a2fe128ff7
10 changed files with 121 additions and 94 deletions

View file

@ -359,7 +359,7 @@
<div class="fixed top-6 left-8 z-40">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img
src="assets/images/kh3_logo_dark.png"
src="assets/images/kh3_logo.png"
alt="KH3"
class="w-12 h-12"
/>
@ -695,7 +695,7 @@
>
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img
src="assets/images/kh3_logo_dark.png"
src="assets/images/kh3_logo.png"
alt="KH3"
class="w-12 h-12"
/>
@ -892,18 +892,19 @@
} else {
// Open menu
navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X
// Transform to compressed state - only center 5 dots, corner dots disappear
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
`;
menuGrid.style.transform = "scale(0.8)";
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");