From 1682ce9d7ccc69b2252d32dea52fbbf6b4cc54e8 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 4 Jun 2023 12:29:33 +0800
Subject: [PATCH] style(scss): fix style-lint `media-feature-range-notation`
 issue (#1072)

See also: https://stylelint.io/user-guide/rules/media-feature-range-notation/
---
 _sass/addon/commons.scss       | 22 +++++++++++-----------
 _sass/addon/syntax.scss        |  2 +-
 _sass/layout/archives.scss     |  2 +-
 _sass/layout/category-tag.scss |  2 +-
 _sass/layout/home.scss         |  8 ++++----
 _sass/layout/post.scss         |  6 +++---
 6 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index faf0508..2cec92c 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -1206,7 +1206,7 @@ $btn-mb: 0.5rem;
 
 */
 
-@media all and (max-width: 576px) {
+@media all and (width <= 576px) {
   #main-wrapper {
     min-height: calc(100vh - #{$footer-height-mobile});
   }
@@ -1232,7 +1232,7 @@ $btn-mb: 0.5rem;
   }
 }
 
-@media all and (max-width: 768px) {
+@media all and (width <= 768px) {
   %full-width {
     max-width: 100%;
   }
@@ -1248,7 +1248,7 @@ $btn-mb: 0.5rem;
 }
 
 /* hide sidebar and panel */
-@media all and (max-width: 849px) {
+@media all and (width <= 849px) {
   @mixin slide($append: null) {
     $basic: transform 0.4s ease;
 
@@ -1352,14 +1352,14 @@ $btn-mb: 0.5rem;
 } /* max-width: 849px */
 
 /* Phone & Pad */
-@media all and (min-width: 577px) and (max-width: 1199px) {
+@media all and (width >= 577px) and (width <= 1199px) {
   footer .d-flex > div {
     width: 312px;
   }
 }
 
 /* Sidebar is visible */
-@media all and (min-width: 850px) {
+@media all and (width >= 850px) {
   /* Solved jumping scrollbar */
   html {
     overflow-y: scroll;
@@ -1428,7 +1428,7 @@ $btn-mb: 0.5rem;
 }
 
 /* Pad horizontal */
-@media all and (min-width: 992px) and (max-width: 1199px) {
+@media all and (width >= 992px) and (width <= 1199px) {
   #main .col-lg-11 {
     flex: 0 0 96%;
     max-width: 96%;
@@ -1436,7 +1436,7 @@ $btn-mb: 0.5rem;
 }
 
 /* Compact icons in sidebar & panel hidden */
-@media all and (min-width: 850px) and (max-width: 1199px) {
+@media all and (width >= 850px) and (width <= 1199px) {
   #search-results > div {
     max-width: 700px;
   }
@@ -1451,7 +1451,7 @@ $btn-mb: 0.5rem;
 }
 
 /* panel hidden */
-@media all and (max-width: 1199px) {
+@media all and (width <= 1199px) {
   #panel-wrapper {
     display: none;
   }
@@ -1463,7 +1463,7 @@ $btn-mb: 0.5rem;
 
 /* --- desktop mode, both sidebar and panel are visible --- */
 
-@media all and (min-width: 1200px) {
+@media all and (width >= 1200px) {
   #back-to-top {
     bottom: 6.5rem;
   }
@@ -1504,13 +1504,13 @@ $btn-mb: 0.5rem;
   }
 }
 
-@media all and (min-width: 1400px) {
+@media all and (width >= 1400px) {
   #back-to-top {
     right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
   }
 }
 
-@media all and (min-width: 1650px) {
+@media all and (width >= 1650px) {
   $icon-gap: 1rem;
 
   #main-wrapper,
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index df756a7..2e6e548 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -240,7 +240,7 @@ div {
   }
 }
 
-@media all and (min-width: 576px) {
+@media all and (width >= 576px) {
   div[class^='language-'] {
     .post-content > & {
       @include ml-mr(0);
diff --git a/_sass/layout/archives.scss b/_sass/layout/archives.scss
index 3a2e86b..e9e14bf 100644
--- a/_sass/layout/archives.scss
+++ b/_sass/layout/archives.scss
@@ -133,7 +133,7 @@
   }
 } /* #archives */
 
-@media all and (max-width: 576px) {
+@media all and (width <= 576px) {
   #archives {
     margin-top: -1rem;
 
diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss
index 3b25db5..6aa15e3 100644
--- a/_sass/layout/category-tag.scss
+++ b/_sass/layout/category-tag.scss
@@ -59,7 +59,7 @@
   }
 }
 
-@media all and (max-width: 576px) {
+@media all and (width <= 576px) {
   #page-category,
   #page-tag {
     ul > li {
diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss
index 499de47..bddf89b 100644
--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@@ -139,7 +139,7 @@
 } /* .pagination */
 
 /* Tablet */
-@media all and (min-width: 768px) {
+@media all and (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 (max-width: 830px) {
+@media all and (width <= 830px) {
   .pagination {
     justify-content: space-evenly;
 
@@ -186,7 +186,7 @@
 }
 
 /* Sidebar is visible */
-@media all and (min-width: 831px) {
+@media all and (width >= 831px) {
   #post-list {
     margin-top: 2.5rem;
   }
@@ -212,7 +212,7 @@
 }
 
 /* Panel is visible */
-@media all and (min-width: 1200px) {
+@media all and (width >= 1200px) {
   #post-list {
     padding-right: 0.5rem;
   }
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index 3d01b4d..2c82be6 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -380,7 +380,7 @@ h1 + .post-meta {
   }
 }
 
-@media all and (max-width: 576px) {
+@media all and (width <= 576px) {
   .preview-img[data-src] {
     margin-top: 2.2rem;
   }
@@ -395,14 +395,14 @@ h1 + .post-meta {
   }
 }
 
-@media all and (max-width: 768px) {
+@media all and (width <= 768px) {
   .post-content > p > img {
     max-width: calc(100% + 1rem);
   }
 }
 
 /* Hide SideBar and TOC */
-@media all and (max-width: 849px) {
+@media all and (width <= 849px) {
   .post-navigation {
     padding-left: 0;
     padding-right: 0;