[design] improve menu with new grid

css/base.css

@@ -100,6 +100,10 @@ body {
   height: 100vh;
 }
 
+.is-menu-open body {
+  overflow: hidden;
+}
+
 .is-header-alignment-vertical-top body {
   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: 2em 2em 20vh 2em;
 }
 
 .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-area {
+    overflow-y: inherit;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 100fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    justify-items: stretch;
+    align-items: stretch;
+  }
+
   .menu-content {
-    padding: 2em;
-    max-height: 70vh;
-    overflow-y: scroll;
-  }
-
-  .menu-nav {
-    flex-direction: row;
-  }
-
-  .menu-nav-area {
-    flex-direction: row;
+    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 @@
 
       <div class="menu-nav">
         <div class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
-          <button class="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
-          <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
-          <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
-          <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
+          <button class="menu-nav-button button button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
+          <button class="menu-nav-button button button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
+          <button class="menu-nav-button button button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
+          <button class="menu-nav-button button button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
         </div>
         <div class="menu-nav-area">
           <button class="menu-close button button-block button-large mb-0" tabindex="1"><span class="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 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "2.9.0";
+  var current = "2.9.1";
 
   var get = function() {
     var number = current.split(".");