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;