footer menu layout

footer styling modifications

vue-theme/src/components/footer.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-.footer-wrapper
-    footer.t-up.t-sans
+.footer-wrapper.f-col.t-up.t-sans
+    footer.f-row
         ul
             li
                 h5 Craft in America
@@ -11,26 +11,26 @@
                         li (310) 659-9022 office
                         li (323) 951-0610 center
                         li
-                            a(href="mailto:info@craftinamerica.org") info@craftinamerica.org
-        ul
+                            router-link(to="mailto:info@craftinamerica.org") info@craftinamerica.org
+        ul.f-row
             li
                 h5
-                    a(href="../episodes/") PBS Series
+                    router-link(to="/episodes") PBS Series
                     ul
                         li Episodes
                         li Shorts
                         li Techniques
             li
                 h5 
-                    a(href="../artists/") Artists
+                    router-link(to="/artists") Artists
                     ul
                         li
-                        a(href="../artists/by-alpha") A-Z
+                            router-link(to="/artists/by-alpha") A-Z
                         li 
-                        a(href="../artists/by-material") By Material
+                            router-link(to="/artists/by-material") By Material
             li
                 h5 
-                    a(href="../exhibitions/") Exhibitions
+                    router-link(to="/exhibitions/") Exhibitions
                     ul
                         li Current/Upcoming
                         li Past
@@ -38,24 +38,24 @@
                         li Explore Craft Objects
             li
                 h5
-                    a(href="../events/") Events
+                    router-link(to="/events") Events
                     ul
                         li Talks
             li
                 h5
-                    a(href="../center/") Center
+                    router-link(to="/center") Center
                     ul
                         li Publications
                         li Library
             li
                 h5
-                    a(href="../support/") Support
+                    router-link(to="/support") Support
                     ul
                         li Donate
                         li Shop
             li
                 h5
-                    a(href="../about/") About
+                    router-link(to="/about") About
                     ul
                         li Mission
                         li Staff
@@ -63,7 +63,7 @@
                         li Contact
             li
                 h5
-                    a(href="../posts/") News
+                    router-link(to="/posts") News
                     ul
                         li Blog Posts
                         li Press Releases
@@ -82,7 +82,7 @@
                             a(href="https://twitter.com/CraftinAmerica") Twitter
                         li
                             a(href="http://eepurl.com/hpwhn5") Join email list
-    .sub-footer.t-up.t-sans
+    .sub-footer
         ul
             li
                 p Craft in America &copy; 2010&ndash;2021
@@ -95,31 +95,16 @@
 <style lang="postcss">
 @import '../sss/variables.sss'
 
-.sub-footer
-    background-color: $cia_black
-    display: flex
-    justify-content: center
-    padding: 0.5em
-    font-size: 0.8em
-    ul
-        list-style: none
-        p
-            color: $cia_grey
-
 footer
     background-color: $cia_red
     color: $cia_white
     padding: 2em 2em 3em
-    display: flex
-    justify-content: center
     overflow: hidden
     flex-direction: column
     ul
         list-style: none
-        display: flex
         align-content: flex-start
         flex-direction: column
-        padding: 0
         margin: 0 0 1em
         li
             padding: 0.2em 0 0
@@ -128,4 +113,15 @@ footer
                 color: $cia_white
             a
                 color: $cia_white
+
+.sub-footer
+    width: $max-width
+    background-color: $cia_black
+    padding: 0.5em
+    font-size: 0.8em
+    ul
+        list-style: none
+        p
+            color: $cia_grey
+
 </style>