fix(css): remove screen condition from media queries (#11142)

* fix(css): remove `screen and` from MQ * Remove the rest of screen-ands --------- Co-authored-by: Claas Augner <caugner@mozilla.com>
mdn · Jun 5, 2024 · a814540 · a814540
1 parent 654c2ad
commit a814540
Show file tree

Hide file tree

Showing 68 changed files with 198 additions and 200 deletions.
diff --git a/client/src/about/index.scss b/client/src/about/index.scss
@@ -12,7 +12,7 @@
       margin-top: 3rem;
     }
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       h1 {
         font-size: 3.5rem;
       }
@@ -48,7 +48,7 @@
 
     .heading-break {
       display: none;
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         display: block;
       }
     }

diff --git a/client/src/about/testimonial/index.scss b/client/src/about/testimonial/index.scss
@@ -7,15 +7,15 @@
   padding: 2rem 0;
   width: 100%;
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     flex-direction: row;
   }
 
   iframe {
     height: 50vw;
     padding: 0;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       height: initial;
       width: 48%;
     }
@@ -26,15 +26,15 @@
     max-width: 18rem;
     text-align: center;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       margin: initial;
       text-align: initial;
     }
 
     img {
       margin: 0 auto;
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         margin: initial;
       }
     }

diff --git a/client/src/advertising/with_us/index.scss b/client/src/advertising/with_us/index.scss
@@ -63,15 +63,15 @@ main.advertise-with-us {
       display: grid;
       gap: 0.3em;
 
-      @media screen and (max-width: $screen-md) {
+      @media (max-width: $screen-md) {
         grid-template-columns: 1fr 1fr;
       }
 
-      @media screen and (max-width: $screen-sm) {
+      @media (max-width: $screen-sm) {
         grid-template-columns: 1fr;
       }
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         grid-template-columns: 1fr 1fr 1fr 1fr;
       }
 

diff --git a/client/src/app.scss b/client/src/app.scss
@@ -109,7 +109,7 @@
   );
 }
 
-@media screen and (min-width: $screen-md) {
+@media (min-width: $screen-md) {
   :root {
     --type-heading-h1: 600 var(--type-heading-h1-font-size) /
       var(--heading-line-height) var(--font-heading);
@@ -139,7 +139,7 @@ body {
   scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg);
 
   &.mobile-overlay-active {
-    @media screen and (max-width: $screen-md) {
+    @media (max-width: $screen-md) {
       overflow: hidden;
     }
   }

diff --git a/client/src/blog/index.scss b/client/src/blog/index.scss
@@ -110,7 +110,7 @@
       display: grid;
       grid-template-columns: 1fr 1fr;
 
-      @media screen and (max-width: $screen-lg) {
+      @media (max-width: $screen-lg) {
         grid-template-columns: auto;
       }
     }

diff --git a/client/src/blog/post.scss b/client/src/blog/post.scss
@@ -8,21 +8,21 @@
     "newsletter";
   width: 100%;
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     grid-template-areas:
       "post toc"
       "newsletter toc";
     grid-template-columns: minmax(auto, 100%) minmax(0, 12rem);
   }
 
-  @media screen and (min-width: $screen-xl) {
+  @media (min-width: $screen-xl) {
     grid-template-areas:
       "nothing post toc"
       "nothing newsletter toc";
     grid-template-columns: minmax(auto, 1fr) minmax(0, 52rem) minmax(15rem, 1fr);
   }
 
-  @media screen and (min-width: $screen-xxl) {
+  @media (min-width: $screen-xxl) {
     grid-template-areas:
       "toc post place"
       "toc newsletter place";
@@ -36,7 +36,7 @@
     --offset: var(--top-nav-height);
     display: none;
 
-    @media screen and (min-width: $screen-lg) {
+    @media (min-width: $screen-lg) {
       display: flex;
       flex-direction: column;
       grid-area: toc;
@@ -45,7 +45,7 @@
         margin-top: 2rem;
       }
     }
-    @media screen and (min-width: $screen-xxl) {
+    @media (min-width: $screen-xxl) {
       display: contents;
 
       .place.side,
@@ -91,7 +91,7 @@
       display: flex;
       gap: 1rem;
 
-      @media screen and (max-width: $screen-md) {
+      @media (max-width: $screen-md) {
         flex-direction: column-reverse;
       }
 
@@ -110,7 +110,7 @@
           background: none;
         }
 
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           &.previous,
           &.next {
             &::before,

diff --git a/client/src/community/index.scss b/client/src/community/index.scss
@@ -55,15 +55,15 @@ main.contribute {
       display: grid;
       gap: 0.3em;
 
-      @media screen and (max-width: $screen-md) {
+      @media (max-width: $screen-md) {
         grid-template-columns: 1fr 1fr;
       }
 
-      @media screen and (max-width: $screen-sm) {
+      @media (max-width: $screen-sm) {
         grid-template-columns: 1fr;
       }
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         grid-template-columns: 1fr 1fr 1fr 1fr;
       }