fix: css media notation

.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',
   },
 }

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;

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;

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

src/pages/_components/BlogSection/styles.module.scss

@@ -44,7 +44,7 @@
   }
 }
 
-@media (width <= 996px) {
+@media (max-width: 996px) {
   .blogContainer {
     max-width: 768px;
   }

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} />
         ))}

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

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

src/pages/_components/SectionTitle/styles.module.scss

@@ -29,7 +29,7 @@
   }
 }
 
-@media (width <= 570px) {
+@media (max-width: 570px) {
   .sectionTitle {
     margin-top: 1.5rem;
   }

src/theme/BlogListPage/styles.module.scss

@@ -25,7 +25,7 @@
   }
 }
 
-@media (width <= 570px) {
+@media (max-width: 570px) {
   h2 {
     font-size: 1.3rem;
   }

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

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

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

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

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')}