better mobile navigation

content/nixos/new-design.md

@@ -1,6 +1,7 @@
 ---
 title: new template
 date: 2021-08-27
+draft: true
 tags:
 - hugo
 summary: >

src/lessc/page/main-navigation.less

@@ -1,8 +1,10 @@
 #main-navigation {
   background-color: @color-nav-background;
+
   @media @desktop {
     width: 800px;
   }
+
   width: 100%;
   margin-left: auto;
   margin-right: auto;
@@ -12,7 +14,10 @@
     display: flex;
     justify-content: space-between;
 
-    margin-top: 2em;
+    @media @desktop{
+      margin-top: 2em;
+    }
+
     margin-bottom: 0;
 
     list-style-type: none;
@@ -29,6 +34,11 @@
       font-size: 1rem;
       padding: 0;
 
+      @media @desktop{
+        margin-top: 1.5em;
+      }
+      margin-top: 0;
+
       &:after {
         content: "";
       }
@@ -46,12 +56,18 @@
         color: @color-nav-text;
 
         // underscore
-        margin-right: 0px; // space between items
-        padding-bottom: 0.4em; // space to the underscore
+        margin-right: 0; // space between items
+        margin-left: 0; // space between items
         border-bottom: 2px solid @color-nav-underline;
-        padding-top: 0.4em; // space to the underscore
         border-top: 2px solid @color-nav-underline;
 
+        padding-bottom: 1.1em; // space to the underscore
+        padding-top: 1.1em; // space to the underscore
+        @media @desktop{
+          padding-bottom: 0.6em; // space to the underscore
+          padding-top: 0.6em; // space to the underscore
+        }
+
       }
     }
   }