fix: update menu toggle styles and enhance layout consistency across multiple HTML files

This commit is contained in:
George Birikorang 2025-09-02 05:04:08 -04:00
parent db0c4f6ae4
commit 058ac87681
7 changed files with 37 additions and 22 deletions

View file

@ -370,10 +370,10 @@
<!-- Menu Toggle with Transparent Background -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3 transition-transform duration-300"
class="cursor-pointer p-3 transition-transform duration-300"
id="menuToggle"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;">
<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>

View file

@ -372,7 +372,7 @@
<!-- Menu Toggle -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
<div class="cursor-pointer" id="menuToggle">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;">
<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>

View file

@ -44,8 +44,8 @@
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a
href="index.html"
<a
href="index.html"
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
@ -93,8 +93,8 @@
</a>
<!-- WHY - Slightly right -->
<a
href="about.html"
<a
href="about.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
@ -134,8 +134,8 @@
</a>
<!-- HOW - More right -->
<a
href="services.html"
<a
href="services.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
@ -266,8 +266,8 @@
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
<a
href="contact.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
@ -384,7 +384,14 @@
style="animation-delay: 0.4s; animation-fill-mode: forwards"
>
<div class="cursor-pointer" id="menuToggle">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<div
class="grid grid-cols-3 gap-1 w-6 h-6"
id="menuGrid"
style="
outline: 1px solid rgba(255, 255, 255, 0.6);
outline-offset: 6px;
"
>
<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>
@ -451,7 +458,7 @@
>DESIGN</span
>
</div>
</div>
</div>
<!-- DELIVER -->
<div class="flex items-center gap-6">

View file

@ -374,11 +374,15 @@
<div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40"
>
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
id="menuToggle"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<div class="cursor-pointer p-3" id="menuToggle">
<div
class="grid grid-cols-3 gap-1 w-6 h-6"
id="menuGrid"
style="
outline: 1px solid rgba(255, 255, 255, 0.6);
outline-offset: 6px;
"
>
<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>

View file

@ -521,10 +521,10 @@
<!-- Menu Toggle with Transparent Background -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
class="cursor-pointer p-3"
id="menuToggle"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;">
<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>

View file

@ -890,6 +890,10 @@ video {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.grid {
display: grid;
}

View file

@ -370,10 +370,10 @@
<!-- Menu Toggle with Transparent Background -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
class="cursor-pointer p-3"
id="menuToggle"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;">
<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>