improve header

web/src/components/Layout/Header.astro

@@ -4,41 +4,43 @@ import { Menu } from "lucide-astro";
 import Logo from "../Logo/Logo.astro";
 ---
 
-<header id="nav-container" class="fixed top-0 w-full h-[100px] z-50">
+<header id="nav-container" class="fixed top-0 w-full h-header z-50">
   <div
     class="w-full h-full absolute -z-20 backdrop-blur-lg"
     style="  
     background-image:
       linear-gradient(to bottom, transparent, hsl(var(--color-neutral)) 100%),
-      repeating-linear-gradient(60deg, transparent, hsl(var(--color-neutral) / 0.9) 1px, hsl(var(--color-neutral) / 0.1) 6px );"
+      repeating-linear-gradient(60deg, transparent, hsl(var(--color-neutral-accent) / 0.7) 2px, hsl(var(--color-neutral-accent) / 1) 4px );"
   >
   </div>
   <div
-    class="flex flex-row justify-between h-full w-full max-w-section m-auto p-main"
+    class="flex flex-row justify-between items-center h-full w-full max-w-section m-auto p-main py-0"
   >
     <div class="flex justify-center items-center">
       <a
         class="no-underline flex flex-row justify-center items-center gap-2 hover:opacity-85 transition-opacity"
         href="/"
       >
-        <div class="w-12 text-main">
+        <div class="w-10 lg:w-12 text-main">
           <Logo withText={false} />
         </div>
-        <h2 class="text-3xl transition-all font-extrabold">vspace.one</h2>
+        <h2 class="text-2xl lg:text-3xl transition-all font-extrabold">
+          vspace.one
+        </h2>
       </a>
     </div>
     <Button
       aria-label="Blendet die Navigation ein oder aus"
       variant="default"
-      class="lg:hidden"
+      class="lg:hidden size-12 !p-0"
       id="nav-button"
     >
       <Menu />
     </Button>
     <div
       id="nav-mobile"
-      class="animate-in slide-in-from-top-10 ease-out-quart duration-1000 absolute top-[100px] w-full
+      class="animate-in slide-in-from-top-10 ease-out-quart duration-1000 absolute top-header w-full
-      bg-neutral p-main left-0 hidden flex flex-col gap-3 -z-30"
+      bg-neutral p-main left-0 lg:hidden hidden flex flex-col gap-3 -z-30"
     >
       <a class={button({ variant: "secondary", size: "lg" })} href="/#location"
         >Standort</a

web/src/styles/global.css

@@ -23,6 +23,8 @@
   --gap-card: 1rem;
 
   --max-width-section: 100%;
+
+  --height-header: 80px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -55,6 +57,8 @@ h1 {
 @media (--lg-viewport) {
   :root {
     --max-width-section: 1000px;
+
+    --height-header: 90px;
   }
 }
 
@@ -63,6 +67,8 @@ h1 {
     --max-width-section: 1550px;
 
     --padding-main: 45px 100px;
+
+    --height-header: 100px;
   }
 }
 

web/tailwind.config.cjs

@@ -50,7 +50,12 @@ module.exports = {
         main: "var(--padding-main)",
         card: "var(--padding-card)",
       },
-
+      height: {
+        header: "var(--height-header)",
+      },
+      spacing: {
+        header: "var(--height-header)",
+      },
       maxWidth: {
         section: "var(--max-width-section)",
         form: "var(--max-width-form)",