resolves #63 fix nav menu layout

- use absolute positioning for toggle to avoid unintended wrapping behavior
- reduce size of toggle button
- tighten line height
- adjust spacing

diff --git a/src/css/navigation-menu.css b/src/css/navigation-menu.css
index 2450212..d7f0c00 100644 (file)
--- a/src/css/navigation-menu.css
+++ b/src/css/navigation-menu.css
@@ -27,8 +27,9 @@ html.is-clipped--nav {
 .nav-menu {
   flex-grow: 1;
   min-height: 0;
-  /* QUESTION move padding to .navigation-menu? */
-  padding: 0.5rem 0.25rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  line-height: 1.35;
 }
 
 .nav-menu h3.title {
@@ -36,13 +37,7 @@ html.is-clipped--nav {
   font-weight: 500;
   color: #424242;
   font-size: 1em;
-  /*
-  padding: 0.125em 0.75em 0.25em;
-  */
-  /*
-  padding: 0.25em 0.75em;
-  */
-  padding: 0.125rem 0.5rem 0.25rem;
+  padding: 0.25em 0 0.125em;
 }
 
 .nav-menu a,
@@ -51,56 +46,50 @@ html.is-clipped--nav {
 }
 
 .nav-list {
-  margin: 0;
-  /* bottom padding allows scroll to extend slightly beyond end of list */
-  padding: 0 0 0.5em;
-  width: 100%;
+  margin: 0 0 0 0.8em;
+  padding: 0;
 }
 
-.nav-list .nav-list {
-  margin-left: 1em;
-  padding-bottom: 0;
+.nav-menu > .nav-list {
+  margin-bottom: 0.5rem;
 }
 
 .nav-item {
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
   list-style: none;
-  padding-top: 0.25em;
+  position: relative;
+  /*
+  margin-top: 0.375em;
+  */
+  margin-top: 0.5em;
 }
 
-.nav-item:not(.is-active) > .nav-list {
-  display: none;
+.nav-item .nav-list {
+  /*
+  margin-bottom: 0.5rem;
+  */
+  margin-bottom: 0.625rem;
 }
 
 /* matches list without a title */
 .nav-item[data-depth="0"] > .nav-list:first-child {
   display: block;
-  margin-left: 0;
+  margin: 0;
 }
 
-.nav-item[data-depth="0"] > .nav-list:first-child > .nav-item:first-child {
-  padding-top: 0;
+.nav-item:not(.is-active) > .nav-list {
+  display: none;
 }
 
 .nav-toggle {
-  background: transparent url(../img/caret.svg) no-repeat left center;
-  background-size: 85%;
+  background: transparent url(../img/caret.svg) no-repeat center;
+  background-size: 55%;
   border: none;
   cursor: pointer;
-  height: 1.85em;
   outline: none;
-  padding: 0;
-  /* nudge font size and width to fix calculation error in Chrome */
-  font-size: 0.95em;
-  width: 1.0526em;
-}
-
-@media screen and (min-width: 769px) {
-  .nav-toggle {
-    height: 1.6em;
-  }
+  position: absolute;
+  height: 1.35em; /* NOTE must match line-height of text */
+  width: 1.5em;
+  margin-left: -1.5em;
 }
 
 .nav-toggle::-moz-focus-inner {
@@ -111,27 +100,7 @@ html.is-clipped--nav {
   transform: rotate(90deg);
 }
 
-.nav-link,
-.nav-text {
-  display: inline-block;
-  line-height: 1.85;
-  margin-left: 1em;
-  padding-left: 0.25em;
-}
-
-@media screen and (min-width: 769px) {
-  .nav-link,
-  .nav-text {
-    line-height: 1.6;
-  }
-}
-
 .is-current-page > .nav-link,
 .is-current-page > .nav-text {
   font-weight: 500;
 }
-
-.nav-toggle + .nav-link,
-.nav-toggle + .nav-text {
-  margin-left: 0;
-}