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

refactor: update menu toggle structure and icons across multiple HTML files for improved consistency and user experience

Browse source
This commit is contained in:
George Birikorang 2025-09-03 04:02:08 -04:00
parent 03b6cc138b
commit 584ba42eab
10 changed files with 210 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

52
projects.html
View file

@ -31,7 +31,7 @@
>
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
</a>
</div>
</div>
<!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative">
@ -346,12 +346,12 @@
>S</span
>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- Static Logo and Menu -->
<div class="fixed top-6 left-8 z-40">
@ -361,7 +361,7 @@
>
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
</a>
</div>
</div>
<!-- Menu Toggle with Homepage/WHY structure -->
<div
@ -374,26 +374,26 @@
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
</div>
</div>
<div class="menu-outline" aria-hidden="true"></div>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<div class="relative" id="menuGrid">
<img
src="assets/icons/closed_petal.png"
alt="closed petal"
class="w-6 h-6"
/>
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div>
<img
src="assets/icons/open_petal.png"
alt="petal"
class="w-8 h-8"
/>
</div>
</div>
<!-- Mobile view: simple transparent background -->
<div class="md:hidden">
@ -577,7 +577,7 @@
id="modalCategory"
class="text-kh3-red text-sm font-medium tracking-wider"
></p>
</div>
</div>
<button
id="closeModal"
class="text-white/70 hover:text-white transition-colors duration-300"
@ -596,7 +596,7 @@
></path>
</svg>
</button>
</div>
</div>
<!-- Modal Body -->
<div class="flex flex-col lg:flex-row h-full">
@ -618,8 +618,8 @@
>
<div id="imageDots" class="flex space-x-2">
<!-- Dots will be generated here -->
</div>
</div>
</div>
</div>
<!-- Previous/Next Buttons -->
<button
@ -665,9 +665,9 @@
>
<span id="imageCounter">1</span> /
<span id="totalImages">1</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Details Section -->
<div
@ -686,7 +686,7 @@
id="modalDescription"
class="text-white/80 text-sm leading-relaxed"
></p>
</div>
</div>
<!-- Project Details -->
<div>