vue-wp/vue-theme/src/components/footer.vue

<template lang="pug">
.footer-wrapper.t-up.t-sans
    footer.main
        //- address contact
        ul.f-col.start.b-dot.b-radius
            li.b-dot.b-radius
                h5 Craft in America
                ul.b-dot.b-radius
                    li 8415 W. Third St.
                    li Los Angeles, CA 90048
                    li Tues–Sat, 12PM–6PM
                    li (310) 659-9022 office
                    li (323) 951-0610 center
                    li
                        router-link(to="mailto:info@craftinamerica.org") info@craftinamerica.org
            li.b-dot.b-radius
                h5 Connect with Us
                ul.f-row.b-dot.b-radius
                    li
                        a(href="https://www.facebook.com/CraftinAmerica") FB<br>
                            img(src="../star.svg") 
                    li
                        a(href="http://www.youtube.com/user/craftinamerica") YT<br>
                            img(src="../star.svg") 
                    li
                        a(href="http://www.instagram.com/craftinamerica") IG<br>
                            img(src="../star.svg") 
                    li
                        a(href="https://twitter.com/CraftinAmerica") TT<br>
                            img(src="../star.svg") 
            li.b-dot.b-radius
                h5
                    a(href="") Join email list
                            
        //- menu links
        ul.f-col.start.b-dot.b-radius
            li.b-dot.b-radius
                h5
                    router-link(to="/episodes") PBS Series
                ul.f-col.start
                    li Episodes
                    li Shorts
                    li 
                h5
                    router-link(to="/artists") Artists
                ul.f-col.start
                    li
                        router-link(to="/artists/by-alpha") A-Z
                    li 
                        router-link(to="/artists/by-material") By Material
            li.b-dot.b-radius
                h5 
                    router-link(to="/exhibitions") Exhibitions
                ul.f-col.start
                    li Current/Upcoming
                    li Past
                    li Permanent Collection
                    li Explore Craft Objects
            li.b-dot.b-radius
                h5
                    router-link(to="/events") Events
                ul.f-col.start
                    li Talks
            li.b-dot.b-radius
                h5
                    router-link(to="/center") Center
                ul.f-col.start
                    li Publications
                    li Library
            li.b-dot.b-radius
                h5
                    router-link(to="/support") Support
                ul.f-col.start
                    li Donate
                    li Shop
            li.b-dot.b-radius
                h5
                    router-link(to="/about") About
                ul.f-col.start
                    li Mission
                    li Staff
                    li Board
                    li Contact
            li.b-dot.b-radius
                h5
                    router-link(to="/posts") News
                ul.f-col.start
                    li Blog Posts
                    li Press Releases
                    li In the News

    .sub-footer.f-col.start
        p Craft in America &copy; 2010&ndash;2021

</template>

<script>
</script>

<style lang="postcss">
@import '../sss/variables.sss'
@import '../sss/theme.sss'

.footer-wrapper
    width: 100%
    footer.main
        display: flex
        flex-wrap: wrap
        min-width: $min-width
        // ALL <ul> tags
        ul
            list-style: none
            width: 100%
            > li
                width: 100%
        // OUTER <ul> tags
        > ul
            padding: 0 $ms-0
            &:nth-child(n+2)
                padding: 0 $ms-0 $ms-3 $ms-0
            > li
                color: $dark
                padding: $ms-0 0 0
                h5
                    color: $cia_white
                    margin: $ms-0 0 $ms--1
                a
                    color: $cia_white
                ul
                    align-items: flex-start
                    > li
                        padding: 0 0 $ms--5
                img
                    width: $ms-2
                    height: $ms-2
                    padding: 0

    .sub-footer
        background-color: $cia_black
        padding: $ms-0
        p
            font-size: 0.8em
            color: $cia_grey

@media (--medium-viewport)
    .footer-wrapper footer.main > ul
        background-color: darkgreen
        &:nth-child(n+2)
            align-items: flex-start
            flex-direction: row
            flex-wrap: wrap
            > li
                width: 50%

@media (--large-viewport)
    .footer-wrapper footer.main > ul
        background-color: purple
        &:nth-child(n+2)
            align-items: flex-start
            flex-direction: row
            flex-wrap: wrap
            > li
                width: 33%

@media (--extra-large-viewport)
    .footer-wrapper footer.main > ul
        background-color: rebeccapurple
        &:nth-child(n+2)
            align-items: flex-start
            flex-direction: row
            flex-wrap: wrap
            margin: 0 0 $ms-2 0
            > li
                width: 25%

@media (--huge-viewport)
    .footer-wrapper footer.main 
        max-width: $max-width
        margin: 0 auto
        > ul
            background-color: orange

@media (--ultra-viewport)
    .footer-wrapper footer.main 
        > ul
            background-color: teal
</style>