mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-10-16 23:41:46 +00:00
feat: implement responsive mobile menu and navigation enhancements across all pages
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
d8d9f1a584
commit
228095ed83
11 changed files with 3592 additions and 49 deletions
170
blog.html
170
blog.html
|
|
@ -20,6 +20,16 @@
|
|||
color: #b8873f !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Force responsive behavior */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.sm\:flex {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
|
||||
|
|
@ -29,7 +39,7 @@
|
|||
<body class="bg-white font-sans text-gray-800">
|
||||
<!-- Header -->
|
||||
<header
|
||||
class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
|
||||
class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
|
||||
>
|
||||
<nav class="h-full">
|
||||
<div
|
||||
|
|
@ -40,12 +50,12 @@
|
|||
<img
|
||||
src="assets/images/khy_logo.png"
|
||||
alt="KHY Logo"
|
||||
class="h-16 w-auto drop-shadow-sm"
|
||||
class="h-12 sm:h-20 w-auto drop-shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<ul class="flex space-x-10">
|
||||
<!-- Desktop Navigation -->
|
||||
<ul class="hidden sm:flex space-x-10">
|
||||
<li>
|
||||
<a
|
||||
href="index.html"
|
||||
|
|
@ -103,13 +113,149 @@
|
|||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Mobile Quote Button and Hamburger -->
|
||||
<div class="sm:hidden flex items-center space-x-3">
|
||||
<!-- Quote Button -->
|
||||
<a
|
||||
href="quote.html"
|
||||
class="px-3 py-1 border border-black text-black font-playfair text-sm font-normal tracking-wider hover:bg-black hover:text-white transition-colors"
|
||||
>
|
||||
Quote
|
||||
</a>
|
||||
|
||||
<!-- Hamburger Button -->
|
||||
<button
|
||||
id="mobile-menu-button"
|
||||
class="text-black hover:text-gray-600 transition-colors"
|
||||
aria-label="Open mobile menu"
|
||||
>
|
||||
<svg
|
||||
class="w-7 h-7"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Mobile Menu Overlay -->
|
||||
<div
|
||||
id="mobile-menu-overlay"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300 sm:hidden"
|
||||
></div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div
|
||||
id="mobile-menu"
|
||||
class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 sm:hidden"
|
||||
>
|
||||
<!-- Mobile Menu Header -->
|
||||
<div
|
||||
class="flex items-center justify-between p-5 border-b border-gray-200"
|
||||
>
|
||||
<img
|
||||
src="assets/images/khy_logo.png"
|
||||
alt="KHY Logo"
|
||||
class="h-10 w-auto"
|
||||
/>
|
||||
<button
|
||||
id="mobile-menu-close"
|
||||
class="p-2 text-black hover:text-gray-600 transition-colors"
|
||||
aria-label="Close mobile menu"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Items -->
|
||||
<nav class="p-5">
|
||||
<ul class="flex flex-col space-y-4">
|
||||
<li>
|
||||
<a
|
||||
href="index.html"
|
||||
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#products"
|
||||
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||||
>Products</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#projects-button"
|
||||
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||||
>Projects</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#clients"
|
||||
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||||
>Clients</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#about"
|
||||
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||||
>About</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="contact.html"
|
||||
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||||
>Contact</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="blog.html"
|
||||
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||||
>Blog</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="quote.html"
|
||||
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||||
>Quote</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-80 mt-28">
|
||||
<section class="relative h-80 mt-20 sm:mt-28">
|
||||
<!-- Background Image -->
|
||||
<div class="absolute inset-0 w-full h-full">
|
||||
<img
|
||||
|
|
@ -140,7 +286,7 @@
|
|||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
|
||||
<!-- Main Blog Content -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="lg:col-span-2 order-2 lg:order-1">
|
||||
<div id="main-blog-content">
|
||||
<!-- Blog posts will be dynamically loaded here -->
|
||||
</div>
|
||||
|
|
@ -182,9 +328,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="lg:col-span-1 order-1 lg:order-2 flex flex-col">
|
||||
<!-- Search -->
|
||||
<div class="bg-white p-6 rounded-lg shadow-sm mb-8">
|
||||
<div
|
||||
class="bg-white p-6 rounded-lg shadow-sm mb-8 order-3 lg:order-1"
|
||||
>
|
||||
<div class="relative">
|
||||
<input
|
||||
id="blog-search-input"
|
||||
|
|
@ -201,7 +349,9 @@
|
|||
</div>
|
||||
|
||||
<!-- Categories -->
|
||||
<div class="bg-white p-6 rounded-lg shadow-sm mb-8">
|
||||
<div
|
||||
class="bg-white p-6 rounded-lg shadow-sm mb-8 order-2 lg:order-2"
|
||||
>
|
||||
<h3 class="font-playfair font-medium text-2xl text-black mb-6">
|
||||
Categories
|
||||
</h3>
|
||||
|
|
@ -211,7 +361,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Recent Posts -->
|
||||
<div class="bg-white p-6 rounded-lg shadow-sm">
|
||||
<div class="bg-white p-6 rounded-lg shadow-sm order-1 lg:order-3">
|
||||
<h3 class="font-playfair font-medium text-2xl text-black mb-6">
|
||||
Recent Posts
|
||||
</h3>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue