From 65af6a6995772ed857d6d62c8ab12892e172599c Mon Sep 17 00:00:00 2001
From: Kuizuo <hi@kuizuo.cn>
Date: Tue, 6 Feb 2024 03:01:53 +0800
Subject: [PATCH] fix: css media notation

---
 .stylelintrc.js                                   |  1 +
 src/components/SocialLinks/styles.module.scss     |  6 ++++--
 src/css/custom.scss                               |  8 ++++----
 .../_components/BlogRecommend/styles.module.scss  |  4 ++--
 .../_components/BlogSection/styles.module.scss    |  2 +-
 src/pages/_components/FeaturesSection/index.tsx   |  2 +-
 .../FeaturesSection/styles.module.scss            | 15 ---------------
 src/pages/_components/Hero/styles.module.scss     |  9 +++------
 .../_components/SectionTitle/styles.module.scss   |  2 +-
 src/theme/BlogListPage/styles.module.scss         |  2 +-
 src/theme/BlogPostGridItems/styles.module.scss    |  4 ++--
 src/theme/BlogPostItem/Footer/styles.module.scss  |  2 +-
 .../BlogPostItem/Header/Info/styles.module.css    |  1 +
 src/theme/BlogSidebar/Desktop/styles.module.scss  |  2 +-
 src/theme/CodeBlock/Content/String.tsx            |  1 -
 15 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index cbce6ad7..bdfc0082 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -15,5 +15,6 @@ module.exports = {
     'no-descending-specificity': null,
     'comment-empty-line-before': null,
     'value-keyword-case': ['lower', { camelCaseSvgKeywords: true }],
+    'media-feature-range-notation': 'prefix',
   },
 }
diff --git a/src/components/SocialLinks/styles.module.scss b/src/components/SocialLinks/styles.module.scss
index c12c4ff2..1b8eb368 100644
--- a/src/components/SocialLinks/styles.module.scss
+++ b/src/components/SocialLinks/styles.module.scss
@@ -2,8 +2,9 @@
   width: 100%;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   justify-content: space-between;
-  gap: 1rem;
+  gap: 0.75rem;
   padding: 0.5em 0;
   z-index: 100;
   position: relative;
@@ -57,7 +58,8 @@
   transition: all 0.3s ease-in-out;
 }
 
