update: improve styles

SvMak · SvMak · commit 6c8010d3a180 · 2024-11-30T20:06:35.000+01:00
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -17,7 +17,7 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
 
 <header
   role="banner"
-  class="bg-white font-extralight text-black drop-shadow-md"
+  class="sticky top-0 z-50 bg-white font-extralight text-black drop-shadow-md"
 >
   <Container class="flex flex-col justify-between md:flex-row md:items-center">
     <div
@@ -28,16 +28,17 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
         class="flex select-none items-center justify-between gap-2 md:justify-start"
       >
         <InlineSVG
-          class="h-16 w-auto"
+          class="h-12 w-auto"
           src="/src/assets/image/nixos-logo-notext.svg"
           alt="Nixos Logo"
         />
         <InlineSVG
-          class="block h-16 w-auto md:hidden xl:block"
+          class="block h-12 w-auto md:hidden xl:block"
           src="/src/assets/image/nixos-logo-text.svg"
           alt="Nixos Logo Text"
         />
       </Link>
+
       <button
         aria-label="Main Navigation Toggle"
         class="block rounded-lg bg-nix-blue-light p-4 md:hidden"
@@ -48,17 +49,18 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
         <span class="block h-1 w-8 bg-white"></span>
       </button>
     </div>
+
     <nav
       aria-label="Main Navigation"
       role="menubar"
-      class="flex flex-col gap-0.5 pb-4 md:flex md:flex-row md:gap-5 md:pb-0"
+      class="flex flex-col gap-0.5 pb-4 leading-none md:flex md:flex-row md:gap-5 md:pb-0"
       id="navbar-menu"
     >
       {
         headerMenu.data.items.map((item) => (
           <Link
             class:list={[
-              'pb-6 pt-8',
+              'pb-6 pt-7',
               navbarItemStyle,
               currentTopRoute === item.link
                 ? navbarItemActiveStyle
@@ -71,7 +73,7 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
         ))
       }
       <Link
-        class={`pt-8 md:pt-7 pb-6 ${navbarItemStyle} ${navbarItemInactiveStyle}`}
+        class={`pt-7 pb-6 md:pt-5 md:pb-3 ${navbarItemStyle} ${navbarItemInactiveStyle}`}
         href="https://search.nixos.org"
         arial-label="Nixos package and options search"
       >
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -80,10 +80,13 @@ const headFeedLinks = blogMenu.data.map((e) => {
   </head>
   <body class="flex min-h-screen flex-col bg-white text-gray-950">
     <Header />
+
     <main class="flex-1">
       <slot />
     </main>
+
     <Footer />
+
     <script>
       import 'htmx.org';
 
