:art: redoing break-points with different technique

vue-theme/src/components/footer.vue

@@ -142,7 +142,7 @@
             font-size: 0.8em
             color: $cia_grey
 
-    @media (--medium-viewport)
+    @media (min-width: $medium)
         footer.main > ul
             background-color: darkgreen
             &:nth-child(n+2)
@@ -152,14 +152,14 @@
                 > li
                     width: 50%
 
-    @media (--large-viewport)
+    @media (min-width: $large)
         footer.main > ul
             background-color: purple
             &:nth-child(n+2)
                 > li
                     width: 33%
 
-    @media (--extra-large-viewport)
+    @media (min-width: $extra-large)
         footer.main > ul
             background-color: rebeccapurple
             &:nth-child(n+2)
@@ -167,14 +167,14 @@
                 > li
                     width: 25%
 
-    @media (--huge-viewport)
+    @media (min-width: $huge)
         footer.main 
             max-width: $max-width
             margin: 0 auto
             > ul
                 background-color: orange
 
-    @media (--ultra-viewport)
+    @media (min-width: $ultra)
         footer.main 
             > ul
                 background-color: teal

vue-theme/src/components/navigation/navigation.vue

@@ -134,15 +134,14 @@ nav.main
                     color: $cia_black
                     padding: $ms--1
 
-    /* large works not medium*/
-    @media (--large-viewport)
+    @media (min-width: $large)
         .menu
             display: flex
             justify-content: center
         .mobile-menu
             display: none
 
-    @media (--extra-large-viewport)
+    @media (min-width:  $extra-large)
         .menu > ul
             max-width: $max-width
 </style>

vue-theme/src/sss/_helpers.sss

@@ -84,12 +84,3 @@ button
     &-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/variables.sss

@@ -33,4 +33,13 @@ $ms-9: calc($ms-8 * $ratio)
 /* Fonts */
 $sans: 'Questrial', sans-serif
 $serif: 'Hoefler Text', 'Crimson Text', serif
-$mono: 'Roboto Mono', monospace
+$mono: 'Roboto Mono', monospace
+
+/* Screen Breaks */
+$tiny: 375px
+$small: 480px
+$medium: 768px
+$large: 960px
+$extra-large: 1080px
+$huge: 1200px
+$ultra: 1440px