rename CSS classes and add more CSS variables

- rename CSS classes to make them more concise and consistent
- extract CSS variables into dedicated file
- pull more widths and heights into CSS variables
- rename crumbs to breadcrumbs
- consolidate styles for site navigation into single CSS file

diff --git a/src/css/base.css b/src/css/base.css
index 5d66327..c3602d0 100644 (file)
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -1,10 +1,3 @@
-:root {
-  --color-text: #222;
-  --color-navbar-bg: #0a0a0a;
-  --color-navbar-bg-focus: #000;
-  --color-navbar-text: #fff;
-}
-
 html,
 body {
   height: 100%;

diff --git a/src/css/body.css b/src/css/body.css
new file mode 100644 (file)
index 0000000..1d4db3d
--- /dev/null
+++ b/src/css/body.css
@@ -0,0 +1,5 @@
+@media screen and (min-width: 1024px) {
+  .body {
+    display: flex;
+  }
+}

diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css
index 6ec1824..d85fb59 100644 (file)
--- a/src/css/breadcrumbs.css
+++ b/src/css/breadcrumbs.css
@@ -1,4 +1,4 @@
-.crumbs {
+.breadcrumbs {
   display: none;
   flex: 1 1;
   padding: 0 0.5rem 0 0.75rem;
@@ -7,16 +7,16 @@
 }
 
 @media screen and (min-width: 1024px) {
-  .crumbs {
+  .breadcrumbs {
     display: block;
   }
 }
 
-a + .crumbs {
+a + .breadcrumbs {
   padding-left: 0.05rem;
 }
 
-.crumbs ul {
+.breadcrumbs ul {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
@@ -24,16 +24,16 @@ a + .crumbs {
   list-style: none;
 }
 
-.crumbs li {
+.breadcrumbs li {
   display: inline;
   margin: 0;
 }
 
-.crumbs li::after {
+.breadcrumbs li::after {
   content: "/";
   padding: 0 0.5rem;
 }
 
-.crumbs li:last-of-type::after {
+.breadcrumbs li:last-of-type::after {
   content: none;
 }

diff --git a/src/css/doc.css b/src/css/doc.css
index 92a5916..922af29 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -1,6 +1,6 @@
 .doc {
   margin: 0 auto;
-  max-width: 40rem;
+  max-width: var(--width-doc-mobile);
   padding: 0 1rem 4rem;
   color: #333;
 }
@@ -8,7 +8,7 @@
 @media screen and (min-width: 1024px) {
   .doc {
     margin: 0 2rem;
-    max-width: 54rem;
+    max-width: var(--width-doc);
   }
 }
 

diff --git a/src/css/header.css b/src/css/header.css
index 0bb4ec0..84eab5f 100644 (file)
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -1,25 +1,21 @@
-:root {
-  --navbar-height: 3.25rem;
-}
-
 html.is-clipped--navbar {
   overflow-y: hidden;
 }
 
 body {
-  padding-top: var(--navbar-height);
+  padding-top: var(--height-navbar);
 }
 
 .navbar {
   background-color: var(--color-navbar-bg);
   color: var(--color-navbar-text);
   font-size: 0.83333rem;
-  height: var(--navbar-height);
+  height: var(--height-navbar);
   position: fixed;
   top: 0;
   width: 100%;
   word-wrap: break-word;
-  z-index: 3;
+  z-index: var(--z-index-navbar);
 }
 
 .navbar a {
@@ -62,7 +58,7 @@ body {
   align-items: stretch;
   display: flex;
   flex-shrink: 0;
-  height: var(--navbar-height);
+  height: var(--height-navbar);
 }
 
 .navbar-burger {
@@ -72,9 +68,9 @@ body {
   outline: none;
   cursor: pointer;
   display: block;
-  height: var(--navbar-height);
+  height: var(--height-navbar);
   position: relative;
-  /* width: var(--navbar-height); */
+  /* width: var(--height-navbar); */
   width: 2.75rem;
   margin-left: auto;
   padding: 0;
@@ -184,7 +180,7 @@ body {
   .navbar-menu.is-active {
     display: block;
     box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-    max-height: calc(100vh - var(--navbar-height));
+    max-height: var(--height-nav);
     overflow-y: auto;
   }
 

diff --git a/src/css/main.css b/src/css/main.css
index 0d51e10..d48eea0 100644 (file)
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,8 +1,4 @@
 @media screen and (min-width: 1024px) {
-  .body {
-    display: flex;
-  }
-
   main {
     flex: auto;
     /* min-width: 0 required for flexbox to constrain overflowing elements */

diff --git a/src/css/nav.css b/src/css/nav.css
new file mode 100644 (file)
index 0000000..e94d6f4
--- /dev/null
+++ b/src/css/nav.css
@@ -0,0 +1,269 @@
+.nav-container {
+  display: none;
+  position: fixed;
+  top: var(--height-navbar);
+  left: 0;
+  width: 100%;
+  font-size: 0.9375rem;
+  z-index: var(--z-index-nav);
+}
+
+.nav-container.is-active {
+  display: block;
+}
+
+@media screen and (min-width: 769px) {
+  .nav-container {
+    width: var(--width-nav);
+    font-size: 0.875rem;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .nav-container {
+    font-size: 0.8125rem;
+    flex: none;
+    display: block;
+    position: static;
+    top: 0;
+  }
+}
+
+.nav {
+  background-color: #fafafa;
+  position: relative;
+  top: var(--height-toolbar);
+  height: var(--height-nav-mobile);
+}
+
+@media screen and (min-width: 769px) {
+  .nav {
+    box-shadow: 0.5px 0 3px #c1c1c1;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .nav {
+    top: var(--height-navbar);
+    box-shadow: none;
+    position: sticky;
+    height: var(--height-nav);
+  }
+}
+
+.nav .panels {
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+}
+
+html.is-clipped--nav {
+  overflow-y: hidden;
+}
+
+.nav-panel-menu {
+  flex-grow: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  /* help Chrome calculate the height correctly; must match .nav value minus height of drawer */
+  height: var(--height-nav-panel-mobile);
+}
+
+@media screen and (min-width: 1024px) {
+  .nav-panel-menu {
+    height: var(--height-nav-panel);
+  }
+}
+
+.nav-panel-menu:not(.is-active) {
+  display: none;
+}
+
+.nav-panel-menu::-webkit-scrollbar {
+  width: 0.25rem;
+}
+
+.nav-panel-menu::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+}
+
+.nav-menu {
+  flex-grow: 1;
+  min-height: 0;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  line-height: 1.35;
+  position: relative;
+}
+
+.nav-menu h3.title {
+  margin: 0;
+  font-weight: 500;
+  color: #424242;
+  font-size: 1em;
+  padding: 0.25em 0 0.125em;
+}
+
+.nav-menu a,
+.nav-menu a:visited {
+  color: inherit;
+}
+
+.nav-list {
+  margin: 0 0 0 0.8em;
+  padding: 0;
+}
+
+.nav-menu > .nav-list {
+  margin-bottom: 0.5rem;
+}
+
+.nav-item {
+  list-style: none;
+  margin-top: 0.5em;
+}
+
+/* adds some breathing room below a nested list */
+.nav-item-toggle ~ .nav-list {
+  padding-bottom: 0.125rem;
+}
+
+/* matches list without a title */
+.nav-item[data-depth="0"] > .nav-list:first-child {
+  display: block;
+  margin: 0;
+}
+
+.nav-item:not(.is-active) > .nav-list {
+  display: none;
+}
+
+.nav-item-toggle {
+  background: transparent url(../img/caret.svg) no-repeat center;
+  background-size: 55%;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  position: absolute;
+  height: 1.4em; /* NOTE must match line-height of text; slightly tweaked for alignment */
+  width: 1.5em;
+  margin-left: -1.5em;
+}
+
+.nav-item-toggle::-moz-focus-inner {
+  border: none;
+}
+
+.nav-item.is-active > .nav-item-toggle {
+  transform: rotate(90deg);
+}
+
+.is-current-page > .nav-link,
+.is-current-page > .nav-text {
+  font-weight: 500;
+}
+
+.nav-panel-explore {
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-panel-explore.is-active {
+  height: inherit;
+}
+
+.nav-panel-explore .context {
+  flex-shrink: 0;
+  color: #5d5d5d;
+  background-color: #fafafa;
+  box-shadow: 0 -1px 0 #e1e1e1;
+  padding: 0 0.25rem 0 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  line-height: 1;
+  font-size: 0.8125rem;
+  height: var(--height-drawer);
+}
+
+@media screen and (min-width: 1024px) {
+  .nav-panel-explore .context {
+    font-size: 0.75rem;
+  }
+}
+
+.nav-panel-explore.is-active .context {
+  box-shadow: 0 1px 0 #e1e1e1;
+}
+
+.nav-panel-explore .context .version {
+  background-image: url(../img/chevron.svg);
+  background-repeat: no-repeat;
+  background-position: right 0.5rem top 50%;
+  background-size: auto 0.75em;
+  padding: 0 1.5rem 0 0;
+}
+
+.nav-panel-explore .components {
+  flex-grow: 1;
+  box-shadow: inset 0 1px 5px #e1e1e1;
+  background-color: #f0f0f0;
+  padding: 0.5rem;
+  margin: 0;
+  overflow-y: auto;
+  max-height: 100%;
+  display: block;
+}
+
+.nav-panel-explore:not(.is-active) .components {
+  display: none;
+}
+
+.nav-panel-explore .component {
+  display: block;
+}
+
+.nav-panel-explore .component + .component {
+  margin-top: 0.5rem;
+}
+
+.nav-panel-explore .component .title {
+  font-weight: 500;
+}
+
+.nav-panel-explore .versions {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding-left: 0.5rem;
+}
+
+.nav-panel-explore .component .version {
+  display: block;
+  font-size: 0.9375em;
+}
+
+.nav-panel-explore .component .version a {
+  border: 1px solid #b0b0b0;
+  border-radius: 0.25em;
+  color: #4a4a4a;
+  white-space: nowrap;
+  padding: 0.05em 0.25em 0;
+}
+
+.nav-panel-explore .component .is-current a {
+  border-color: #4a4a4a;
+  font-weight: 500;
+}
+
+/*
+.nav-panel-explore .component .is-latest a::after {
+  content: " (latest)";
+}
+*/
+
+.nav-panel-explore .component .version + .version {
+  padding-left: 0.375em;
+}

diff --git a/src/css/navigation-explore.css b/src/css/navigation-explore.css
deleted file mode 100644 (file)
index 938e51a..0000000
--- a/src/css/navigation-explore.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.navigation-explore {
-  display: flex;
-  flex-direction: column;
-}
-
-.navigation-explore.is-active {
-  height: inherit;
-}
-
-.navigation-explore .context {
-  flex-shrink: 0;
-  color: #5d5d5d;
-  background-color: #fafafa;
-  box-shadow: 0 -1px 0 #e1e1e1;
-  padding: 0 0.25rem 0 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  line-height: 1;
-  font-size: 0.8125rem;
-  height: var(--drawer-height);
-}
-
-@media screen and (min-width: 1024px) {
-  .navigation-explore .context {
-    font-size: 0.75rem;
-  }
-}
-
-.navigation-explore.is-active .context {
-  box-shadow: 0 1px 0 #e1e1e1;
-}
-
-.navigation-explore .context .version {
-  background-image: url(../img/chevron.svg);
-  background-repeat: no-repeat;
-  background-position: right 0.5rem top 50%;
-  background-size: auto 0.75em;
-  padding: 0 1.5rem 0 0;
-}
-
-.navigation-explore .components {
-  flex-grow: 1;
-  box-shadow: inset 0 1px 5px #e1e1e1;
-  background-color: #f0f0f0;
-  padding: 0.5rem;
-  margin: 0;
-  overflow-y: auto;
-  max-height: 100%;
-  display: block;
-}
-
-.navigation-explore:not(.is-active) .components {
-  display: none;
-}
-
-.navigation-explore .component {
-  display: block;
-}
-
-.navigation-explore .component + .component {
-  margin-top: 0.5rem;
-}
-
-.navigation-explore .component .title {
-  font-weight: 500;
-}
-
-.navigation-explore .versions {
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  padding-left: 0.5rem;
-}
-
-.navigation-explore .component .version {
-  display: block;
-  font-size: 0.9375em;
-}
-
-.navigation-explore .component .version a {
-  border: 1px solid #b0b0b0;
-  border-radius: 0.25em;
-  color: #4a4a4a;
-  white-space: nowrap;
-  padding: 0.05em 0.25em 0;
-}
-
-.navigation-explore .component .is-current a {
-  border-color: #4a4a4a;
-  font-weight: 500;
-}
-
-/*
-.navigation-explore .component .is-latest a::after {
-  content: " (latest)";
-}
-*/
-
-.navigation-explore .component .version + .version {
-  padding-left: 0.375em;
-}

diff --git a/src/css/navigation-menu.css b/src/css/navigation-menu.css
deleted file mode 100644 (file)
index d781944..0000000
--- a/src/css/navigation-menu.css
+++ /dev/null
@@ -1,106 +0,0 @@
-html.is-clipped--nav {
-  overflow-y: hidden;
-}
-
-.navigation-menu {
-  flex-grow: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  /* help Chrome calculate the height correctly; must match .navigation value minus height of drawer */
-  height: calc(100vh - var(--navbar-height) - var(--toolbar-height) - var(--drawer-height));
-}
-
-@media screen and (min-width: 1024px) {
-  .navigation-menu {
-    height: calc(100vh - var(--navbar-height) - var(--drawer-height));
-  }
-}
-
-.navigation-menu:not(.is-active) {
-  display: none;
-}
-
-.navigation-menu::-webkit-scrollbar {
-  width: 0.25rem;
-}
-
-.navigation-menu::-webkit-scrollbar-thumb {
-  background-color: #c1c1c1;
-}
-
-.nav-menu {
-  flex-grow: 1;
-  min-height: 0;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  line-height: 1.35;
-  position: relative;
-}
-
-.nav-menu h3.title {
-  margin: 0;
-  font-weight: 500;
-  color: #424242;
-  font-size: 1em;
-  padding: 0.25em 0 0.125em;
-}
-
-.nav-menu a,
-.nav-menu a:visited {
-  color: inherit;
-}
-
-.nav-list {
-  margin: 0 0 0 0.8em;
-  padding: 0;
-}
-
-.nav-menu > .nav-list {
-  margin-bottom: 0.5rem;
-}
-
-.nav-item {
-  list-style: none;
-  margin-top: 0.5em;
-}
-
-/* adds some breathing room below a nested list */
-.nav-toggle ~ .nav-list {
-  padding-bottom: 0.125rem;
-}
-
-/* matches list without a title */
-.nav-item[data-depth="0"] > .nav-list:first-child {
-  display: block;
-  margin: 0;
-}
-
-.nav-item:not(.is-active) > .nav-list {
-  display: none;
-}
-
-.nav-toggle {
-  background: transparent url(../img/caret.svg) no-repeat center;
-  background-size: 55%;
-  border: none;
-  cursor: pointer;
-  outline: none;
-  position: absolute;
-  height: 1.4em; /* NOTE must match line-height of text; slightly tweaked for alignment */
-  width: 1.5em;
-  margin-left: -1.5em;
-}
-
-.nav-toggle::-moz-focus-inner {
-  border: none;
-}
-
-.nav-item.is-active > .nav-toggle {
-  transform: rotate(90deg);
-}
-
-.is-current-page > .nav-link,
-.is-current-page > .nav-text {
-  font-weight: 500;
-}

diff --git a/src/css/navigation.css b/src/css/navigation.css
deleted file mode 100644 (file)
index 550e59a..0000000
--- a/src/css/navigation.css
+++ /dev/null
@@ -1,62 +0,0 @@
-:root {
-  --drawer-height: 2.5rem;
-}
-
-.navigation-container {
-  display: none;
-  position: fixed;
-  top: var(--navbar-height);
-  left: 0;
-  width: 100%;
-  font-size: 0.9375rem;
-  z-index: 1;
-}
-
-.navigation-container.is-active {
-  display: block;
-}
-
-@media screen and (min-width: 769px) {
-  .navigation-container {
-    width: 16rem;
-    font-size: 0.875rem;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .navigation-container {
-    font-size: 0.8125rem;
-    flex: none;
-    display: block;
-    position: static;
-    top: 0;
-  }
-}
-
-.navigation {
-  background-color: #fafafa;
-  position: relative;
-  top: var(--toolbar-height);
-  height: calc(100vh - var(--navbar-height) - var(--toolbar-height));
-}
-
-@media screen and (min-width: 769px) {
-  .navigation {
-    box-shadow: 0.5px 0 3px #c1c1c1;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .navigation {
-    top: var(--navbar-height);
-    box-shadow: none;
-    position: sticky;
-    height: calc(100vh - var(--navbar-height));
-  }
-}
-
-.navigation .panels {
-  display: flex;
-  flex-direction: column;
-  height: inherit;
-}

diff --git a/src/css/page-versions.css b/src/css/page-versions.css
index 49e617b..364cdeb 100644 (file)
--- a/src/css/page-versions.css
+++ b/src/css/page-versions.css
@@ -14,7 +14,7 @@
   color: #333;
 }
 
-.page-versions .versions-menu-toggle {
+.page-versions .version-menu-toggle {
   color: inherit;
   font-family: inherit;
   font-size: inherit;
@@ -26,14 +26,14 @@
   cursor: pointer;
   padding: 0.35rem 1.5rem 0.35rem 0.5rem;
   position: relative;
-  z-index: 1;
+  z-index: var(--z-index-page-version-menu);
 }
 
-.page-versions .versions-menu-toggle::-moz-focus-inner {
+.page-versions .version-menu-toggle::-moz-focus-inner {
   border: none;
 }
 
-.page-versions .versions-menu {
+.page-versions .version-menu {
   border: 1px solid transparent;
   background-color: #f0f0f0;
   padding: 1.3rem 0.5rem 0.35rem;
@@ -43,7 +43,7 @@
   width: 100%;
 }
 
-.page-versions:not(.is-active) .versions-menu {
+.page-versions:not(.is-active) .version-menu {
   display: none;
 }
 

diff --git a/src/css/print.css b/src/css/print.css
index dbe6c65..c72840a 100644 (file)
--- a/src/css/print.css
+++ b/src/css/print.css
@@ -53,7 +53,7 @@
   }
 
   #topbar-nav,
-  .navigation-container,
+  .nav-container,
   .toolbar {
     display: none;
   }

diff --git a/src/css/site.css b/src/css/site.css
index b081e3a..07c9d93 100644 (file)
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -1,10 +1,10 @@
 @import "typeface-roboto.css";
 @import "typeface-roboto-mono.css";
+@import "vars.css";
 @import "base.css";
+@import "body.css";
+@import "nav.css";
 @import "main.css";
-@import "navigation.css";
-@import "navigation-menu.css";
-@import "navigation-explore.css";
 @import "toolbar.css";
 @import "breadcrumbs.css";
 @import "page-versions.css";

diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index 24b2411..3607518 100644 (file)
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -1,7 +1,3 @@
-:root {
-  --toolbar-height: 2.5rem;
-}
-
 .toolbar {
   color: #5d5d5d;
   align-items: center;
@@ -9,11 +5,11 @@
   box-shadow: 0 1px 0 #e1e1e1;
   display: flex;
   font-size: 0.75rem;
-  height: var(--toolbar-height);
+  height: var(--height-toolbar);
   justify-content: flex-start;
   position: sticky;
-  top: var(--navbar-height);
-  z-index: 1;
+  top: var(--height-navbar);
+  z-index: var(--z-index-toolbar);
 }
 
 .toolbar a,
@@ -21,7 +17,7 @@
   color: inherit;
 }
 
-.navigation-toggle {
+.nav-toggle {
   background: url(../img/menu.svg) no-repeat 50% 47.5%;
   background-size: 49%;
   border: none;
@@ -34,17 +30,17 @@
   margin-right: -0.25rem;
 }
 
-.navigation-toggle::-moz-focus-inner {
+.nav-toggle::-moz-focus-inner {
   border: none;
 }
 
 @media screen and (min-width: 1024px) {
-  .navigation-toggle {
+  .nav-toggle {
     display: none;
   }
 }
 
-.navigation-toggle.is-active {
+.nav-toggle.is-active {
   background-image: url(../img/back.svg);
   background-size: 41.5%;
 }

diff --git a/src/css/vars.css b/src/css/vars.css
new file mode 100644 (file)
index 0000000..7973ceb
--- /dev/null
+++ b/src/css/vars.css
@@ -0,0 +1,22 @@
+:root {
+  --color-text: #222;
+  --color-navbar-bg: #0a0a0a;
+  --color-navbar-bg-focus: #000;
+  --color-navbar-text: #fff;
+  --height-navbar: 3.25rem;
+  --height-drawer: 2.5rem;
+  --height-toolbar: 2.5rem;
+  --height-to-body: var(--height-navbar);
+  --height-min-body: calc(100vh - var(--height-to-body));
+  --height-nav: var(--height-min-body);
+  --height-nav-mobile: calc(var(--height-min-body) - var(--height-toolbar));
+  --height-nav-panel: calc(var(--height-nav) - var(--height-drawer));
+  --height-nav-panel-mobile: calc(var(--height-nav-mobile) - var(--height-drawer));
+  --width-nav: 16rem;
+  --width-doc: 54rem;
+  --width-doc-mobile: 40rem;
+  --z-index-nav: 1;
+  --z-index-toolbar: 2;
+  --z-index-page-version-menu: 3;
+  --z-index-navbar: 4;
+}

diff --git a/src/js/01-navigation.js b/src/js/01-navigation.js
index 9f6fd1f..ba25546 100644 (file)
--- a/src/js/01-navigation.js
+++ b/src/js/01-navigation.js
@@ -1,11 +1,11 @@
 ;(function () {
   'use strict'
 
-  var navContainer = document.querySelector('.navigation-container')
-  var navToggle = document.querySelector('.navigation-toggle')
+  var navContainer = document.querySelector('.nav-container')
+  var navToggle = document.querySelector('.nav-toggle')
 
   navToggle.addEventListener('click', toggleNavigation)
-  // don't let click events propagate outside of navigation container
+  // don't let click events propagate outside of nav container
   navContainer.addEventListener('click', concealEvent)
 
   var menuPanel = navContainer.querySelector('[data-panel=menu]')
@@ -21,7 +21,7 @@
     navContainer.querySelector('[data-panel=' + activatePanel + ']').classList.toggle('is-active')
   })
 
-  find('.nav-toggle', menuPanel).forEach(function (btn) {
+  find('.nav-item-toggle', menuPanel).forEach(function (btn) {
     var li = btn.parentElement
     btn.addEventListener('click', function () {
       li.classList.toggle('is-active')

diff --git a/src/js/03-page-versions.js b/src/js/03-page-versions.js
index 672bda1..d1d4c2a 100644 (file)
--- a/src/js/03-page-versions.js
+++ b/src/js/03-page-versions.js
@@ -1,7 +1,7 @@
 ;(function () {
   'use strict'
 
-  var toggle = document.querySelector('.page-versions .versions-menu-toggle')
+  var toggle = document.querySelector('.page-versions .version-menu-toggle')
   if (!toggle) return
 
   var selector = document.querySelector('.page-versions')

diff --git a/src/partials/breadcrumbs.hbs b/src/partials/breadcrumbs.hbs
new file mode 100644 (file)
index 0000000..503772e
--- /dev/null
+++ b/src/partials/breadcrumbs.hbs
@@ -0,0 +1,20 @@
+<nav class="breadcrumbs" aria-label="breadcrumbs">
+  {{#if page.breadcrumbs}}
+  <ul>
+    {{#with page.componentVersion}}
+    {{#if (and ./title (not (or ./root (eq @root.page.breadcrumbs.0.content ./title))))}}
+    <li><a href="{{{relativize @root.page.url ./url}}}">{{{./title}}}</a></li>
+    {{/if}}
+    {{/with}}
+    {{#each page.breadcrumbs}}
+    <li>
+    {{~#if (and ./url (eq ./urlType 'internal'))~}}
+    <a href="{{{relativize @root.page.url ./url}}}">{{{./content}}}</a>
+    {{~else~}}
+    {{{./content}}}
+    {{~/if~}}
+    </li>
+    {{/each}}
+  </ul>
+  {{/if}}
+</nav>

diff --git a/src/partials/crumbs.hbs b/src/partials/crumbs.hbs
deleted file mode 100644 (file)
index 0611b26..0000000
--- a/src/partials/crumbs.hbs
+++ /dev/null
@@ -1,20 +0,0 @@
-<nav class="crumbs" aria-label="breadcrumbs">
-  {{#if page.breadcrumbs}}
-  <ul>
-    {{#with page.componentVersion}}
-    {{#if (and ./title (not (or ./root (eq @root.page.breadcrumbs.0.content ./title))))}}
-    <li class="crumb"><a href="{{{relativize @root.page.url ./url}}}">{{{./title}}}</a></li>
-    {{/if}}
-    {{/with}}
-    {{#each page.breadcrumbs}}
-    <li class="crumb">
-    {{~#if (and ./url (eq ./urlType 'internal'))~}}
-    <a href="{{{relativize @root.page.url ./url}}}">{{{./content}}}</a>
-    {{~else~}}
-    {{{./content}}}
-    {{~/if~}}
-    </li>
-    {{/each}}
-  </ul>
-  {{/if}}
-</nav>

diff --git a/src/partials/nav-explore.hbs b/src/partials/nav-explore.hbs
index 7a6d7ba..b8d793b 100644 (file)
--- a/src/partials/nav-explore.hbs
+++ b/src/partials/nav-explore.hbs
@@ -1,4 +1,4 @@
-<div class="navigation-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
+<div class="nav-panel-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
   {{#if page.component}}
   <div class="context">
     <span class="title">{{page.component.title}}</span>

diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs
index e21831c..27a667d 100644 (file)
--- a/src/partials/nav-menu.hbs
+++ b/src/partials/nav-menu.hbs
@@ -1,5 +1,5 @@
 {{#if page.navigation}}
-<div class="navigation-menu is-active" data-panel="menu">
+<div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu">
     <h3 class="title"><a href="{{relativize page.url page.componentVersion.url}}">{{page.component.title}}</a></h3>
 {{> nav-tree navigation=page.navigation}}

diff --git a/src/partials/nav-toggle.hbs b/src/partials/nav-toggle.hbs
index 27be729..0f11e25 100644 (file)
--- a/src/partials/nav-toggle.hbs
+++ b/src/partials/nav-toggle.hbs
@@ -1 +1 @@
-<button class="navigation-toggle"></button>
+<button class="nav-toggle"></button>

diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs
index 6587047..837fbf8 100644 (file)
--- a/src/partials/nav-tree.hbs
+++ b/src/partials/nav-tree.hbs
@@ -4,7 +4,7 @@
   <li class="nav-item{{#if (eq @root.page.url ./url)}} is-current-page{{/if}}" data-depth="{{or ../level 0}}">
     {{#if ./content}}
     {{#if ./items.length}}
-    <button class="nav-toggle"></button>
+    <button class="nav-item-toggle"></button>
     {{/if}}
     {{#if ./url}}
     <a class="nav-link" href="

diff --git a/src/partials/nav.hbs b/src/partials/nav.hbs
index 6f29bfa..7e0f091 100644 (file)
--- a/src/partials/nav.hbs
+++ b/src/partials/nav.hbs
@@ -1,5 +1,5 @@
-<div class="navigation-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
-  <aside class="navigation">
+<div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
+  <aside class="nav">
     <div class="panels">
 {{> nav-menu}}
 {{> nav-explore}}

diff --git a/src/partials/page-versions.hbs b/src/partials/page-versions.hbs
index 51f6842..321635c 100644 (file)
--- a/src/partials/page-versions.hbs
+++ b/src/partials/page-versions.hbs
@@ -1,7 +1,7 @@
 {{#if page.versions}}
 <div class="page-versions">
-  <button class="versions-menu-toggle" title="Show other versions of page">{{page.componentVersion.displayVersion}}</button>
-  <div class="versions-menu">
+  <button class="version-menu-toggle" title="Show other versions of page">{{page.componentVersion.displayVersion}}</button>
+  <div class="version-menu">
     {{#each page.versions}}
     <a class="version
       {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}

diff --git a/src/partials/toolbar.hbs b/src/partials/toolbar.hbs
index 78a46cc..243ab80 100644 (file)
--- a/src/partials/toolbar.hbs
+++ b/src/partials/toolbar.hbs
@@ -3,7 +3,7 @@
   {{#if site.homeUrl}}
   <a href="{{relativize page.url site.homeUrl}}" class="home-link{{#if page.home}} is-current{{/if}}"></a>
   {{/if}}
-{{> crumbs}}
+{{> breadcrumbs}}
 {{> page-versions}}
   {{#if (and page.editUrl (not page.origin.private))}}
   <div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>