tailwind

src/components/AnchorNav.astro

@@ -12,14 +12,14 @@ const navItems = [
 ];
 ---
 
-<nav class="anchor-nav" id="anchor-nav">
-  <div class="nav-container">
-    <ul class="nav-list">
+<nav class="anchor-nav bg-[#2b2b56] py-4 md:py-3 transition-all duration-300 z-[100] shadow-[0_2px_5px_rgba(0,0,0,0.1)] [&.sticky]:sticky [&.sticky]:top-0 [&.sticky]:shadow-[0_2px_10px_rgba(0,0,0,0.3)]" id="anchor-nav">
+  <div class="max-w-[--max-width-container] mx-auto px-[--spacing-md]">
+    <ul class="list-none m-0 p-0 flex flex-wrap justify-center gap-2 md:gap-1">
       {navItems.map((item) => (
-        <li class="nav-item">
+        <li class="m-0">
           <a
             href={`#${item.id}`}
-            class="nav-link"
+            class="nav-link block text-white no-underline py-2 px-4 md:py-1.5 md:px-3 rounded transition-all duration-300 text-sm md:text-[0.85rem] font-medium whitespace-nowrap hover:bg-white/20 hover:-translate-y-0.5 [&.active]:bg-white/30 [&.active]:font-bold"
             data-section={item.id}
           >
             <span class="nav-label-de" data-lang="de">{item.label_de}</span>
@@ -93,87 +93,3 @@ const navItems = [
     lastScroll = currentScroll;
   });
 </script>
-
-<style>
-  .anchor-nav {
-    background: #2b2b56;
-    padding: 1rem 0;
-    transition: all 0.3s ease;
-    z-index: 100;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  }
-
-  .anchor-nav.sticky {
-    position: sticky;
-    top: 0;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-  }
-
-  .nav-container {
-    max-width: var(--max-width);
-    margin: 0 auto;
-    padding: 0 var(--spacing-md);
-  }
-
-  .nav-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0.5rem;
-  }
-
-  .nav-item {
-    margin: 0;
-  }
-
-  .nav-link {
-    display: block;
-    color: white;
-    text-decoration: none;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    transition: all 0.3s ease;
-    font-size: 0.95rem;
-    font-weight: 500;
-    white-space: nowrap;
-  }
-
-  .nav-link:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: translateY(-2px);
-  }
-
-  .nav-link.active {
-    background: rgba(255, 255, 255, 0.3);
-    font-weight: 700;
-  }
-
-  /* Language-specific labels */
-  :global([data-language="de"]) .nav-label-en,
-  :global([data-language="en"]) .nav-label-de {
-    display: none;
-  }
-
-  :global([data-language="de"]) .nav-label-de,
-  :global([data-language="en"]) .nav-label-en {
-    display: inline;
-  }
-
-  @media (max-width: 768px) {
-    .nav-list {
-      gap: 0.25rem;
-    }
-
-    .nav-link {
-      padding: 0.4rem 0.75rem;
-      font-size: 0.85rem;
-    }
-
-    .anchor-nav {
-      padding: 0.75rem 0;
-    }
-  }
-</style>