fix: improve responsive header layout

geeksblabla · Nov 12, 2024 · ac03bcd · ac03bcd
1 parent d0d0e05
commit ac03bcd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/components/header.astro b/src/components/header.astro
@@ -89,9 +89,9 @@ const currentPath = Astro.url.pathname;
 
     <nav
       aria-label="Header Navigation"
-      class="hidden flex-1 flex-row items-center justify-between pl-36 md:flex"
+      class="hidden flex-row items-center justify-between md:flex lg:pl-12"
     >
-      <ul class="flex flex-row items-center space-x-5">
+      <ul class="flex flex-row items-center space-x-0.5 lg:space-x-1">
         {
           navItems.map(item => (
             <li>

diff --git a/src/components/search.astro b/src/components/search.astro
@@ -9,10 +9,10 @@ import { Icon } from "astro-icon/components";
   aria-label="Open search"
   aria-controls="search-dialog"
   aria-expanded="false"
-  class="focus:ring-primary-500 inline-flex items-center space-x-2 rounded-md px-4 py-2 text-sm text-gray-600 hover:text-black"
+  class="focus:ring-primary-500 inline-flex items-center space-x-2 rounded-md py-2 pl-4 text-sm text-gray-600 hover:text-black"
 >
   <Icon name="search" class="h-5 w-5" />
-  <span> Search </span>
+  <span class="hidden lg:block"> Search </span>
 </button>
 
 <!-- Search dialog -->

diff --git a/src/global.css b/src/global.css
@@ -29,7 +29,13 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .container {
-  @apply mx-auto w-full max-w-screen-xl px-3 md:px-0;
+  @apply mx-auto w-full 
+    max-w-[90rem]             /* 1440px max-width */
+    sm:max-w-[640px]          
+    md:max-w-[768px]          
+    lg:max-w-[896px]          /* ~1024px - 128px margins */
+    xl:max-w-[1024px]         /* ~1280px - 256px margins */
+    2xl:max-w-[1200px];       /* ~1440px - 240px margins */
 }