fix: rework the styles that are not working properly

assets/css/footer.scss

@@ -11,7 +11,7 @@
     width: 760px;
     max-width: 100%;
 
-    @media (var(--tablet)) {
+    @media (max-width: $tablet) {
       flex-direction: column;
     }
   }

assets/css/main.scss

@@ -24,7 +24,7 @@ body {
   -webkit-overflow-scrolling: touch;
   -webkit-text-size-adjust: 100%;
 
-  @media (var(--phone)) {
+  @media (max-width: $phone) {
     font-size: 1rem;
   }
 }
@@ -157,7 +157,7 @@ pre {
     margin-top: -40px;
   }
 
-  @media (var(--phone)) {
+  @media (max-width: $phone) {
     white-space: pre-wrap;
     word-wrap: break-word;
   }
@@ -177,7 +177,7 @@ blockquote {
   margin: 40px 0;
   padding: 25px;
 
-  @media (var(--phone)) {
+  @media (max-width: $phone) {
     padding-right: 0;
   }
 
@@ -254,7 +254,7 @@ ol {
     position: relative;
   }
 
-  @media (var(--phone)) {
+  @media (max-width: $phone) {
     margin-left: 20px;
   }
 }
@@ -312,7 +312,7 @@ mark {
     max-width: 100%;
   }
 
-  @media (var(--phone)) {
+  @media (max-width: $phone) {
     padding: 20px;
   }
 

assets/css/menu.scss

@@ -33,7 +33,7 @@
   justify-content: space-between;
   margin: 20px 1px;
 
-  @media (var(--phone)) {
+  @media (max-width: $phone) {
     margin: 0;
   }
 
@@ -55,7 +55,7 @@
       }
     }
 
-    @media (var(--phone)) {
+    @media (max-width: $phone) {
       flex-direction: column;
       align-items: flex-start;
       padding: 0;
@@ -118,7 +118,7 @@
   }
 
   &--desktop {
-    @media (var(--phone)) {
+    @media (max-width: $phone) {
       display: none
     }
   }
@@ -128,13 +128,13 @@
       @include header-menu-trigger;
       display: none;
 
-      @media (var(--phone)) {
+      @media (max-width: $phone) {
         display: block;
       }
     }
 
     .menu__dropdown {
-      @media (var(--phone)) {
+      @media (max-width: $phone) {
         left: auto;
         right: 0;
       }
@@ -153,7 +153,7 @@
     .menu__trigger {
       @include header-menu-trigger;
 
-      @media (var(--phone)) {
+      @media (max-width: $phone) {
         display: none;
       }
     }

assets/css/pagination.scss

@@ -56,7 +56,7 @@
   padding: 0;
   appearance: none;
 
-  @media(var(--phone)) {
+  @media(max-width: $phone) {
     flex: 1;
   }
 

assets/css/post.scss

@@ -90,7 +90,7 @@
     margin: 40px 0;
     padding: 20px;
 
-    @media (var(--phone)) {
+    @media (max-width: $phone) {
       padding: 10px;
       border-width: 10px;
     }

assets/css/variables.scss

@@ -6,7 +6,10 @@
   --border-color: rgba(255, 255, 255, .1);
   --article-link-color: var(inherit);
 
-  /* MEDIA QUERIES */
-  --phone: "max-width: 684px";
-  --tablet: "max-width: 900px";
+  // Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/ 
+  // --phone: "max-width: 684px";
+  // --tablet: "max-width: 900px";
+
+  $phone: 684px;
+  $tablet: 900px;
 }