fix: enhance layout and responsiveness in index.html and update CSS for new height utilities
This commit is contained in:
parent
49d1ef8825
commit
db0c4f6ae4
2 changed files with 103 additions and 43 deletions
78
index.html
78
index.html
|
|
@ -360,11 +360,11 @@
|
|||
<!-- Main Layout -->
|
||||
<div class="min-h-screen relative">
|
||||
<section
|
||||
class="relative min-h-screen flex flex-col md:flex-row hero-section"
|
||||
class="relative h-[100svh] md:min-h-screen flex flex-col md:flex-row hero-section"
|
||||
>
|
||||
<!-- KH3 Logo -->
|
||||
<div
|
||||
class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left"
|
||||
class="absolute top-6 md:top-8 left-8 z-20 opacity-0 animate-fade-in-left"
|
||||
style="animation-delay: 0.2s; animation-fill-mode: forwards"
|
||||
>
|
||||
<a
|
||||
|
|
@ -380,14 +380,11 @@
|
|||
|
||||
<!-- Menu Grid -->
|
||||
<div
|
||||
class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
|
||||
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50 opacity-0 animate-fade-in-left"
|
||||
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 animate-logo-float"
|
||||
id="menuGrid"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" 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>
|
||||
|
|
@ -417,10 +414,10 @@
|
|||
|
||||
<!-- LEFT COLUMN -->
|
||||
<div
|
||||
class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-8 pt-24 md:pt-8 opacity-0 animate-fade-in-left dream-design-deliver"
|
||||
class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-4 pt-8 md:p-8 md:pt-8 h-[20vh] md:h-auto shrink-0 opacity-0 animate-fade-in-left dream-design-deliver"
|
||||
style="animation-delay: 0.8s; animation-fill-mode: forwards"
|
||||
>
|
||||
<div class="max-w-xl space-y-2">
|
||||
<div class="max-w-xl space-y-2 hidden md:block">
|
||||
<div class="flex flex-col space-y-8">
|
||||
<!-- DREAM -->
|
||||
<div class="flex items-center gap-6">
|
||||
|
|
@ -478,10 +475,10 @@
|
|||
|
||||
<!-- RIGHT COLUMN -->
|
||||
<div
|
||||
class="w-full md:w-2/3 relative opacity-0 animate-fade-in-right overflow-hidden"
|
||||
class="w-full md:w-2/3 relative opacity-0 animate-fade-in-right overflow-hidden flex-1 min-h-0 md:flex-none"
|
||||
style="animation-delay: 0.3s; animation-fill-mode: forwards"
|
||||
>
|
||||
<div class="relative h-[60vh] md:h-full">
|
||||
<div class="relative h-full md:h-full">
|
||||
<!-- Current Image -->
|
||||
<img
|
||||
id="currentImg"
|
||||
|
|
@ -497,6 +494,30 @@
|
|||
class="absolute inset-0 w-full h-full object-cover opacity-0"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black bg-opacity-20 z-10"></div>
|
||||
|
||||
<!-- Mobile CTA bar on image -->
|
||||
<div
|
||||
class="absolute left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0"
|
||||
style="
|
||||
animation: fadeInUp 0.8s ease-out 1.2s forwards;
|
||||
bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
|
||||
"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<a
|
||||
href="about.html"
|
||||
data-trans
|
||||
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
|
||||
>Why</a
|
||||
>
|
||||
<a
|
||||
href="contact.html"
|
||||
data-trans
|
||||
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
|
||||
>Contacts</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -529,33 +550,12 @@
|
|||
</a>
|
||||
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile CTA bar: About & Contacts (centered) -->
|
||||
<div
|
||||
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0"
|
||||
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<a
|
||||
href="about.html"
|
||||
data-trans
|
||||
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
|
||||
>Why</a
|
||||
>
|
||||
<a
|
||||
href="contact.html"
|
||||
data-trans
|
||||
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
|
||||
>Contacts</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Custom Cursor -->
|
||||
<div
|
||||
class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50"
|
||||
class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50 hidden md:block"
|
||||
id="customCursor"
|
||||
></div>
|
||||
|
||||
|
|
@ -867,15 +867,8 @@
|
|||
`;
|
||||
isMenuOpen = false;
|
||||
} else {
|
||||
// Open menu
|
||||
// Open menu (keep button static)
|
||||
navMenu.classList.remove("hidden");
|
||||
menuGrid.innerHTML = `
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-kh3-red" 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>
|
||||
</div>
|
||||
`;
|
||||
isMenuOpen = true;
|
||||
}
|
||||
});
|
||||
|
|
@ -1067,8 +1060,7 @@
|
|||
startCycle();
|
||||
}
|
||||
|
||||
// Start the animation
|
||||
startMenuGridAnimation();
|
||||
// Menu button animations disabled on homepage per request
|
||||
|
||||
// Custom cursor functionality
|
||||
const customCursor = document.getElementById("customCursor");
|
||||
|
|
|
|||
|
|
@ -994,6 +994,30 @@ video {
|
|||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-\[55vh\] {
|
||||
height: 55vh;
|
||||
}
|
||||
|
||||
.h-\[25vh\] {
|
||||
height: 25vh;
|
||||
}
|
||||
|
||||
.h-\[75vh\] {
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
.h-\[100dvh\] {
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
.h-\[20vh\] {
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
.h-\[100svh\] {
|
||||
height: 100svh;
|
||||
}
|
||||
|
||||
.max-h-\[90vh\] {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
|
@ -1014,6 +1038,10 @@ video {
|
|||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.min-h-0 {
|
||||
min-height: 0px;
|
||||
}
|
||||
|
||||
.w-0 {
|
||||
width: 0px;
|
||||
}
|
||||
|
|
@ -1154,6 +1182,10 @@ video {
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.-translate-x-1\/2 {
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
|
|
@ -2004,6 +2036,10 @@ video {
|
|||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.pt-16 {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -2548,6 +2584,14 @@ video {
|
|||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.md\:relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.md\:top-28 {
|
||||
top: 7rem;
|
||||
}
|
||||
|
|
@ -2568,6 +2612,10 @@ video {
|
|||
top: auto;
|
||||
}
|
||||
|
||||
.md\:top-8 {
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.md\:ml-12 {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
|
@ -2600,10 +2648,22 @@ video {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.md\:h-0 {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.md\:h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.md\:max-h-\[90vh\] {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.md\:min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.md\:w-1\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
|
@ -2624,6 +2684,10 @@ video {
|
|||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.md\:flex-none {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
|
@ -2674,6 +2738,10 @@ video {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.md\:p-8 {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.md\:px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue