:art: nav styling simplification

vue-theme/src/app.vue

@@ -30,7 +30,7 @@ html
         display: none !important
     > body
         font-family: $sans
-        font-size: $base
+        font-size: $ms-0
         main 
             background-color: green
             width: 100%
@@ -38,10 +38,14 @@ html
             
             :--headings, a
                 color: $cia_red
+            
+            a:hover
+                color: $dark
+
             img
                 transition: $transition ease-in
                 &:hover
-                    filter: grayscale(100%) brightness(85%)
+                    filter: grayscale(70%) brightness(85%)
                     cursor: pointer
 
             > [class^="page--"]
@@ -81,5 +85,4 @@ html
         nav, footer
             &.main
                 background-color: pink
-                width: 100%
 </style>

vue-theme/src/components/footer.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .footer-wrapper.t-up.t-sans
-    footer.main
+    footer.main.w-max
         //- address contact
         ul.f-col.start.b-dot.b-radius
             li.b-dot.b-radius

vue-theme/src/components/navigation/navigation.vue

@@ -1,14 +1,13 @@
 // Replace with calls to menu system
 <template lang="pug">
-nav.main
-
+nav.main.w-max
     .menu
-        ul.f-row
+        ul.f-row.w-max
             li.f-row.start
                 router-link(to="/")
                     img(src="../../star.svg")
                 router-link(to="/")
-                    h1.t-serif.t-up &nbsp;logotype
+                    h1.t-serif.t-up craft in america
             li.f-grow
             li(v-for="item in menuItems")
                 router-link(:to="`/${item}`")
@@ -19,12 +18,12 @@ nav.main
             router-link(to="/")
                 img(src="../../star.svg")
             router-link(to="/")
-                h1.t-serif.t-up &nbsp;logotype
+                h1.t-serif.t-up craft in america
         
         label(for="toggle-mobile-menu" aria-label="Menu").drop-down &#9776;
         input(id="toggle-mobile-menu" type="checkbox").hide
 
-        ul.drop-down
+        ul.drop-down.w-max
             li(v-for="item in menuItems")
                 router-link(:to="`/${item}`")
                     h5.t-up {{ item }}
@@ -48,10 +47,11 @@ export default {
                 'center',
                 'education',
                 'support',
-                'search'
+                '🔍'
             ]
             const ignored = [
                 'pages',
+                'sticky',
                 // 'posts',
             ]
             const filtered = postTypes.filter(val => !ignored.includes(val))
@@ -75,17 +75,13 @@ nav.main
     word-wrap: break-word
     z-index: 10000
     
-    h5
-        margin: 0
-    
     .menu, .mobile-menu
         padding: $ms-0 0
         a
-            margin: 0
+            text-decoration: none
             h1
-                font-size: $ms-1
+                font-size: $ms-0
                 color: $cia_red
-                margin: 0
             img
                 width: $ms-3
                 height: $ms-3
@@ -94,7 +90,7 @@ nav.main
     .menu
         display: none
         > ul
-            width: 100%
+            padding: 0 $ms-1
     
     .mobile-menu
         img 
@@ -117,7 +113,6 @@ nav.main
                     clear: both 
                     position: absolute
         ul
-            width: 100%
             background-color: $primary-dark
             display: none
             padding: $ms--1 0

vue-theme/src/sss/_helpers.sss

@@ -4,8 +4,6 @@
 /* Custom selectors */
 @custom-selector :--headings h1, h2, h3, h4, h5, h6
 
-@custom-media --viewport-medium (width <= 50rem)
-
 %flexer
     display: flex
     justify-content: center

vue-theme/src/sss/_typography.sss

@@ -31,27 +31,15 @@ h1, h2, h3, h4, h5, h6 /* common */
     margin-left: 0
     margin-right: 0
 h1
-    font-size: 2em
-    /* margin-top: 0.6em */
-    margin-bottom: 0.6em
+    font-size: $ms-4
 h2
-    font-size: 1.5em
-    /* margin-top: 0.8em */
-    margin-bottom: 0.8em
+    font-size: $ms-3
 h3
-    font-size: 1.17em
-    /* margin-top: 1em */
-    margin-bottom: 1em
+    font-size: $ms-2
 h4
-    font-size: 1em
-    /* margin-top: 1.33em */
-    margin-bottom: 1.33em
+    font-size: $ms-1
 h5
-    font-size: .8em
-    /* margin-top: 1.6em */
-    margin-bottom: 1.6em
+    font-size: $ms-0
 h6
-    font-size: .67em
-    /* margin-top: 2em */
-    margin-bottom: 2em
+    font-size: $ms--1