Merge pull request #29 from mirus-ua/28-media-queries-not-working-properly

fix: rework the styles that are not working properly

Author: mirus-ua

README.md

@@ -73,15 +73,18 @@ You can find all of them in the browser's page inspector, but here is the list w
     --accent-contrast-color: black; /* mainly uses for text on the accent backgrounds but not limited */
     --color: white; /* text color, also some other text use the variable in color mixing */
     --border-color: rgba(255, 255, 255, .1); /* border color */
-    --phone: "max-width: 684px"; /* phone breakpoint */
-    --tablet: "max-width: 900px"; /* tablet breakpoint */
     --article-link-color: var(inherit); /* for you, who want to colorize your article links */
 
     /* code syntax */
     /* take a look at themes/re-terminal/assets/css/syntax.scss to understand in detail which color stands for */
     --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); 
     --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
     --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    
+    /* breakpoints */
+    /* unfortunately, native CSS variables don't support media queries, so use SCSS vars instead */
+    $phone: 684px;
+    $tablet: 900px;
   }
 ```
 

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;
 }

demoSite/content/posts/css-vars.md

@@ -44,14 +44,17 @@ You can find all of them in the browser's page inspector, but here is the list w
     --accent-contrast-color: black; /* mainly uses for text on the accent backgrounds but not limited */
     --color: white; /* text color, also some other text use the variable in color mixing */
     --border-color: rgba(255, 255, 255, .1); /* border color */
-    --phone: "max-width: 684px"; /* phone breakpoint */
-    --tablet: "max-width: 900px"; /* tablet breakpoint */
 
     /* code syntax */
     /* take a look at themes/re-terminal/assets/css/syntax.scss to understand in detail which color stands for */
     --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); 
     --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
     --syntax-value-color: color-mix(in srgb, var(--accent), white);
+
+    /* breakpoints */
+    /* unfortunately, native CSS variables don't support media queries, so use SCSS vars instead */
+    $phone: 684px;
+    $tablet: 900px;
   }
 ```
 

demoSite/content/showcase.md

@@ -28,7 +28,7 @@ pre {
   font-size: 1rem;
   overflow: auto;
 
-  @media (--phone) {
+  @media ($phone) {
     white-space: pre-wrap;
     word-wrap: break-word;
   }