Adjust footer links, responsive wrap behaviour.

vue-theme/src/components/footer.vue

@@ -54,65 +54,75 @@
             li
                 h5 
                     router-link(to="/episode") PBS Series
-                ul.f-col.start 
-                    li 
-                        router-link(to="/episode")   Episodes
-                    li 
-                        router-link(to="/short")   Shorts
-                    li 
-                        router-link(to="/technique")   Techniques
+                    ul.f-col.start 
+                        li 
+                            router-link(to="/episode")   Episodes
+                        li 
+                            router-link(to="/short")   Shorts
+                        li 
+                            router-link(to="/technique")   Techniques
             li 
                 h5
                     router-link(to="/artist") Artists
-                ul.f-col
-                    li
-                        router-link(to="/artist/sorted/by-alpha")   A-Z
-                    li
-                        router-link(to="/artist/sorted/by-material")   by Material
-
+                    ul.f-col
+                        li
+                            router-link(to="/artist/sorted/by-alpha")   A-Z
+                        li
+                            router-link(to="/artist/sorted/by-material")   by Material
             li
                 h5 
                     router-link(to="/exhibition") Exhibitions
-                ul.f-col
-                    li
-                        router-link(to="/exhibition/sorted/by-current-and-upcoming")   Current/Upcoming
-                    li
-                        router-link(to="/object")   Objects
-
+                    ul.f-col
+                        li
+                            router-link(to="/exhibition/sorted/by-current-and-upcoming")   Current/Upcoming
+                        li
+                            router-link(to="/object")   Explore Craft Objects
             li
                 h5
                     router-link(to="/page/center") Center 
-                ul.f-col
-                    li
-                        router-link(to="/page/center")   Info
-                    li
-                        router-link(to="/exhibition")   Exhibitions
-                    li 
-                        router-link(to="/event/sorted/by-current-and-upcoming")   Events 
-                    li
-                        router-link(to="/event?type=talks")   Talks & Interviews
+                    ul.f-col
+                        li
+                            router-link(to="/page/center")   Info
+                        li
+                            router-link(to="/exhibition")   Exhibitions
+                        li 
+                            router-link(to="/event/sorted/by-current-and-upcoming")   Events 
+                        li
+                            router-link(to="/event?type=talks")   Talks & Interviews
             li
                 h5
                     router-link(to="") Education 
-                ul.f-col
-                    li
-                        router-link(to="/guide")   Guides 
-                    li 
-                        router-link(to="/publication")   Publications 
-                    li 
-                        router-link(to="/page/library")   Library 
-
-
+                    ul.f-col
+                        li
+                            router-link(to="/guide")   Guides 
+                        li 
+                            router-link(to="/publication")   Publications 
+                        li 
+                            router-link(to="/page/library")   Library 
             li
                 h5
-                    router-link(to="") News
-                ul.f-col
-                    li
-                        router-link(to="/blog")   Blog Posts  
-                    li 
-                        router-link(to="/posts?type=releases")   Press Releases 
-                    li 
-                        router-link(to="/posts?type=articles")   In the News 
+                    router-link(to="") News 
+                    ul.f-col
+                        li
+                            router-link(to="/blog")   Blog Posts 
+                        li 
+                            router-link(to="/posts?type=articles")   In the News 
+                        li 
+                            router-link(to="/posts?type=releases")   Press Releases 
+                        li 
+                            router-link(to="/page/community-craft-calendar")   Community Craft Calendar  
+            li
+                h5
+                    router-link(to="/page/about") About 
+                    ul.f-col
+                        li
+                            router-link(to="/page/about")   Craft in America 
+                        li 
+                            router-link(to="/page/board")   Board of Directors 
+                        li 
+                            router-link(to="/page/staff")   Staff 
+                        li 
+                            router-link(to="/page/contact")   Contact   
 
     .sub-footer.f-col.start
         h6 Craft in America © 2010–{{ today }} 
@@ -141,11 +151,9 @@ export default {
     background-color: $cia_red
     footer.main
         display: flex
-        flex-wrap: wrap
         align-items: flex-start 
 
         min-width: $min-width
-        /* background-color: $cia_red */
         // ALL <ul> tags
         ul
             list-style: none
@@ -163,6 +171,7 @@ export default {
                 h4
                     margin: $ms-0 0 $ms--3
                 h5 
+                    font-size: 0.85em 
                     /* margin: $ms-0 0 $ms--1 */
                     margin: $ms-0 0 0
                 a, a:link, a:visited
@@ -170,7 +179,6 @@ export default {
                     text-decoration: none
                 a:hover
                     color: $light
-                    /* background: $light */
                     /* Hovered links */
                 a:active
                     color: $cia_red2
@@ -194,43 +202,43 @@ export default {
     /* 768px */
     @media (min-width: $medium)
         footer.main > ul
+            flex-wrap: wrap
             /* background-color: darkgreen */
             background-color: $cia_red
             &:nth-child(n+2)
                 align-items: flex-start
                 flex-direction: row
-                flex-wrap: wrap
                 > li
                     width: 32%
+                    h5 
+                        font-size: 0.95em 
     /* 960px */
     @media (min-width: $large)
         footer.main > ul
+            flex-wrap: wrap
             /* background-color: purple */
             background-color: $cia_red
             &:nth-child(n+2)
                 > li
-                    width: 33%
+                    /* width: 33% */
     /* 1080px */
     @media (min-width: $extra-large)
         footer.main > ul
+            flex-wrap: wrap
             /* background-color: rebeccapurple */
             background-color: $cia_red
             &:nth-child(n+2)
                 /* margin: 0 0 $ms-2 0 */
                 > li
-                    width: 43%
+                    /* width: 43% */
     /* 1200px */
     @media (min-width: $huge)
         footer.main 
             max-width: $max-width
             margin: 0 auto
             > ul
+                flex-wrap: wrap
                 /* background-color: orange */
                 background-color: $cia_red
-    /* 1440px */
-    @media (min-width: $ultra)
-        footer.main 
-            > ul
-                /* background-color: teal */
-                background-color: $cia_red
+
 </style>