Added flex wrapping to the nav ul and adjusted gap sizing.

corigne · Aug 9, 2024 · a5f2507 · a5f2507
1 parent 6341819
commit a5f2507
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/frontend/src/app.css b/frontend/src/app.css
@@ -73,15 +73,15 @@
     }
     .header {
         nav {
-            @apply mt-2 mb-5 h-auto md:h-12 p-2 md:p-4 gap-2 md:gap-6
+            @apply mt-2 mb-5 h-auto md:h-12 p-2 md:p-4 gap-x-2 md:gap-x-6 gap-y-2
             drop-shadow-md bg-base md:rounded-lg
             outline outline-1 outline-overlay0 transition-all duration-700
         }
         div {
             @apply w-full
         }
         ul {
-            @apply w-full flex flex-grow justify-center flex-row gap-5 lg:gap-16 items-center list-none
+            @apply w-full flex flex-grow justify-center flex-row gap-y-1 gap-x-8 lg:gap-x-16 items-center list-none
             transition-all duration-700
         }
         a {

diff --git a/frontend/src/routes/components/Header.svelte b/frontend/src/routes/components/Header.svelte
@@ -9,7 +9,7 @@ import ThemeToggle from './ThemeToggle.svelte';
             <b>{config.title}</b>
         </a>
 
-        <ul id="header-navbar" class="header-navbar">
+        <ul id="header-navbar" class="header-navbar flex-row flex-wrap">
             <li>
                 <a href="/about">about</a>
             </li>