refactor: revert media query range notation (#1072)

Media queries range syntax not supported by Safari for iOS under 16.4

See also:
- https://caniuse.com/?search=media-queries

This reverts commit 1682ce9d7c.

.stylelintrc.json

@@ -17,6 +17,7 @@
       "always",
       { "ignore": ["after-comment", "first-nested", "inside-block"] }
     ],
-    "value-keyword-case": ["lower", { "ignoreProperties": ["/^\\$/"] }]
+    "value-keyword-case": ["lower", { "ignoreProperties": ["/^\\$/"] }],
+    "media-feature-range-notation": "prefix"
   }
 }

_sass/addon/commons.scss

@@ -1207,7 +1207,7 @@ $btn-mb: 0.5rem;
 
 */
 
-@media all and (width <= 576px) {
+@media all and (max-width: 576px) {
   #main-wrapper {
     min-height: calc(100vh - #{$footer-height-mobile});
   }
@@ -1229,7 +1229,7 @@ $btn-mb: 0.5rem;
   }
 }
 
-@media all and (width <= 768px) {
+@media all and (max-width: 768px) {
   %full-width {
     max-width: 100%;
   }
@@ -1245,7 +1245,7 @@ $btn-mb: 0.5rem;
 }
 
 /* hide sidebar and panel */
-@media all and (width <= 849px) {
+@media all and (max-width: 849px) {
   @mixin slide($append: null) {
     $basic: transform 0.4s ease;
 
@@ -1349,14 +1349,14 @@ $btn-mb: 0.5rem;
 } /* max-width: 849px */
 
 /* Phone & Pad */
-@media all and (width >= 577px) and (width <= 1199px) {
+@media all and (min-width: 577px) and (max-width: 1199px) {
   footer .d-flex > div {
     width: 312px;
   }
 }
 
 /* Sidebar is visible */
-@media all and (width >= 850px) {
+@media all and (min-width: 850px) {
   /* Solved jumping scrollbar */
   html {
     overflow-y: scroll;
@@ -1425,7 +1425,7 @@ $btn-mb: 0.5rem;
 }
 
 /* Pad horizontal */
-@media all and (width >= 992px) and (width <= 1199px) {
+@media all and (min-width: 992px) and (max-width: 1199px) {
   #main .col-lg-11 {
     flex: 0 0 96%;
     max-width: 96%;
@@ -1433,7 +1433,7 @@ $btn-mb: 0.5rem;
 }
 
 /* Compact icons in sidebar & panel hidden */
-@media all and (width >= 850px) and (width <= 1199px) {
+@media all and (min-width: 850px) and (max-width: 1199px) {
   #search-results > div {
     max-width: 700px;
   }
@@ -1448,7 +1448,7 @@ $btn-mb: 0.5rem;
 }
 
 /* panel hidden */
-@media all and (width <= 1199px) {
+@media all and (max-width: 1199px) {
   #panel-wrapper {
     display: none;
   }
@@ -1460,7 +1460,7 @@ $btn-mb: 0.5rem;
 
 /* --- desktop mode, both sidebar and panel are visible --- */
 
-@media all and (width >= 1200px) {
+@media all and (min-width: 1200px) {
   #back-to-top {
     bottom: 6.5rem;
   }
@@ -1501,13 +1501,13 @@ $btn-mb: 0.5rem;
   }
 }
 
-@media all and (width >= 1400px) {
+@media all and (min-width: 1400px) {
   #back-to-top {
     right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
   }
 }
 
-@media all and (width >= 1650px) {
+@media all and (min-width: 1650px) {
   $icon-gap: 1rem;
 
   #main-wrapper,

_sass/addon/syntax.scss

@@ -240,7 +240,7 @@ div {
   }
 }
 
-@media all and (width >= 576px) {
+@media all and (min-width: 576px) {
   div[class^='language-'] {
     .post-content > & {
       @include ml-mr(0);

_sass/layout/archives.scss

@@ -133,7 +133,7 @@
   }
 } /* #archives */
 
-@media all and (width <= 576px) {
+@media all and (max-width: 576px) {
   #archives {
     margin-top: -1rem;
 

_sass/layout/category-tag.scss

@@ -59,7 +59,7 @@
   }
 }
 
-@media all and (width <= 576px) {
+@media all and (max-width: 576px) {
   #page-category,
   #page-tag {
     ul > li {

_sass/layout/home.scss

@@ -139,7 +139,7 @@
 } /* .pagination */
 
 /* Tablet */
-@media all and (width >= 768px) {
+@media all and (min-width: 768px) {
   #post-list {
     %img-radius {
       border-radius: 0 $base-radius $base-radius 0;
@@ -173,7 +173,7 @@
 }
 
 /* Hide SideBar and TOC */
-@media all and (width <= 830px) {
+@media all and (max-width: 830px) {
   .pagination {
     justify-content: space-evenly;
 
@@ -186,7 +186,7 @@
 }
 
 /* Sidebar is visible */
-@media all and (width >= 831px) {
+@media all and (min-width: 831px) {
   #post-list {
     margin-top: 2.5rem;
   }
@@ -212,7 +212,7 @@
 }
 
 /* Panel is visible */
-@media all and (width >= 1200px) {
+@media all and (min-width: 1200px) {
   #post-list {
     padding-right: 0.5rem;
   }

_sass/layout/post.scss

@@ -380,7 +380,7 @@ h1 + .post-meta {
   }
 }
 
-@media all and (width <= 576px) {
+@media all and (max-width: 576px) {
   .preview-img[data-src] {
     margin-top: 2.2rem;
   }
@@ -395,14 +395,14 @@ h1 + .post-meta {
   }
 }
 
-@media all and (width <= 768px) {
+@media all and (max-width: 768px) {
   .post-content > p > img {
     max-width: calc(100% + 1rem);
   }
 }
 
 /* Hide SideBar and TOC */
-@media all and (width <= 849px) {
+@media all and (max-width: 849px) {
   .post-navigation {
     padding-left: 0;
     padding-right: 0;