Replace sass media query mixins with custom media queries

JoelCDL · JoelCDL · commit eb2c4b0aa372 · 2023-01-03T15:04:49.000-08:00
diff --git a/package.json b/package.json
@@ -72,6 +72,11 @@
   "browserslist": [
     "defaults"
   ],
+  "@parcel/transformer-css": {
+    "drafts": {
+      "customMedia": true
+    }
+  },
   "parcel-namer-custom": {
     "scss/.*": "css/[name].css"
   },
diff --git a/scss/_avatar.scss b/scss/_avatar.scss
@@ -6,7 +6,7 @@
   float: right;
   border: 1px solid rgb(var(--color-black));
 
-  @include screen1 {
+  @media (--min-width1) {
     margin-right: 3vw;
     margin-left: 3vw;
   }
diff --git a/scss/_body.scss b/scss/_body.scss
@@ -7,7 +7,7 @@ body {
   font-weight: 400;
   line-height: var(--line-height0);
 
-  @include screen1 {
+  @media (--min-width1) {
     max-width: 1400px;
     padding-inline: var(--space2);
   }
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
@@ -19,7 +19,7 @@
     &:not(:nth-last-of-type(2)) {
       display: none;
 
-      @include screen1 {
+      @media (--min-width1) {
         display: inline-flex;
       }
 
@@ -37,15 +37,15 @@
         mask: url('data-url:../icons/angle-left-light.svg') center / contain;
       }
 
-      @include screen1 {
+      @media (--min-width1) {
 
         &::before {
           content: none;
         }
       }
     }
 
-    @include screen1 {
+    @media (--min-width1) {
 
       &:not(:last-child) {
 
diff --git a/scss/_breakpoints.scss b/scss/_breakpoints.scss
diff --git a/scss/_categories.scss b/scss/_categories.scss
@@ -5,12 +5,12 @@
 .c-categories {
   @include u-reset-list-styles;
 
-  @include screen1 {
+  @media (--min-width1) {
     column-gap: var(--space3);
     column-count: 2;
   }
 
-  @include screen2 {
+  @media (--min-width2) {
     column-count: auto;
   }
 
diff --git a/scss/_checkbox.scss b/scss/_checkbox.scss
@@ -6,7 +6,7 @@
   p { // WP Contact Form 7 generated
     margin: 0;
 
-    @include screen1 {
+    @media (--min-width1) {
       column-count: 2;
     }
 
diff --git a/scss/_footer.scss b/scss/_footer.scss
@@ -56,12 +56,12 @@
 
   > ul {
 
-    @include screen1 {
+    @media (--min-width1) {
       column-gap: var(--space2);
       column-count: 4;
     }
 
-    @include screen2 {
+    @media (--min-width2) {
       display: flex;
       column-count: auto;
     }
@@ -70,7 +70,7 @@
       break-inside: avoid;
       page-break-inside: avoid; // Firefox
 
-      @include screen2 {
+      @media (--min-width2) {
         width: 100%;
 
         &:not(:last-child) {
diff --git a/scss/_halfboxes.scss b/scss/_halfboxes.scss
@@ -4,7 +4,7 @@
   margin-top: var(--space3);
   margin-bottom: var(--space3);
 
-  @include screen1 {
+  @media (--min-width1) {
     display: flex;
 
     > * {
diff --git a/scss/_header.scss b/scss/_header.scss
@@ -12,7 +12,7 @@ $header-logo-height: 50px;
     / 1fr auto;
   margin-top: var(--space1);
 
-  @include screen2 {
+  @media (--min-width2) {
     grid-template:
       'header-logo header-util-nav'
       'header-logo header-search'
@@ -32,7 +32,7 @@ $header-logo-height: 50px;
   grid-area: header-logo;
   margin-bottom: var(--space2);
 
-  @include screen2 {
+  @media (--min-width2) {
     // stack over spanned grid-column in .c-header__search:
     z-index: 2;
   }
@@ -41,7 +41,7 @@ $header-logo-height: 50px;
     display: block;
     height: $header-logo-height;
 
-    @include screen2 {
+    @media (--min-width2) {
       height: 4.4rem;
     }
 
@@ -52,7 +52,7 @@ $header-logo-height: 50px;
 .c-header__controls {
   grid-area: header-controls;
 
-  @include screen2 {
+  @media (--min-width2) {
     display: none;
   }
 }
@@ -76,11 +76,11 @@ $header-logo-height: 50px;
     transform: translateX(0);
   }
 
-  @include screen1 {
+  @media (--min-width1) {
     padding-left: var(--space2);
   }
 
-  @include screen2 {
+  @media (--min-width2) {
     position: static;
     grid-column: 1 / 3;
     align-items: center;
@@ -92,7 +92,7 @@ $header-logo-height: 50px;
   .c-search {
     flex: 1 0 auto;
 
-    @include screen2 {
+    @media (--min-width2) {
       flex: 0 1 auto;
       width: 18rem;
     }
@@ -104,7 +104,7 @@ $header-logo-height: 50px;
 .c-header__close-search {
   margin-left: var(--space1);
 
-  @include screen2 {
+  @media (--min-width2) {
     display: none;
   }
 }
@@ -129,7 +129,7 @@ $header-logo-height: 50px;
 .c-header__utility-nav {
   grid-area: header-util-nav;
 
-  @include screen2 {
+  @media (--min-width2) {
     margin-top: 0;
   }
 
diff --git a/scss/_headernav.scss b/scss/_headernav.scss
@@ -19,7 +19,7 @@
   // Sections:
   > ul {
 
-    @include screen2 {
+    @media (--min-width2) {
       display: flex;
 
       > li {
@@ -32,7 +32,7 @@
 
   > ul > li {
 
-    @include screen2 {
+    @media (--min-width2) {
 
       // Nav bar main items:
       &:not(:last-child) {
@@ -46,7 +46,7 @@
   // Nav bar links:
   > ul > li > a {
 
-    @include screen2 {
+    @media (--min-width2) {
       padding: var(--space1);
       background: linear-gradient(rgb(var(--color-light-gray)), rgb(var(--color-gray)));
       color: rgb(var(--color-light-black));
@@ -135,7 +135,7 @@
 
   @mixin panel-toggle {
 
-    @include screen2 {
+    @media (--min-width2) {
       display: block;
       z-index: 10;
     }
diff --git a/scss/_home.scss b/scss/_home.scss
@@ -16,7 +16,7 @@
     'footer'
     / 1fr;
   
-  @include screen1 {
+  @media (--min-width1) {
     grid-gap: var(--space2);
     grid-template:
     'header header'
@@ -30,7 +30,7 @@
     / 1fr 1fr;
   }
 
-  @include screen2 {
+  @media (--min-width2) {
     grid-template:
     'header header'
     'slideshow quicklink1'
diff --git a/scss/_layout2.scss b/scss/_layout2.scss
@@ -13,7 +13,7 @@
     / 1fr;
   min-height: 100vh;
 
-  @include screen2 {
+  @media (--min-width2) {
     grid-gap: var(--space3);
     grid-template:
       'layout2a layout2a'
diff --git a/scss/_layout3.scss b/scss/_layout3.scss
@@ -16,7 +16,7 @@
     / 1fr;
   min-height: 100vh;
 
-  @media (min-width: $screen2) and (max-width: $screen3) {
+  @media (--min-width2) and (--max-width3) {
     grid-template:
     'layout3a layout3a'
     '........ layout3b'
@@ -27,7 +27,7 @@
     / var(--sidebar-width) 1fr;
   }
 
-  @include screen3 {
+  @media (--min-width3) {
     grid-template:
     'layout3a layout3a layout3a'
     '........ layout3b ........'
@@ -81,14 +81,14 @@
       'sidebar-item4'
       / 1fr;
 
-    @include screen2 {
+    @media (--min-width2) {
       grid-template:
         'sidebar-item1 sidebar-item2'
         'sidebar-item3 sidebar-item4'
         / 1fr 1fr;
     }
 
-    @include screen3 {
+    @media (--min-width3) {
       grid-template:
         'sidebar-item1'
         'sidebar-item2'
diff --git a/scss/_layout4.scss b/scss/_layout4.scss
@@ -13,7 +13,7 @@
     / 1fr;
   min-height: 100vh;
 
-  @include screen2 {
+  @media (--min-width2) {
     grid-gap: var(--space3);
     grid-template:
       'layout4a layout4a'
@@ -64,14 +64,14 @@
       'sidebar-item4'
       / 1fr;
 
-    @include screen1 {
+    @media (--min-width1) {
       grid-template:
         'sidebar-item1 sidebar-item2'
         'sidebar-item3 sidebar-item4'
         / 1fr 1fr;
     }
 
-    @include screen2 {
+    @media (--min-width2) {
       grid-template:
         'sidebar-item1'
         'sidebar-item2'
diff --git a/scss/_mobilenav.scss b/scss/_mobilenav.scss
@@ -3,7 +3,7 @@
 .c-mobilenav {
   @include u-reset-list-styles;
 
-  @media (max-width: $screen2) {
+  @media (--max-width2) {
 
     li {
       border-right: 1px solid rgb(var(--color-gray));
diff --git a/scss/_newsreel.scss b/scss/_newsreel.scss
@@ -7,7 +7,7 @@
   padding: var(--space2);
   border: 1px solid rgb(var(--color-blue));
 
-  @include screen1 {
+  @media (--min-width1) {
     flex-direction: row;
     align-items: center;
   }
@@ -17,7 +17,7 @@
     &:not(:last-child) {
       margin-bottom: var(--space2);
 
-      @include screen1 {
+      @media (--min-width1) {
         margin-right: var(--space3);
         margin-bottom: 0;
       }
diff --git a/scss/_servicebox.scss b/scss/_servicebox.scss
@@ -4,7 +4,7 @@
 
 .c-servicebox {
 
-  @include screen1 {
+  @media (--min-width1) {
     display: flex;
     flex-wrap: wrap;
   }
@@ -13,7 +13,7 @@
     padding: var(--space2);
     background-image: linear-gradient(rgb(var(--color-lighter-blue)), rgb(var(--color-light-blue)));
 
-    @include screen1 {
+    @media (--min-width1) {
       flex: 1 1 45%;
 
       &:nth-child(odd) {
@@ -22,7 +22,7 @@
 
     }
 
-    @include screen2 {
+    @media (--min-width2) {
       flex: 1 1 20%;
 
       &:not(:last-child) {
diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
diff --git a/scss/_utilitynav.scss b/scss/_utilitynav.scss
diff --git a/scss/_variables.scss b/scss/_variables.scss
diff --git a/scss/main.scss b/scss/main.scss

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`float: right;`
`7`	`7`	`border: 1px solid rgb(var(--color-black));`
`8`	`8`
`9`		`- @include screen1 {`
	`9`	`+ @media (--min-width1) {`
`10`	`10`	`margin-right: 3vw;`
`11`	`11`	`margin-left: 3vw;`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ body {`
`7`	`7`	`font-weight: 400;`
`8`	`8`	`line-height: var(--line-height0);`
`9`	`9`
`10`		`- @include screen1 {`
	`10`	`+ @media (--min-width1) {`
`11`	`11`	`max-width: 1400px;`
`12`	`12`	`padding-inline: var(--space2);`
`13`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`&:not(:nth-last-of-type(2)) {`
`20`	`20`	`display: none;`
`21`	`21`
`22`		`- @include screen1 {`
	`22`	`+ @media (--min-width1) {`
`23`	`23`	`display: inline-flex;`
`24`	`24`	`}`
`25`	`25`
`@@ -37,15 +37,15 @@`
`37`	`37`	`mask: url('data-url:../icons/angle-left-light.svg') center / contain;`
`38`	`38`	`}`
`39`	`39`
`40`		`- @include screen1 {`
	`40`	`+ @media (--min-width1) {`
`41`	`41`
`42`	`42`	`&::before {`
`43`	`43`	`content: none;`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`	`}`
`47`	`47`
`48`		`- @include screen1 {`
	`48`	`+ @media (--min-width1) {`
`49`	`49`
`50`	`50`	`&:not(:last-child) {`
`51`	`51`
Original file line number	Diff line number	Diff line change
`@@ -5,12 +5,12 @@`
`5`	`5`	`.c-categories {`
`6`	`6`	`@include u-reset-list-styles;`
`7`	`7`
`8`		`- @include screen1 {`
	`8`	`+ @media (--min-width1) {`
`9`	`9`	`column-gap: var(--space3);`
`10`	`10`	`column-count: 2;`
`11`	`11`	`}`
`12`	`12`
`13`		`- @include screen2 {`
	`13`	`+ @media (--min-width2) {`
`14`	`14`	`column-count: auto;`
`15`	`15`	`}`
`16`	`16`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`p { // WP Contact Form 7 generated`
`7`	`7`	`margin: 0;`
`8`	`8`
`9`		`- @include screen1 {`
	`9`	`+ @media (--min-width1) {`
`10`	`10`	`column-count: 2;`
`11`	`11`	`}`
`12`	`12`