-@media (width <= 570px) {
+/* stylelint-disable-next-line media-feature-range-notation */
+@media (max-width: 570px) {
   .socialLinks {
     justify-content: center;
     flex-wrap: wrap;
diff --git a/src/css/custom.scss b/src/css/custom.scss
index f4e9913e..315db601 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -42,7 +42,7 @@
   --content-background-color: #f8fafc;
 
   --blog-item-background-color: linear-gradient(180deg, #fcfcfc, #fff);
-  --blog-item-shadow: 0 10px 20px #f1f5f9dd, 0 0 10px 0 #e4e4e7dd;
+  --blog-item-shadow: 0 10px 18px #f1f5f9dd, 0 0 10px 0 #e4e4e7dd;
   --blog-item-shade: #f4f4f5;
 
   -webkit-font-smoothing: unset;
@@ -63,7 +63,7 @@ html[data-theme='dark'] {
 
   --content-background-color: #18181b;
   --blog-item-background-color: linear-gradient(180deg, #171717, #18181b);
-  --blog-item-shadow: 0 12px 24px rgb(37 55 72 / 20%), 0 0 8px rgb(37 55 72 / 40%);
+  --blog-item-shadow: 0 10px 18px #25374833, 0 0 8px #25374866;
   --blog-item-shade: #27272a;
 
   color: hsl(214deg 15% 85%);
@@ -189,7 +189,7 @@ article {
   }
 }
 
-@media (width <= 570px) {
+@media (max-width: 570px) {
   h1 {
     font-size: 1.6em;
   }
@@ -206,7 +206,7 @@ article {
 }
 
 /* 导航收缩相应尺寸调大 */
-@media (width <= 1100px) {
+@media (max-width: 1100px) {
   .navbar > .container,
   .navbar > .container-fluid {
     padding: 0;
diff --git a/src/pages/_components/BlogRecommend/styles.module.scss b/src/pages/_components/BlogRecommend/styles.module.scss
index 7b52ffe0..fc3dd48b 100644
--- a/src/pages/_components/BlogRecommend/styles.module.scss
+++ b/src/pages/_components/BlogRecommend/styles.module.scss
@@ -52,13 +52,13 @@
   }
 }
 
-@media (width <= 1024px) {
+@media (max-width: 1024px) {
   .blog__recommend {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
-@media (width <= 768px) {
+@media (max-width: 768px) {
   .blog__recommend {
     grid-template-columns: repeat(1, 1fr);
   }
diff --git a/src/pages/_components/BlogSection/styles.module.scss b/src/pages/_components/BlogSection/styles.module.scss
index 83a2ea8d..8ca2e215 100644
--- a/src/pages/_components/BlogSection/styles.module.scss
+++ b/src/pages/_components/BlogSection/styles.module.scss
@@ -44,7 +44,7 @@
   }
 }
 
-@media (width <= 996px) {
+@media (max-width: 996px) {
   .blogContainer {
     max-width: 768px;
   }
diff --git a/src/pages/_components/FeaturesSection/index.tsx b/src/pages/_components/FeaturesSection/index.tsx
index ba757f25..58d7c5fe 100644
--- a/src/pages/_components/FeaturesSection/index.tsx
+++ b/src/pages/_components/FeaturesSection/index.tsx
@@ -26,7 +26,7 @@ export default function FeaturesSection(): JSX.Element {
       <SectionTitle icon={'ri:map-pin-user-line'}>
         <Translate id="homepage.feature.title">个人特点</Translate>
       </SectionTitle>
-      <div className={clsx('row', styles.features)}>
+      <div className="row">
         {features.map((props, idx) => (
           <Feature key={idx} {...props} />
         ))}
diff --git a/src/pages/_components/FeaturesSection/styles.module.scss b/src/pages/_components/FeaturesSection/styles.module.scss
index 3788e663..354fdd34 100644
--- a/src/pages/_components/FeaturesSection/styles.module.scss
+++ b/src/pages/_components/FeaturesSection/styles.module.scss
@@ -3,14 +3,6 @@
   padding: 2rem 1rem;
 }
 
-.features {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(260px, 1fr));
-  gap: 1.5rem;
-  margin: 0;
-  padding: 0.5rem 0;
-}
-
 .feature {
   position: relative;
   background: transparent;
@@ -35,10 +27,3 @@
 html[data-theme='dark'] .feature:hover {
   box-shadow: 0 0 10px 10px rgb(71 71 71 / 20%);
 }
-
-@media (width <= 768px) {
-  .features {
-    grid-template-columns: 1fr;
-    gap: 0.75rem;
-  }
-}
diff --git a/src/pages/_components/Hero/styles.module.scss b/src/pages/_components/Hero/styles.module.scss
index 29784dc7..c59232b6 100644
--- a/src/pages/_components/Hero/styles.module.scss
+++ b/src/pages/_components/Hero/styles.module.scss
@@ -5,7 +5,7 @@
   max-width: 100%;
   margin: 0;
   display: grid;
-  grid-template-columns: 8fr 12fr;
+  grid-template-columns: 8fr 11fr;
   align-items: center;
   position: relative;
 
@@ -14,7 +14,6 @@
 }
 
 .intro {
-  max-width: 100vw;
   padding: 1em;
   padding-left: 4em;
   position: relative;
@@ -219,7 +218,7 @@ html[data-theme='dark'] {
   }
 }
 
-@media (width <= 1000px) {
+@media (max-width: 1000px) {
   .hero {
     grid-template-columns: 1fr;
     grid-template-rows: max-content minmax(0, max-content);
@@ -265,7 +264,7 @@ html[data-theme='dark'] {
   }
 }
 
-@media (width <= 570px) {
+@media (max-width: 570px) {
   .hero {
     height: auto;
   }
@@ -285,8 +284,6 @@ html[data-theme='dark'] {
   }
 
   .intro {
-    min-width: 100vw;
-
     padding-top: 2em;
   }
 }
diff --git a/src/pages/_components/SectionTitle/styles.module.scss b/src/pages/_components/SectionTitle/styles.module.scss
index 550634ba..fedaf339 100644
--- a/src/pages/_components/SectionTitle/styles.module.scss
+++ b/src/pages/_components/SectionTitle/styles.module.scss
@@ -29,7 +29,7 @@
   }
 }
 
-@media (width <= 570px) {
+@media (max-width: 570px) {
   .sectionTitle {
     margin-top: 1.5rem;
   }
diff --git a/src/theme/BlogListPage/styles.module.scss b/src/theme/BlogListPage/styles.module.scss
index 41b646a8..bbfe611e 100644
--- a/src/theme/BlogListPage/styles.module.scss
+++ b/src/theme/BlogListPage/styles.module.scss
@@ -25,7 +25,7 @@
   }
 }
 
-@media (width <= 570px) {
+@media (max-width: 570px) {
   h2 {
     font-size: 1.3rem;
   }
diff --git a/src/theme/BlogPostGridItems/styles.module.scss b/src/theme/BlogPostGridItems/styles.module.scss
index 900dc8b3..3df6f751 100644
--- a/src/theme/BlogPostGridItems/styles.module.scss
+++ b/src/theme/BlogPostGridItems/styles.module.scss
@@ -104,13 +104,13 @@
   background-clip: text;
 }
 
-@media (width <= 768px) {
+@media (max-width: 768px) {
   .postGridItem {
     min-width: 100%;
   }
 }
 
-@media (width <= 576px) {
+@media (max-width: 576px) {
   .blogGrid {
     grid-template-columns: minmax(0, max-content);
   }
diff --git a/src/theme/BlogPostItem/Footer/styles.module.scss b/src/theme/BlogPostItem/Footer/styles.module.scss
index b5dc01f7..343a1823 100644
--- a/src/theme/BlogPostItem/Footer/styles.module.scss
+++ b/src/theme/BlogPostItem/Footer/styles.module.scss
@@ -5,9 +5,9 @@
 .blogPostInfo {
   margin-top: 0.5em;
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   margin-bottom: var(--ifm-spacing-m);
+  flex-wrap: wrap;
   gap: 4px;
   color: var(--ifm-secondary-text-color);
 
diff --git a/src/theme/BlogPostItem/Header/Info/styles.module.css b/src/theme/BlogPostItem/Header/Info/styles.module.css
index 7ce6d8a3..815f8a5f 100644
--- a/src/theme/BlogPostItem/Header/Info/styles.module.css
+++ b/src/theme/BlogPostItem/Header/Info/styles.module.css
@@ -1,5 +1,6 @@
 .container {
   display: inline-flex;
+  flex-wrap: wrap;
   gap: 0.5rem;
   font-size: 0.95rem;
 }
diff --git a/src/theme/BlogSidebar/Desktop/styles.module.scss b/src/theme/BlogSidebar/Desktop/styles.module.scss
index 938600a4..23a42c69 100644
--- a/src/theme/BlogSidebar/Desktop/styles.module.scss
+++ b/src/theme/BlogSidebar/Desktop/styles.module.scss
@@ -47,7 +47,7 @@
   color: var(--ifm-color-primary) !important;
 }
 
-@media (width <= 996px) {
+@media (max-width: 996px) {
   .sidebar {
     display: none;
   }
diff --git a/src/theme/CodeBlock/Content/String.tsx b/src/theme/CodeBlock/Content/String.tsx
index 61e0c145..78aff761 100644
--- a/src/theme/CodeBlock/Content/String.tsx
+++ b/src/theme/CodeBlock/Content/String.tsx
@@ -86,7 +86,6 @@ export default function CodeBlockString({
         <Highlight theme={prismTheme} code={code} language={(language ?? 'text') as Language}>
           {({ className, style, tokens, getLineProps, getTokenProps }) => (
             <pre
-              /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
               ref={wordWrap.codeBlockRef}
               className={clsx(className, styles.codeBlock, 'thin-scrollbar')}