merge !25

resolves #28 show nav list titles in nav menu and show component title in breadcrumbs

1 files changed, 30 insertions, 28 deletions

diff --git a/src/css/navigation-menu.css b/src/css/navigation-menu.css
index 6dc2374..ddcd2bb 100644
--- a/src/css/navigation-menu.css
+++ b/src/css/navigation-menu.css
@@ -17,10 +17,27 @@ html.is-clipped--nav {
   flex-grow: 1;
   min-height: 0;
   /* QUESTION move padding to .navigation-menu? */
+  padding: 0.5rem 0.25rem;
+}
+
+.nav-menu h3.title {
+  margin: 0;
+  font-weight: 500;
+  color: #424242;
+  font-size: 1em;
   /*
-  padding: 0.5rem;
+  padding: 0.125em 0.75em 0.25em;
   */
-  padding: 0.4rem 0.5rem;
+  padding: 0.25em 0.75em;
+}
+
+.nav-menu a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.nav-menu a:hover {
+  text-decoration: underline;
 }
 
 .nav-list {
@@ -38,19 +55,21 @@ html.is-clipped--nav {
   align-items: flex-start;
   flex-wrap: wrap;
   list-style: none;
-}
-
-.nav-item .nav-item {
   padding-top: 0.25em;
 }
 
-.nav-item > .nav-list {
+.nav-item:not(.is-active) > .nav-list {
   display: none;
 }
 
-.nav-item[data-depth="0"] > .nav-list,
-.nav-item.is-active > .nav-list {
+/* matches list without a title */
+.nav-item[data-depth="0"] > .nav-list:first-child {
   display: block;
+  margin-left: 0;
+}
+
+.nav-item[data-depth="0"] > .nav-list:first-child > .nav-item:first-child {
+  padding-top: 0;
 }
 
 .nav-toggle {
@@ -58,11 +77,12 @@ html.is-clipped--nav {
   background-size: 85%;
   border: none;
   cursor: pointer;
-  font-size: inherit;
   height: 1.85em;
   outline: none;
   padding: 0;
-  width: 1em;
+  /* nudge font size and width to fix calculation error in Chrome */
+  font-size: 0.95em;
+  width: 1.0526em;
 }
 
 @media (min-width: 769px) {
@@ -81,11 +101,9 @@ html.is-clipped--nav {
 
 .nav-link,
 .nav-text {
-  color: inherit;
   display: inline-block;
   line-height: 1.85;
   margin-left: 1em;
-  text-decoration: none;
   padding-left: 0.25em;
 }
 
@@ -101,23 +119,7 @@ html.is-clipped--nav {
   font-weight: 500;
 }
 
-.nav-item[data-depth="0"] > .nav-link,
-.nav-item[data-depth="0"] > .nav-text,
-.nav-item[data-depth="0"] > .nav-list {
-  margin-left: 0;
-}
-
 .nav-toggle + .nav-link,
 .nav-toggle + .nav-text {
   margin-left: 0;
 }
-
-.nav-link:hover {
-  text-decoration: underline;
-}
-
-.nav-item[data-depth="0"] > .nav-link,
-.nav-item[data-depth="0"] > .nav-text {
-  padding-left: 0;
-  display: none; /* FIXME temporary */
-}