Improve spacing for small screen menu items

pindab0ter · Apr 12, 2024 · 7022bc6 · 7022bc6
1 parent d994c47
commit 7022bc6
Showing 1 changed file with 5 additions and 8 deletions.
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -137,12 +137,9 @@
       </label>
     </div>
 
-    <ul
-      class="mb-3 ms-3 hidden w-fit flex-col sm:mb-0 sm:ms-0 sm:flex sm:flex-row flex-shrink-0"
-      id="nav-menu"
-    >
+    <ul class="mb-4 hidden w-fit flex-col sm:mb-0 sm:flex sm:flex-row flex-shrink-0" id="nav-menu">
       {{ with .Site.Home }}
-        <li>
+        <li class="mb-2.5 sm:mb-0">
           <a
             class="mx-2 font-mono text-gray-500 transition-colors duration-200 hover:text-accent-light-500 dark:text-gray-200 dark:hover:text-accent-dark-500"
             href="{{ .RelPermalink }}"
@@ -151,7 +148,7 @@
         </li>
       {{ end }}
       {{ with .Site.GetPage "/about" }}
-        <li>
+        <li class="mb-2.5 sm:mb-0">
           <a
             class="mx-2 font-mono text-gray-500 transition-colors duration-200 hover:text-accent-light-500 dark:text-gray-200  dark:hover:text-accent-dark-500"
             href="{{ .RelPermalink }}"
@@ -160,7 +157,7 @@
         </li>
       {{ end }}
       {{ with .Site.GetPage "/blog" }}
-        <li>
+        <li class="mb-2.5 sm:mb-0">
           <a
             class="mx-2 font-mono text-gray-500 transition-colors duration-200 hover:text-accent-light-500 dark:text-gray-200  dark:hover:text-accent-dark-500"
             href="{{ .RelPermalink }}"
@@ -169,7 +166,7 @@
         </li>
       {{ end }}
       {{ with .Site.GetPage "/archive" }}
-        <li>
+        <li class="mb-2.5 sm:mb-0">
           <a
             class="mx-2 font-mono text-gray-500 transition-colors duration-200 hover:text-accent-light-500 dark:text-gray-200  dark:hover:text-accent-dark-500"
             href="{{ .RelPermalink }}"