[design] improve menu with new grid

Author: zombieFox

css/base.css

@@ -100,6 +100,10 @@ body{
 height:100vh;
 }
 
+.is-menu-openbody{
+overflow: hidden;
+}
+
 .is-header-alignment-vertical-topbody{
 justify-content: flex-start;
 }

css/header.css

@@ -24,7 +24,7 @@
 }
 
 .is-header-shade-style-scroll .header .header-shade{
-transition: background-color var(--animation-speed-fast) ease-in-out;
+transition: background-color var(--animation-speed-slow) ease-in-out;
 animation: none;
 }
 

css/menu.css

@@ -1,15 +1,14 @@
 .menu{
-background-color:rgb(var(--gray-01));
-border-radius:var(--radius);
+padding:1em;
 position: fixed;
-top:1em;
-right:1em;
-width:calc(100vw-2em);
-max-height:calc(80vh-2em);
-overflow-y: auto;
+top:0;
+right:0;
+width:100%;
+height:80vh;
 transform:translateY(calc(-100%-2em));
 transition: transform var(--animation-speed-fast) ease-in-out;
 z-index:var(--z-index-menu);
+pointer-events: none;
 }
 
 .menu:focus{
@@ -21,18 +20,24 @@
 }
 
 .menu-area{
-display: flex;
-flex-direction: column;
+background-color:rgb(var(--gray-01));
+border-radius:var(--radius);
+width:100%;
+height:100%;
+overflow-y: auto;
+pointer-events: all;
 }
 
 .menu-nav{
 display: flex;
 flex-direction: column-reverse;
+flex-direction: row;
 }
 
 .menu-nav-area{
 display: flex;
-flex-direction: column;
+flex-direction: row;
+flex-wrap: wrap;
 }
 
 .menu-nav-area-grow{
@@ -44,7 +49,7 @@
 }
 
 .menu-content{
-padding:2em;
+padding:2em2em20vh2em;
 }
 
 .menu-content-area{
@@ -79,6 +84,7 @@
 padding-bottom:1em;
 border-radius:0;
 flex-grow:1;
+flex-basis:50%;
 }
 
 .menu-nav-button:first-child{
@@ -94,27 +100,29 @@
 
 @media (min-width:550px){
  .menu{
+width:80vw;
+height:100%;
 overflow-y: inherit;
 max-height: inherit;
  }
 
- .menu-content{
-padding:2em;
-max-height:70vh;
-overflow-y: scroll;
- }
-
- .menu-nav{
-flex-direction: row;
+ .menu-area{
+overflow-y: inherit;
+display: grid;
+grid-template-columns:1fr;
+grid-template-rows:1fr100fr;
+grid-column-gap:0px;
+grid-row-gap:0px;
+justify-items: stretch;
+align-items: stretch;
  }
 
- .menu-nav-area{
-flex-direction: row;
+ .menu-content{
+overflow-y: auto;
  }
 
  .menu-content-area{
 grid-template-columns:repeat(2,1fr);
-margin-bottom:10vh;
  }
 
  .menu-nav-button{
@@ -124,15 +132,12 @@
 
 @media (min-width:900px){
  .menu{
-width:calc(60vw-2em);
-max-height:calc(100vh-2em);
-max-width:40em;
+width:60vw;
  }
 }
 
 @media (min-width:1100px){
  .menu{
-width:calc(50vw-2em);
-max-width:50em;
+width:50vw;
  }
 }

index.html

@@ -98,10 +98,10 @@
 
 <divclass="menu-nav">
 <divclass="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
-<buttonclass="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
-<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
-<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
-<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
+<buttonclass="menu-nav-button button button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
+<buttonclass="menu-nav-button button button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
+<buttonclass="menu-nav-button button button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
+<buttonclass="menu-nav-button button button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
 </div>
 <divclass="menu-nav-area">
 <buttonclass="menu-close button button-block button-large mb-0" tabindex="1"><spanclass="icon-close"></span></button>

js/update.js

@@ -187,6 +187,10 @@ var update = (function(){
 console.log("\trunning update",2.90);
 data=_update_290(data);
 };
+if(data.version<2.91){
+console.log("\trunning update",2.91);
+data.version=2.91;
+};
 // if (data.version < 3.00){
 // console.log("\t# running update", 3.00);
 // data = _update_300(data);

js/version.js

@@ -1,7 +1,7 @@
 varversion=(function(){
 
 // version is normally bumped when the state needs changing or any new functionality is added
-varcurrent="2.9.0";
+varcurrent="2.9.1";
 
 varget=function(){
 varnumber=current.split(".");