adjust styling - set colours to cia

vue-theme/src/components/footer.vue

@@ -17,17 +17,25 @@
                 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") 
+                        h2.t-cntr
+                            a(href="https://www.facebook.com/CraftinAmerica") FB<br>
+                                img(src="../star.svg")
+                                //- replace with respective icon 
                     li
-                        a(href="http://www.youtube.com/user/craftinamerica") YT<br>
-                            img(src="../star.svg") 
+                        h2.t-cntr
+                            a(href="http://www.youtube.com/user/craftinamerica") YT<br>
+                                img(src="../star.svg")
+                                //- replace with respective icon 
                     li
-                        a(href="http://www.instagram.com/craftinamerica") IG<br>
-                            img(src="../star.svg") 
+                        h2.t-cntr
+                            a(href="http://www.instagram.com/craftinamerica") IG<br>
+                                img(src="../star.svg")
+                                //- replace with respective icon 
                     li
-                        a(href="https://twitter.com/CraftinAmerica") TT<br>
-                            img(src="../star.svg") 
+                        h2.t-cntr
+                            a(href="https://twitter.com/CraftinAmerica") TT<br>
+                                img(src="../star.svg")
+                                //- replace with respective icon 
             li.b-dot.b-radius
                 h5
                     a(href="") Join email list
@@ -88,9 +96,9 @@
                     li Blog Posts
                     li Press Releases
                     li In the News
-
     .sub-footer.f-col.start
-        p Craft in America &copy; 2010&ndash;2021
+        h5 Craft in America &copy; 2010&ndash;2021
+        //- actually the bottom of the page
 
 </template>
 
@@ -103,10 +111,12 @@
 
 .footer-wrapper
     width: 100%
+    background-color: $cia_red
     footer.main
         display: flex
         flex-wrap: wrap
         min-width: $min-width
+        /* background-color: $cia_red */
         // ALL <ul> tags
         ul
             list-style: none
@@ -119,32 +129,42 @@
             &:nth-child(n+2)
                 padding: 0 $ms-0 $ms-3 $ms-0
             > li
-                color: $dark
+                color: $cia_white
                 padding: $ms-0 0 0
                 h5
                     color: $cia_white
                     margin: $ms-0 0 $ms--1
-                a
+                a, a:link, a:visited
                     color: $cia_white
+                    text-decoration: none
+                a:hover
+                    color: $light
+                    /* background: $light */
+                    /* Hovered links */
+                a:active
+                    color: $cia_red2
+                    /* Activated links */
+
                 ul
                     align-items: flex-start
                     > li
                         padding: 0 0 $ms--5
                 img
-                    width: $ms-2
-                    height: $ms-2
+                    width: $ms-0
+                    height: $ms-0
                     padding: 0
 
     .sub-footer
-        background-color: $cia_black
-        padding: $ms-0
-        p
-            font-size: 0.8em
+        background-color: #820000
+        padding: $ms--4
+        h5
+            font-size: $ms--2
             color: $cia_grey
 
     @media (min-width: $medium)
         footer.main > ul
-            background-color: darkgreen
+            /* background-color: darkgreen */
+            background-color: $cia_red
             &:nth-child(n+2)
                 align-items: flex-start
                 flex-direction: row
@@ -154,14 +174,16 @@
 
     @media (min-width: $large)
         footer.main > ul
-            background-color: purple
+            /* background-color: purple */
+            background-color: $cia_red
             &:nth-child(n+2)
                 > li
                     width: 33%
 
     @media (min-width: $extra-large)
         footer.main > ul
-            background-color: rebeccapurple
+            /* background-color: rebeccapurple */
+            background-color: $cia_red
             &:nth-child(n+2)
                 margin: 0 0 $ms-2 0
                 > li
@@ -172,10 +194,12 @@
             max-width: $max-width
             margin: 0 auto
             > ul
-                background-color: orange
+                /* background-color: orange */
+                background-color: $cia_red
 
     @media (min-width: $ultra)
         footer.main 
             > ul
-                background-color: teal
+                /* background-color: teal */
+                background-color: $cia_red
 </style>