consistently use screen in width-based CSS media queries

diff --git a/src/css/base.css b/src/css/base.css
index 722cd8f..e312c34 100644 (file)
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -23,7 +23,7 @@ html {
   text-size-adjust: 100%;
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   html {
     font-size: 1.2em;
   }

diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css
index c7c27bb..6ec1824 100644 (file)
--- a/src/css/breadcrumbs.css
+++ b/src/css/breadcrumbs.css
@@ -6,7 +6,7 @@
   hyphens: none;
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .crumbs {
     display: block;
   }

diff --git a/src/css/doc.css b/src/css/doc.css
index 4528802..e5fe8fa 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -5,7 +5,7 @@
   color: #333;
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .doc {
     margin: 0 2rem;
     max-width: 54rem;

diff --git a/src/css/main.css b/src/css/main.css
index ed146b2..facfd77 100644 (file)
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,4 +1,4 @@
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .main-wrapper {
     display: flex;
   }

diff --git a/src/css/navigation-menu.css b/src/css/navigation-menu.css
index 328d70e..2450212 100644 (file)
--- a/src/css/navigation-menu.css
+++ b/src/css/navigation-menu.css
@@ -14,7 +14,7 @@ html.is-clipped--nav {
   height: calc(100vh - var(--navbar-height) - var(--toolbar-height) - var(--drawer-height));
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .navigation-menu {
     height: calc(100vh - var(--navbar-height) - var(--drawer-height));
   }
@@ -97,7 +97,7 @@ html.is-clipped--nav {
   width: 1.0526em;
 }
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
   .nav-toggle {
     height: 1.6em;
   }
@@ -119,7 +119,7 @@ html.is-clipped--nav {
   padding-left: 0.25em;
 }
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
   .nav-link,
   .nav-text {
     line-height: 1.6;

diff --git a/src/css/navigation.css b/src/css/navigation.css
index 36979ee..f6d18b2 100644 (file)
--- a/src/css/navigation.css
+++ b/src/css/navigation.css
@@ -16,14 +16,14 @@
   display: block;
 }
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
   .navigation-container {
     width: 16rem;
     font-size: 0.9rem;
   }
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .navigation-container {
     font-size: 0.85rem;
     flex: none;
@@ -40,13 +40,13 @@
   height: calc(100vh - var(--navbar-height) - var(--toolbar-height));
 }
 
-@media (min-width: 769px) {
+@media screen and (min-width: 769px) {
   .navigation {
     box-shadow: 0.5px 0 3px #c1c1c1;
   }
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .navigation {
     top: var(--navbar-height);
     box-shadow: none;

diff --git a/src/css/page-versions.css b/src/css/page-versions.css
index 28a62cc..49e617b 100644 (file)
--- a/src/css/page-versions.css
+++ b/src/css/page-versions.css
@@ -4,7 +4,7 @@
   position: relative;
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .page-versions {
     display: block;
   }

diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index 4fd3db2..24b2411 100644 (file)
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -38,7 +38,7 @@
   border: none;
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .navigation-toggle {
     display: none;
   }
@@ -68,7 +68,7 @@
   padding-right: 0.5rem;
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .edit-this-page {
     display: block;
   }