merge !27

resolves #33 fix nav menu from crashing into footer

3 files changed, 19 insertions, 1 deletions

diff --git a/src/css/navigation-explore.css b/src/css/navigation-explore.css
index 85cbcc8..2943c15 100644
--- a/src/css/navigation-explore.css
+++ b/src/css/navigation-explore.css
@@ -20,7 +20,7 @@
   /* font-size: 0.75rem; */
   font-size: 0.8824em;
   line-height: 1;
-  height: var(--toolbar-height);
+  height: var(--drawer-height);
 }
 
 .navigation-explore.is-active .current {
diff --git a/src/css/navigation-menu.css b/src/css/navigation-menu.css
index ddcd2bb..df7b385 100644
--- a/src/css/navigation-menu.css
+++ b/src/css/navigation-menu.css
@@ -9,6 +9,17 @@ html.is-clipped--nav {
   flex-direction: column;
 }
 
+/* help Chrome calculate the height correctly; must match .navigation value minus height of drawer */
+.navigation-menu {
+  height: calc(100vh - var(--navbar-height) - var(--toolbar-height) - var(--drawer-height));
+}
+
+@media (min-width: 1024px) {
+  .navigation-menu {
+    height: calc(100vh - var(--navbar-height) - var(--drawer-height));
+  }
+}
+
 .navigation-menu:not(.is-active) {
   display: none;
 }
@@ -28,7 +39,10 @@ html.is-clipped--nav {
   /*
   padding: 0.125em 0.75em 0.25em;
   */
+  /*
   padding: 0.25em 0.75em;
+  */
+  padding: 0.125rem 0.5rem 0.25rem;
 }
 
 .nav-menu a {
diff --git a/src/css/navigation.css b/src/css/navigation.css
index aaa0d22..36979ee 100644
--- a/src/css/navigation.css
+++ b/src/css/navigation.css
@@ -1,3 +1,7 @@
+:root {
+  --drawer-height: 2.5rem;
+}
+
 .navigation-container {
   display: none;
   position: fixed;