From bc4100e4a1c9eb52102da6862c44e681f551fa26 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 7 Jan 2024 03:12:42 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=9C=A8=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E8=AE=BE=E5=A4=87=E7=9A=84=20UI=20=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 stylelint.config.js                       |  1 +
 theme/src/client/components/BlogAside.vue | 25 ++++++++++++-----------
 theme/src/client/styles/code.scss         |  2 +-
 theme/src/client/styles/content.scss      |  2 +-
 theme/src/client/styles/md-enhance.scss   | 13 ++++++------
 5 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/stylelint.config.js b/stylelint.config.js
index 2227808a..ce1a5d7e 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -15,5 +15,6 @@ export default stylelintConfig({
     'declaration-block-no-redundant-longhand-properties': [true, {
       ignoreShorthands: ['inset'],
     }],
+    'media-feature-range-notation': null,
   },
 })
diff --git a/theme/src/client/components/BlogAside.vue b/theme/src/client/components/BlogAside.vue
index 0f03879e..3b9f786e 100644
--- a/theme/src/client/components/BlogAside.vue
+++ b/theme/src/client/components/BlogAside.vue
@@ -35,10 +35,11 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .blog-aside-wrapper {
   position: sticky;
   top: calc(var(--vp-nav-height) + 2rem);
+  display: none;
   width: 270px;
   padding: 1rem 0;
   margin-top: 2rem;
@@ -46,22 +47,22 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   margin-left: 2rem;
   text-align: center;
   border-left: solid 1px var(--vp-c-divider);
+}
 
-  img {
-    width: 50%;
-    margin: auto;
-  }
+.blog-aside-wrapper img {
+  width: 50%;
+  margin: auto;
+}
 
-  h3 {
-    margin-top: 1.5rem;
-    font-size: 16px;
-    font-weight: 600;
-  }
+.blog-aside-wrapper h3 {
+  margin-top: 1.5rem;
+  font-size: 16px;
+  font-weight: 600;
 }
 
-@media (width <= 768px) {
+@media (width >= 768px) {
   .blog-aside-wrapper {
-    display: none;
+    display: block;
   }
 }
 
diff --git a/theme/src/client/styles/code.scss b/theme/src/client/styles/code.scss
index 1af415c7..43e0fcab 100644
--- a/theme/src/client/styles/code.scss
+++ b/theme/src/client/styles/code.scss
@@ -208,7 +208,7 @@ div[class*="language-"] {
 }
 
 // narrow mobile
-@media (width <= 419px) {
+@media (max-width: 419px) {
   .plume-content {
     div[class*="language-"] {
       margin: 0.85rem -1.5rem;
diff --git a/theme/src/client/styles/content.scss b/theme/src/client/styles/content.scss
index 8ac8e934..12a292ba 100644
--- a/theme/src/client/styles/content.scss
+++ b/theme/src/client/styles/content.scss
@@ -66,7 +66,7 @@
   opacity: 1;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .plume-content h1 {
     font-size: 32px;
     line-height: 40px;
diff --git a/theme/src/client/styles/md-enhance.scss b/theme/src/client/styles/md-enhance.scss
index d676d233..b5816cb4 100644
--- a/theme/src/client/styles/md-enhance.scss
+++ b/theme/src/client/styles/md-enhance.scss
@@ -1,10 +1,4 @@
 .plume-content {
-  @media (width <= 419px) {
-    .vp-code-demo {
-      margin: 8px -12px;
-    }
-  }
-
   .hint-container {
     padding: 16px 16px 8px;
     font-size: var(--vp-custom-block-font-size);
@@ -193,6 +187,13 @@
     }
   }
 
+  /* stylelint-disable-next-line order/order */
+  @media (max-width: 419px) {
+    .vp-code-demo {
+      margin: 8px -12px;
+    }
+  }
+
   .task-list-container {
     padding-left: 0;