rework media breakpoints

src/components/AllRequestedWines.vue

@@ -46,7 +46,7 @@ export default {
   grid-gap: 1.5rem;
   justify-items: center;
 
-  @media #{$mobileOnly}{
+  @include mobile {
     display: flex;
     justify-content: space-around;
     flex-flow: row wrap;
@@ -54,18 +54,18 @@ export default {
     margin: 2rem;
   }
 
-  @media #{$tabletOnly}{
+  @include tablet {
     margin: 1em;
     grid: 1fr / 1fr 1fr;
     justify-items: center;
   }
 
-  @media #{$desktopOnly}{
+  @include desktop {
     margin: 1em;
     grid: 1fr / repeat(4, 1fr);
   }
 
-  @media #{$widescreenAndUp}{
+  @include widescreen {
     width: 80%;
     margin: auto;
     grid: 1fr / repeat(5, 1fr);

src/components/RequestWine.vue

@@ -130,7 +130,7 @@ input[type="text"] {
   display: grid;
   grid: 1fr / 1fr .2fr;
 
-  @media #{$mobileOnly}{
+  @include mobile{
     .vin-button{
       display: none;
     }
@@ -152,7 +152,7 @@ input[type="text"] {
   margin-bottom: 1em;
   box-shadow: 0 1px 0 0 rgba(0,0,0,0.2);
 
-  @media #{$mobileOnly}{
+  @include mobile{
 
     grid: 1fr .5fr / .5fr 1fr;
     grid-template-areas: "picture details"
@@ -221,13 +221,13 @@ input[type="text"] {
     grid-area: button2;
   }
   
-  @media #{$tabletOnly}{
+  @include tablet{
     h2{
       font-size: 1.2em;
     }
   }
   
-  @media #{$desktopAndUp}{
+  @include desktop{
     h2{
       font-size: 1.6em;
     }

src/styles/media-queries.scss

@@ -1,15 +1,7 @@
-$phone-xs-width: 480px;
-$tablet-p-width: 768px;
-$tablet-l-width: 1024px;
-$desktop-width:  1200px;
-$desktop-l-width: 1600px;
 $mobile-width: 768px;
+$tablet-max: 1200px;
+$desktop-max: 1704;
 
-@mixin desktop {
-  @media (min-width: #{$mobile-width + 1px}) {
-    @content;
-  }
-}
 
 @mixin mobile {
   @media (max-width: #{$mobile-width}) {
@@ -17,23 +9,21 @@ $mobile-width: 768px;
   }
 }
 
-$sm: 320;
-$md: 756;
-$lg: 1200;
-$xl: 1704;
+@mixin tablet {
+  @media (min-width: #{$mobile-width + 1px}) {
+    @content;
+  }
+}
 
-$minMobileWidth: $sm + 0px;
-$maxMobileWidth: $md - 1px;
-$minTabletWidth: $md + 0px;
-$maxTabletWidth: $lg - 1px;
-$minDesktopWidth: $lg + 0px;
-$maxDesktopWidth: $xl - 1px;
-$minWidescreenWidth: $xl + 0px;
 
-$mobileOnly: "only screen and ( max-width: #{$maxMobileWidth} )";
-$tabletOnly: "only screen and( min-width: #{$minTabletWidth} ) and ( max-width: #{$maxTabletWidth} )";
-$desktopOnly: "only screen and ( min-width: #{$minDesktopWidth} ) and ( max-width: #{$maxDesktopWidth} )";
-$widescreenOnly: "only screen and ( min-width: #{$minWidescreenWidth} )";
-$tabletAndUp: "only screen and ( min-width: #{$minTabletWidth} )";
-$desktopAndUp: "only screen and ( min-width: #{$minDesktopWidth} )";
-$widescreenAndUp: "only screen and ( min-width: #{$minWidescreenWidth} )";
+@mixin desktop {
+  @media (min-width: #{$tablet-max + 1px}) {
+    @content;
+  }
+}
+
+@mixin widescreen {
+  @media (min-width: #{$desktop-max + 1px}){
+    @content;
+  }
+}