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 --> <!-- 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="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
<div <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" 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> <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 --> <!-- 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="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="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> <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 --> <!-- Navigation items in inverted C shape -->
<div class="space-y-6"> <div class="space-y-6">
<!-- HOME - Top --> <!-- HOME - Top -->
<a <a
href="index.html" 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" 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=" style="
animation-delay: 0.05s; animation-delay: 0.05s;
@ -93,8 +93,8 @@
</a> </a>
<!-- WHY - Slightly right --> <!-- WHY - Slightly right -->
<a <a
href="about.html" 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" 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=" style="
animation-delay: 0.2s; animation-delay: 0.2s;
@ -134,8 +134,8 @@
</a> </a>
<!-- HOW - More right --> <!-- HOW - More right -->
<a <a
href="services.html" 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" 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=" style="
animation-delay: 0.35s; animation-delay: 0.35s;
@ -266,8 +266,8 @@
</a> </a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" 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" 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=" style="
animation-delay: 0.75s; animation-delay: 0.75s;
@ -384,7 +384,14 @@
style="animation-delay: 0.4s; animation-fill-mode: forwards" style="animation-delay: 0.4s; animation-fill-mode: forwards"
> >
<div class="cursor-pointer" id="menuToggle"> <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> <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 >DESIGN</span
> >
</div> </div>
</div> </div>
<!-- DELIVER --> <!-- DELIVER -->
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">

View file

@ -374,11 +374,15 @@
<div <div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40" class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40"
> >
<div <div class="cursor-pointer p-3" id="menuToggle">
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3" <div
id="menuToggle" 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> <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 --> <!-- 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="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
<div <div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3" class="cursor-pointer p-3"
id="menuToggle" 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> <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; display: flex;
} }
.inline-flex {
display: inline-flex;
}
.grid { .grid {
display: grid; display: grid;
} }

View file

@ -370,10 +370,10 @@
<!-- Menu Toggle with Transparent Background --> <!-- 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="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
<div <div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3" class="cursor-pointer p-3"
id="menuToggle" 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> <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>