simplify computed height for nav menu panel; use var for nav explore panel (max)...
authorDan Allen <dan@opendevise.com>
Wed, 30 Dec 2020 09:48:23 +0000 (02:48 -0700)
committerDan Allen <dan@opendevise.com>
Wed, 30 Dec 2020 09:48:23 +0000 (02:48 -0700)
src/css/nav.css
src/css/vars.css

index 80b7cbe..06e2eeb 100644 (file)
@@ -62,13 +62,7 @@ html.is-clipped--nav {
 
 .nav-panel-menu {
   overflow-y: scroll;
-  height: var(--nav-panel-height);
-}
-
-@media screen and (min-width: 1024px) {
-  .nav-panel-menu {
-    height: var(--nav-panel-height--desktop);
-  }
+  height: var(--nav-panel-menu-height);
 }
 
 .nav-panel-menu:not(.is-active) .nav-menu {
@@ -168,7 +162,7 @@ html.is-clipped--nav {
 
 .nav-panel-explore:not(:first-child) {
   top: auto;
-  max-height: calc(50% + var(--drawer-height));
+  max-height: var(--nav-panel-explore-height);
 }
 
 .nav-panel-explore .context {
index c13a789..a6f4590 100644 (file)
   --body-min-height: calc(100vh - var(--body-top));
   --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
   --nav-height--desktop: var(--body-min-height);
-  --nav-panel-height: calc(var(--nav-height) - var(--drawer-height));
-  --nav-panel-height--desktop: calc(var(--nav-height--desktop) - var(--drawer-height));
+  --nav-panel-menu-height: calc(100% - var(--drawer-height));
+  --nav-panel-explore-height: calc(50% + var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
   --toc-top: calc(var(--body-top) + var(--toolbar-height));
   --toc-height: calc(100vh - var(--toc-top) - 2.5rem);