:art: custom named breakpoints | fruity footer

vue-theme/src/components/footer.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-.footer-wrapper.f-col.between.t-up.t-sans.b-radius
-    footer.main.f-row.f-wrap
+.footer-wrapper.t-up.t-sans.b-radius
+    footer.main
         //- address contact
         ul.f-col.start
             li
@@ -98,39 +98,84 @@
 @import '../sss/theme.sss'
 
 .footer-wrapper
-    background-color: lightgreen
     width: 100%
-    footer
-        background-color: $cia_red
-        align-items: flex-start
-
+    footer.main
+        display: flex
+        flex-wrap: wrap
+        min-width: $min-width
         // ALL <ul> tags
         ul
-            background-color: grey
             list-style: none
             width: 100%
-
+            > li
+                width: 100%
         // OUTER <ul> tags
         > ul
-            background-color: lightgrey
-            padding: $ms-0
+            padding: 0 $ms-0
+            &:nth-child(n+2)
+                padding: 0 $ms-0 $ms-3 $ms-0
             > li
-                padding: $ms-0 0
-                width: 100%
+                color: $primary
+                padding: $ms-0 0 0
                 h5
                     color: $cia_white
-                    margin: 0 0 $ms-0
+                    margin: $ms-0 0 $ms--1
                 a
                     color: $cia_white
                 ul
                     align-items: flex-start
+                    > li
+                        padding: 0 0 $ms--5
 
     .sub-footer
-        width: 100%
         background-color: $cia_black
-        padding: 0.5em
-        text-align: center
+        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>

vue-theme/src/sss/_helpers.sss

@@ -82,3 +82,13 @@ button
         z-index: 1
     &-back
         z-index: -1
+
+
+/* named breakpoints */
+@custom-media --tiny-viewport (min-width: 375px)
+@custom-media --small-viewport (min-width: 480px)
+@custom-media --medium-viewport (min-width: 768px)
+@custom-media --large-viewport (min-width: 960px)
+@custom-media --extra-large-viewport (min-width: 1080px)
+@custom-media --huge-viewport (min-width: 1200px)
+@custom-media --ultra-viewport (min-width: 1440px)

vue-theme/src/sss/_typography.sss

@@ -21,7 +21,7 @@
     &-mono
         font-family: $mono
 
-a~
+a
     /* text-decoration: none,  leave for now to show links underlined */
     &:hover
         cursor: pointer

vue-theme/src/sss/variables.sss

@@ -2,6 +2,7 @@
 
 $transition: 300ms
 
+$min-width: 20em
 $max-width: 70em
 
 /* Circles for add page */