Adjust spacing of nav items

fiberplane · Jan 22, 2025 · bbb2d4f · bbb2d4f
1 parent 16e380d
commit bbb2d4f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/www/astro.config.mjs b/www/astro.config.mjs
@@ -73,7 +73,7 @@ export default defineConfig({
         }
       ],
       components: {
-        Header: "@/components/NewHeader.astro",
+        Header: "@/components/Header.astro",
         Pagination: "@/components/Pagination.astro",
         Sidebar: "@/components/Sidebar.astro",
         Hero: "@/components/Hero.astro"

diff --git a/www/src/components/Header.astro b/www/src/components/Header.astro
@@ -26,7 +26,7 @@ const navEntries = nav?.entries || [];
     <Search {...Astro.props} />
   </div>
   <div class="sl-hidden md:sl-flex right-group">
-    <nav class="sl-flex social-icons">
+    <nav class="sl-flex nav-links">
       {
         navEntries.length > 0 &&
           navEntries.map((entry) => (
@@ -39,8 +39,10 @@ const navEntries = nav?.entries || [];
             </LinkButton>
           ))
       }
-      <SocialIcons {...Astro.props} />
     </nav>
+    <div class="sl-hidden md:sl-flex social-icons">
+      <SocialIcons {...Astro.props} />
+    </div>
     <ThemeSelect {...Astro.props} />
   </div>
 </div>
@@ -63,11 +65,18 @@ const navEntries = nav?.entries || [];
   }
 
   .right-group,
-  .social-icons {
+  .social-icons,
+  .nav-links {
     gap: 1rem;
     align-items: center;
   }
-  .social-icons::after {
+
+  .nav-links {
+    gap: 1.5rem;
+  }
+
+  .social-icons::after,
+  .nav-links::after {
     content: "";
     height: 2rem;
     border-inline-end: 1px solid var(--sl-color-gray-5);