georgebiri/kh3_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

34
js/main.js
View file

@ -27,7 +27,7 @@ function initNavigation() {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
// Transform back to grid
// Transform back to full grid
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
@ -39,16 +39,24 @@ function initNavigation() {
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
menuGrid.style.transform = "scale(1)";
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Transform to red X
// Transform to compressed state - only center 5 dots, corner dots disappear
menuGrid.innerHTML = `
<svg class="w-6 h-6 text-kh3-red hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<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 opacity-0"></span>
`;
menuGrid.style.transform = "scale(0.8)";
isMenuOpen = true;
}
});
@ -70,12 +78,12 @@ function initNavigation() {
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
isMenuOpen = false;
}
});
}
});
// Close navigation when clicking on a link
navLinks.forEach((link) => {
link.addEventListener("click", function () {
// Close navigation when clicking on a link
navLinks.forEach((link) => {
link.addEventListener("click", function () {
navMenu.classList.add("hidden");
// Transform back to grid
menuGrid.innerHTML = `
@ -91,10 +99,10 @@ function initNavigation() {
`;
isMenuOpen = false;
});
});
});
// Close navigation with Escape key
document.addEventListener("keydown", function (e) {
// Close navigation with Escape key
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !navMenu.classList.contains("hidden")) {
navMenu.classList.add("hidden");
// Transform back to grid