Update deprecated device-width media queries (#120)

assets/scss/_base.scss

@@ -16,7 +16,7 @@ body {
 	font-size: 1.6em;
 	font-weight: 300;
   line-height: 1.8em;
-  @media only screen and (max-device-width : 768px) {
+  @media only screen and (max-width : 768px) {
     font-size: 1.6em;
     line-height: 1.6em;
   }
@@ -51,7 +51,7 @@ h6 {
 h1 {
   font-size: 3.2rem;
   line-height: 3.6rem;
-  @media only screen and (max-device-width : 768px) {
+  @media only screen and (max-width : 768px) {
     font-size: 3.0rem;
     line-height: 3.4rem;
   }
@@ -59,7 +59,7 @@ h1 {
 h2 {
   font-size: 2.8rem;
   line-height: 3.2rem;
-  @media only screen and (max-device-width : 768px) {
+  @media only screen and (max-width : 768px) {
     font-size: 2.6rem;
     line-height: 3.0rem;
   }
@@ -67,7 +67,7 @@ h2 {
 h3 {
   font-size: 2.4rem;
   line-height: 2.8rem;
-  @media only screen and (max-device-width : 768px) {
+  @media only screen and (max-width : 768px) {
     font-size: 2.2rem;
     line-height: 2.6rem;
   }
@@ -75,7 +75,7 @@ h3 {
 h4 {
   font-size: 2.2rem;
   line-height: 2.6rem;
-  @media only screen and (max-device-width : 768px) {
+  @media only screen and (max-width : 768px) {
     font-size: 2.0rem;
     line-height: 2.4rem;
   }
@@ -83,7 +83,7 @@ h4 {
 h5 {
   font-size: 2.0rem;
   line-height: 2.4rem;
-  @media only screen and (max-device-width : 768px) {
+  @media only screen and (max-width : 768px) {
     font-size: 1.8rem;
     line-height: 2.2rem;
   }
@@ -91,7 +91,7 @@ h5 {
 h6 {
   font-size: 1.8rem;
   line-height: 2.2rem;
-  @media only screen and (max-device-width : 768px) {
+  @media only screen and (max-width : 768px) {
     font-size: 1.6rem;
     line-height: 2.0rem;
   }

assets/scss/_content.scss

@@ -10,7 +10,7 @@
         font-size: 4.2rem;
         line-height: 4.6rem;
         margin: 0;
-        @media only screen and (max-device-width : 768px) {
+        @media only screen and (max-width : 768px) {
           font-size: 4.0rem;
           line-height: 4.4rem;
         }
@@ -45,7 +45,7 @@
   width: 20rem;
   height: auto;
   border-radius: 50%;
-  @media only screen and (max-device-width : 768px) {
+  @media only screen and (max-width : 768px) {
     width: 10rem;
   }
 }
@@ -57,7 +57,7 @@
     padding: 0;
     li {
       font-size: 1.8rem;
-      @media only screen and (max-device-width : 768px) {
+      @media only screen and (max-width : 768px) {
         margin: 1.6rem 0 1.6rem 0;
       }
       span {
@@ -65,7 +65,7 @@
         width: 20.0rem;
         text-align: right;
         margin-right: 3.0rem;
-        @media only screen and (max-device-width : 768px) {
+        @media only screen and (max-width : 768px) {
           display: block;
           text-align: left;
         }
@@ -99,7 +99,7 @@
       margin-top: 1.0rem;
       margin-bottom: 0.5rem;
       font-size: 2.4rem;
-      @media only screen and (max-device-width : 768px) {
+      @media only screen and (max-width : 768px) {
         font-size: 2.0rem;
       }
     }
@@ -120,7 +120,7 @@
           &:focus {
             color: $link-color;
           }
-          @media only screen and (max-device-width : 768px) {
+          @media only screen and (max-width : 768px) {
             font-size: 1.4rem;
           }
           i {
@@ -137,7 +137,7 @@
       margin-top: 2.0rem;
       margin-bottom: 0.5rem;
       font-size: 4.6rem;
-      @media only screen and (max-device-width : 768px) {
+      @media only screen and (max-width : 768px) {
         font-size: 3.2rem;
       }
     }
@@ -145,7 +145,7 @@
       margin-top: 2.0rem;
       margin-bottom: 3.2rem;
       font-size: 3.2rem;
-      @media only screen and (max-device-width : 768px) {
+      @media only screen and (max-width : 768px) {
         font-size: 2.8rem;
       }
     }

assets/scss/_content_rtl.scss

@@ -24,7 +24,7 @@ body.rtl {
           text-align: left;
           margin-left: 3.0rem;
           margin-right: 0;
-          @media only screen and (max-device-width : 768px) {
+          @media only screen and (max-width : 768px) {
             text-align: right;
           }
         }

assets/scss/_navigation.scss

@@ -24,7 +24,7 @@
     list-style: none;
     margin-bottom: 0;
     margin-top: 0;
-    @media only screen and (max-device-width : 768px) {
+    @media only screen and (max-width : 768px) {
       position: absolute;
       top: 6.0rem;
       right: 0;
@@ -43,7 +43,7 @@
       float: left;
       margin: 0;
       position: relative;
-      @media only screen and (max-device-width : 768px) {
+      @media only screen and (max-width : 768px) {
         float: none !important;
         text-align: center;
         a, span {
@@ -56,7 +56,7 @@
       }
     }
     .menu-separator {
-      @media only screen and (max-device-width : 768px) {
+      @media only screen and (max-width : 768px) {
         border-top: 2px solid $fg-color;
         margin: 0 8.0rem;
         span {
@@ -67,7 +67,7 @@
   }
   #menu-toggle {
     display: none;
-    @media only screen and (max-device-width : 768px) {
+    @media only screen and (max-width : 768px) {
       &:checked + label {
         color: $alt-bg-color;
       }
@@ -80,7 +80,7 @@
   }
   .menu-button {
     display: none;
-    @media only screen and (max-device-width : 768px) {
+    @media only screen and (max-width : 768px) {
       display: block;
       font-size: 2.4rem;
       font-weight: 400;

assets/scss/_navigation_inverted.scss

@@ -12,19 +12,19 @@ body.inverted {
       }
     }
     .navigation-list {
-      @media only screen and (max-device-width : 768px) {
+      @media only screen and (max-width : 768px) {
         background-color: $bg-color-inverted;
         border-top: solid 2px $alt-bg-color-inverted;
         border-bottom: solid 2px $alt-bg-color-inverted;
       }
       .menu-separator {
-        @media only screen and (max-device-width : 768px) {
+        @media only screen and (max-width : 768px) {
           border-top: 2px solid $fg-color-inverted;
         }
       }
     }
     #menu-toggle {
-      @media only screen and (max-device-width : 768px) {
+      @media only screen and (max-width : 768px) {
         &:checked + label {
           color: $alt-bg-color-inverted;
         }
@@ -32,7 +32,7 @@ body.inverted {
     }
     .menu-button {
       display: none;
-      @media only screen and (max-device-width : 768px) {
+      @media only screen and (max-width : 768px) {
         color: $fg-color-inverted;
         &:hover,
         &:focus {
@@ -42,4 +42,4 @@ body.inverted {
     }
   }
 
-}
+}

assets/scss/_navigation_rtl.scss

@@ -1,7 +1,7 @@
 body.rtl {
   .navigation-list {
     float: left;
-    @media only screen and (max-device-width : 768px) {
+    @media only screen and (max-width : 768px) {
       left: 0;
       right: auto;
     }
@@ -11,7 +11,7 @@ body.rtl {
   }
 
   .menu-button {
-    @media only screen and (max-device-width : 768px) {
+    @media only screen and (max-width : 768px) {
       float: left;
     }
   }

resources/_gen/assets/scss/scss/coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.json

@@ -1 +1 @@
-{"Target":"css/coder.min.134a7c5ac2b84e004ec89170bdb9a8df52e4496cd130d887bf8b8cdbf5a53d06.css","MediaType":"text/css","Data":{"Integrity":"sha256-E0p8WsK4TgBOyJFwvbmo31LkSWzRMNiHv4uM2/WlPQY="}}
+{"Target":"css/coder.min.48a91b6544fdc006092d34b2150b4e0379d72cefe62ae914c2b38d742820ad3d.css","MediaType":"text/css","Data":{"Integrity":"sha256-SKkbZUT9wAYJLTSyFQtOA3nXLO/mKukUwrONdCggrT0="}}