css: properly align the navbar with contents.

Was narrower by 0.25rem from each side. Also simplified the markup a
bit.

diff --git a/css/m-components.css b/css/m-components.css
index 51a30f41ca4e285fa5c3a41e772a806705c94d3a..4f5e1faf30dec604b66cbff8c8d39f65f78594d6 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -94,58 +94,55 @@ code {
 /* Header navigation */
 body > header {
   width: 100%;
+  background-color: var(--header-background-color);
 }
 body > header > nav {
   margin-left: auto;
   margin-right: auto;
   color: var(--header-color);
 }
-body > header {
-  background-color: var(--header-background-color);
-}
 body > header > nav a {
   text-decoration: var(--link-decoration-nav);
   text-transform: var(--nav-menu-case);
   line-height: 1.5rem;
   display: inline-block;
   vertical-align: middle;
-  margin-left: -0.5rem;
-  padding-left: 0.5rem;
-  border-style: solid;
-  border-color: transparent;
-  border-width: 0 0 0 0.25rem;
   color: var(--header-link-color);
 }
-body > header > nav a#m-navbar-brand {
+body > header > nav a#m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
   text-transform: var(--nav-brand-case);
+  font-weight: var(--heading-font-weight);
   font-size: 1.125rem;
+  line-height: 3rem;
 }
 body > header > nav #m-navbar-collapse {
   padding-bottom: 1rem;
 }
-body > header > nav a#m-navbar-current {
-  color: var(--header-link-current-color);
-  border-color: var(--header-link-current-color);
-}
-body > header > nav li {
+body > header > nav #m-navbar-collapse li {
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 0 0.25rem;
-  margin-left: -0.5rem;
+  margin-left: -1rem;
 }
-body > header > nav li a {
-  margin: 0 0 0 -0.25rem;
+body > header > nav #m-navbar-collapse li a {
+  border-style: solid;
+  border-color: transparent;
+  margin-left: -0.25rem;
+  padding-left: 0.75rem;
+  border-width: 0 0 0 0.25rem;
   width: 100%;
 }
-body > header > nav a#m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
-  line-height: 3rem;
-  font-weight: var(--heading-font-weight);
+body > header > nav #m-navbar-collapse li a#m-navbar-current {
+  color: var(--header-link-current-color);
+  border-color: var(--header-link-current-color);
 }
 body > header > nav ol {
   list-style-type: none;
-  padding-left: 1rem;
   margin: 0;
 }
+body > header > nav ol ol {
+  padding-left: 1.5rem;
+}
 body > header > nav [class*='m-col-'] {
   padding-top: 0;
   padding-bottom: 0;
@@ -153,10 +150,12 @@ body > header > nav [class*='m-col-'] {
 body > header > nav a:hover, body > header > nav a:focus, body > header > nav a:active {
   color: var(--header-link-active-color);
 }
-body > header > nav li:hover {
+body > header > nav #m-navbar-collapse li:hover {
   border-color: var(--header-link-active-color);
 }
-body > header > nav li a:hover, body > header > nav li a:focus, body > header > nav li a:active {
+body > header > nav #m-navbar-collapse li a:hover,
+body > header > nav #m-navbar-collapse li a:focus,
+body > header > nav #m-navbar-collapse li a:active {
   border-color: var(--header-link-active-color);
   background-color: var(--header-link-active-background-color);
 }
@@ -181,9 +180,6 @@ body > header > nav:target #m-navbar-hide {
   body > header > nav:target #m-navbar-show, body > header > nav:target #m-navbar-hide {
     display: none;
   }
-  body > header > nav #m-navbar-collapse {
-    padding-bottom: 0;
-  }
   body > header > nav a {
     line-height: 3rem;
     margin-left: 0;
@@ -191,15 +187,18 @@ body > header > nav:target #m-navbar-hide {
     padding-right: 1rem;
     white-space: nowrap;
   }
-  body > header > nav li ol {
+  body > header > nav #m-navbar-collapse {
+    padding-bottom: 0;
+  }
+  body > header > nav #m-navbar-collapse li ol {
     background-color: var(--header-background-color);
   }
-  body > header > nav ol ol li {
+  body > header > nav #m-navbar-collapse ol ol li {
     margin-left: 0;
     padding-left: 0;
     border-left-width: 0;
   }
-  body > header > nav ol ol li a {
+  body > header > nav #m-navbar-collapse ol ol li a {
     margin-left: 0;
     padding-left: 0.75rem;
   }