[design] improve menu nav spacing

Author: zombieFox

src/css/form.css

@@ -29,7 +29,7 @@
 }
 
 .form-indent{
-margin-left:calc(var(--form-wrap-space) *3);
+margin-left:calc(var(--form-wrap-space) *2.25);
 }
 
 .form-inline{

src/css/menu.css

@@ -110,33 +110,30 @@
 }
 
 .menu-content{
-padding-left:calc(var(--menu-space) *3);
-padding-right:calc(var(--menu-space) *3);
 grid-column-start:1;
 grid-column-end:3;
 }
 
 .menu-content-item{
-padding-top:calc(var(--menu-space) *3);
-padding-bottom:calc(var(--menu-space) *3);
+padding:calc(var(--menu-space) *3);
 position: relative;
 z-index:1;
 }
 
 .menu-content-item:not(:last-child){
-border-bottom:var(--horizontal-rule);
+border-bottom:var(--horizontal-rule-large);
 }
 
 .menu-item-header{
-margin-bottom:calc(var(--menu-space) *3);
+margin-bottom:calc(var(--menu-space) *2);
 }
 
 .menu-item-header-text{
 margin-bottom:0;
 }
 
 .menu-item-form{
-margin:00calc(var(--menu-space) *3)calc(var(--menu-space) *3);
+padding-left:calc(var(--menu-space) *3);
 z-index:1;
 }
 
@@ -156,7 +153,7 @@
  .menu-area{
 max-height:100%;
 grid-template-rows:1fr;
-grid-template-columns:15em1frcalc(var(--menu-space) *4);
+grid-template-columns:calc(var(--menu-space) *20)1frcalc(var(--menu-space) *4);
 overflow: hidden;
 position: relative;
  }
@@ -171,35 +168,39 @@
 align-items: stretch;
 flex-wrap: nowrap;
 overflow-y: auto;
+z-index:1;
  }
 
- .menu-close{
-grid-column-start:3;
+ .menu-content{
+grid-column-start:2;
 grid-column-end:4;
 grid-row-start:1;
 grid-row-end:2;
-align-self: start;
-position: absolute;
+scroll-behavior: smooth;
+overflow-y: auto;
+z-index:2;
  }
 
- .menu-content{
-padding-left:calc(var(--menu-space) *4);
-padding-right:calc(var(--menu-space) *4);
-grid-column-start:2;
+ .menu-close{
+grid-column-start:3;
 grid-column-end:4;
 grid-row-start:1;
 grid-row-end:2;
-scroll-behavior: smooth;
-overflow-y: auto;
+align-self: start;
+position: absolute;
+z-index:3;
  }
 
  .menu-content-overscroll{
 padding-bottom:calc(var(--menu-space) *30);
  }
 
  .menu-content-item{
-padding-top:calc(var(--menu-space) *4);
-padding-bottom:calc(var(--menu-space) *4);
+padding:calc(var(--menu-space) *4);
+ }
+
+ .menu-item-header{
+margin-bottom:calc(var(--menu-space) *3);
  }
 
  .menu-nav-item{
@@ -257,7 +258,7 @@
  }
 
  .menu-item-form{
-margin:000calc(var(--menu-space) *3);
+padding-left:calc(var(--menu-space) *4);
  }
 }
 
@@ -267,23 +268,25 @@
  }
 
  .menu-area{
-grid-template-columns:15em1frcalc(var(--menu-space) *5);
+grid-template-columns:calc(var(--menu-space) *20)1frcalc(var(--menu-space) *5);
  }
 
- .menu-content{
-padding-left:calc(var(--menu-space) *5);
-padding-right:calc(var(--menu-space) *5);
+ .menu-content-item{
+padding:calc(var(--menu-space) *5);
  }
 
- .menu-content-item{
-padding-top:calc(var(--menu-space) *5);
-padding-bottom:calc(var(--menu-space) *5);
+ .menu-item-header{
+margin-bottom:calc(var(--menu-space) *4);
  }
 
  .menu-close-tab{
 height:calc(var(--menu-space) *5);
 width:calc(var(--menu-space) *5);
  }
+
+ .menu-item-form{
+padding-left:calc(var(--menu-space) *5);
+ }
 }
 
 @media (min-width:1100px){

src/css/typography.css

@@ -66,9 +66,9 @@ p:not(:last-child){
 
 hr{
 border:0;
-border-top:var(--horizontal-rule);
+border-top:var(--horizontal-rule-small);
 border-radius:var(--theme-radius);
-margin:1em0;
+margin:var(--form-wrap-space)0;
 clear: both;
 }
 

src/css/variables.css

@@ -127,7 +127,8 @@
 --layout-timing-medium:var(--layout-duration-06) ease-in-out;
 --layout-timing-slow:var(--layout-duration-08) ease-in-out;
 --layout-timing-extra-slow:var(--layout-duration-10) ease-in-out;
---horizontal-rule:var(--layout-line-width) solid rgb(var(--theme-color-02));
+--horizontal-rule-small:1px solid rgb(var(--theme-color-02));
+--horizontal-rule-large:2px solid rgb(var(--theme-color-02));
 /* background */
 --background-color-theme:var(--theme-color-01);
 --background-color-custom:rgb(0,0,0);