From fa14c4c00b45eade3fef286ebc6fc618c3f9429b Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 7 Jan 2024 01:54:25 +0800
Subject: [PATCH] style: stylelint fix

---
 .../src/client/styles/button.scss             |  71 ++---
 theme/src/client/components/Archives.vue      |   7 +-
 theme/src/client/components/AutoLink.vue      |   4 +-
 theme/src/client/components/BackToTop.vue     |  26 +-
 theme/src/client/components/Backdrop.vue      |   8 +-
 theme/src/client/components/Blog.vue          |   6 +-
 theme/src/client/components/BlogAside.vue     |  21 +-
 theme/src/client/components/BlogExtract.vue   |  28 +-
 .../src/client/components/DocOutlineItem.vue  |   6 +-
 .../client/components/Flyout/MenuGroup.vue    |   6 +-
 .../src/client/components/Flyout/MenuLink.vue |   6 +-
 theme/src/client/components/Flyout/VMenu.vue  |  18 +-
 theme/src/client/components/Flyout/index.vue  |  23 +-
 theme/src/client/components/Friends.vue       |  33 +--
 theme/src/client/components/FriendsItem.vue   |  29 +-
 theme/src/client/components/Home.vue          |  26 +-
 theme/src/client/components/LayoutContent.vue |  15 +-
 theme/src/client/components/LocalNav.vue      |  25 +-
 .../components/LocalNavOutlineDropdown.vue    |  18 +-
 theme/src/client/components/Nav/NavBar.vue    |  76 +++---
 .../components/Nav/NavBarAppearance.vue       |   2 +-
 .../src/client/components/Nav/NavBarExtra.vue |   6 +-
 .../client/components/Nav/NavBarHamburger.vue |   4 +-
 .../src/client/components/Nav/NavBarMenu.vue  |   2 +-
 .../client/components/Nav/NavBarMenuLink.vue  |   2 +-
 .../client/components/Nav/NavBarSearch.vue    | 145 +++++-----
 .../components/Nav/NavBarSocialLinks.vue      |   2 +-
 .../src/client/components/Nav/NavBarTitle.vue |   6 +-
 .../components/Nav/NavBarTranslations.vue     |   4 +-
 theme/src/client/components/Nav/NavScreen.vue |  25 +-
 .../components/Nav/NavScreenAppearance.vue    |   6 +-
 .../components/Nav/NavScreenMenuGroup.vue     |  14 +-
 .../components/Nav/NavScreenMenuGroupLink.vue |   2 +-
 .../Nav/NavScreenMenuGroupSection.vue         |   2 +-
 .../components/Nav/NavScreenMenuLink.vue      |   4 +-
 .../components/Nav/NavScreenTranslations.vue  |   4 +-
 theme/src/client/components/Nav/index.vue     |   9 +-
 theme/src/client/components/Page.vue          |  89 +++---
 theme/src/client/components/PageAside.vue     |  11 +-
 theme/src/client/components/PageAsideItem.vue |   4 +-
 theme/src/client/components/PageFooter.vue    |  43 +--
 theme/src/client/components/PageMeta.vue      |  17 +-
 theme/src/client/components/PostItem.vue      |  26 +-
 theme/src/client/components/PostList.vue      |  15 +-
 theme/src/client/components/ShortPostList.vue |   7 +-
 theme/src/client/components/Sidebar.vue       |  51 ++--
 theme/src/client/components/SidebarItem.vue   |  12 +-
 theme/src/client/components/SkipLink.vue      |  12 +-
 theme/src/client/components/SocialLink.vue    |   4 +-
 theme/src/client/components/Switch.vue        |  13 +-
 .../client/components/SwitchAppearance.vue    |   3 +-
 theme/src/client/components/Tags.vue          |  30 ++-
 theme/src/client/components/VButton.vue       |  30 +--
 theme/src/client/components/VFooter.vue       |   8 +-
 theme/src/client/components/global/Badge.vue  |  22 +-
 .../components/global/ExternalLinkIcon.vue    |   6 +-
 theme/src/client/composables/index.ts         |   1 +
 theme/src/client/layouts/NotFound.vue         |  18 +-
 theme/src/client/styles/code.scss             |  88 +++---
 theme/src/client/styles/content.scss          |  34 +--
 theme/src/client/styles/fonts.scss            | 254 +++++++++++-------
 theme/src/client/styles/index.scss            |  24 +-
 theme/src/client/styles/md-enhance.scss       | 204 ++++++++++++--
 theme/src/client/styles/normalize.scss        |  36 +--
 theme/src/client/styles/search.scss           |   4 +-
 theme/src/client/styles/utils.scss            |   4 +-
 theme/src/client/styles/vars.scss             |  63 +++--
 67 files changed, 1060 insertions(+), 764 deletions(-)

diff --git a/plugins/plugin-copy-code/src/client/styles/button.scss b/plugins/plugin-copy-code/src/client/styles/button.scss
index 8606b9a1..bf2f8fab 100644
--- a/plugins/plugin-copy-code/src/client/styles/button.scss
+++ b/plugins/plugin-copy-code/src/client/styles/button.scss
@@ -9,11 +9,11 @@
   --vp-code-copy-code-hover-border-color: #e2e2e3;
   --vp-code-copy-code-hover-bg: #fff;
   --vp-code-copy-code-active-text: rgba(60, 60, 67, 0.78);
-  --vp-code-copy-copied-text-content: 'Copied';
+  --vp-code-copy-copied-text-content: "Copied";
 }
 
-html[lang='zh-CN'] {
-  --vp-code-copy-copied-text-content: '已复制';
+html[lang="zh-CN"] {
+  --vp-code-copy-copied-text-content: "已复制";
 }
 
 .dark {
@@ -25,71 +25,76 @@ html[lang='zh-CN'] {
 }
 
 .copy-code-button {
-  /*rtl:ignore*/
-  direction: ltr;
   position: absolute;
   top: 12px;
-  /*rtl:ignore*/
+
+  /* rtl:ignore */
   right: 12px;
   z-index: 3;
-  border: 1px solid var(--vp-code-copy-code-border-color);
-  border-radius: 4px;
   width: 40px;
   height: 40px;
-  background-color: var(--vp-code-copy-code-bg);
-  opacity: 0;
   cursor: pointer;
+  background-color: var(--vp-code-copy-code-bg);
   background-image: var(--vp-icon-copy);
+  background-repeat: no-repeat;
   background-position: 50%;
   background-size: 20px;
-  background-repeat: no-repeat;
+  border: 1px solid var(--vp-code-copy-code-border-color);
+  border-radius: 4px;
+  opacity: 0;
   transition:
     border-color 0.25s,
     background-color 0.25s,
     opacity 0.25s;
+
+  /* rtl:ignore */
+  direction: ltr;
 }
 
-[class*='language-']:hover > .copy-code-button,
-[class*='language-'] > .copy-code-button:focus,
-[class*='language-'] > .copy-code-button.copied {
+[class*="language-"]:hover > .copy-code-button,
+[class*="language-"] > .copy-code-button:focus,
+[class*="language-"] > .copy-code-button.copied {
   opacity: 1;
 }
 
-[class*='language-'] > .copy-code-button:hover,
-[class*='language-'] > .copy-code-button.copied {
-  border-color: var(--vp-code-copy-code-hover-border-color);
+[class*="language-"] > .copy-code-button:hover,
+[class*="language-"] > .copy-code-button.copied {
   background-color: var(--vp-code-copy-code-hover-bg);
+  border-color: var(--vp-code-copy-code-hover-border-color);
 }
 
-[class*='language-'] > .copy-code-button.copied,
-[class*='language-'] > .copy-code-button:hover.copied {
-  /*rtl:ignore*/
-  border-radius: 0 4px 4px 0;
+[class*="language-"] > .copy-code-button.copied,
+[class*="language-"] > .copy-code-button:hover.copied {
   background-color: var(--vp-code-copy-code-hover-bg);
   background-image: var(--vp-icon-copied);
+
+  /* rtl:ignore */
+  border-radius: 0 4px 4px 0;
 }
 
-[class*='language-'] > .copy-code-button.copied::before,
-[class*='language-'] > .copy-code-button:hover.copied::before {
+[class*="language-"] > .copy-code-button.copied::before,
+[class*="language-"] > .copy-code-button:hover.copied::before {
   position: relative;
   top: -1px;
-  /*rtl:ignore*/
-  transform: translateX(calc(-100% - 1px));
   display: flex;
-  justify-content: center;
   align-items: center;
-  border: 1px solid var(--vp-code-copy-code-hover-border-color);
-  /*rtl:ignore*/
-  border-right: 0;
-  border-radius: 4px 0 0 4px;
-  padding: 0 10px;
+  justify-content: center;
   width: fit-content;
   height: 40px;
-  text-align: center;
+  padding: 0 10px;
   font-size: 12px;
   font-weight: 500;
   color: var(--vp-code-copy-code-active-text);
-  background-color: var(--vp-code-copy-code-hover-bg);
+  text-align: center;
   white-space: nowrap;
   content: var(--vp-code-copy-copied-text-content);
+  background-color: var(--vp-code-copy-code-hover-bg);
+  border: 1px solid var(--vp-code-copy-code-hover-border-color);
+
+  /* rtl:ignore */
+  border-right: 0;
+  border-radius: 4px 0 0 4px;
+
+  /* rtl:ignore */
+  transform: translateX(calc(-100% - 1px));
 }
diff --git a/theme/src/client/components/Archives.vue b/theme/src/client/components/Archives.vue
index 0b2c7cbf..31bd7311 100644
--- a/theme/src/client/components/Archives.vue
+++ b/theme/src/client/components/Archives.vue
@@ -28,18 +28,19 @@ const { archives } = useArchives()
 
 <style scoped>
 .archives-wrapper {
-  padding: 32px 24px;
   flex: 1;
+  padding: 32px 24px;
 }
 
 .archives-title {
   display: flex;
   align-items: center;
+  margin-bottom: 40px;
   font-size: 24px;
   font-weight: 700;
   color: var(--vp-c-brand-1);
-  margin-bottom: 40px;
 }
+
 .archives-title .icon {
   width: 1em;
   height: 1em;
@@ -56,8 +57,8 @@ const { archives } = useArchives()
 }
 
 .archive-title {
+  margin-top: 2rem;
   font-size: 18px;
   font-weight: 700;
-  margin-top: 2rem;
 }
 </style>
diff --git a/theme/src/client/components/AutoLink.vue b/theme/src/client/components/AutoLink.vue
index fc8f6191..db2ee1ce 100644
--- a/theme/src/client/components/AutoLink.vue
+++ b/theme/src/client/components/AutoLink.vue
@@ -46,10 +46,10 @@ function linkTo(e: Event) {
 <style scoped>
 .icon {
   display: inline-block;
-  margin-top: -1px;
-  margin-left: 4px;
   width: 11px;
   height: 11px;
+  margin-top: -1px;
+  margin-left: 4px;
   fill: var(--vp-c-text-3);
   transition: fill 0.25s;
 }
diff --git a/theme/src/client/components/BackToTop.vue b/theme/src/client/components/BackToTop.vue
index 7b2e6d77..f26bfbcf 100644
--- a/theme/src/client/components/BackToTop.vue
+++ b/theme/src/client/components/BackToTop.vue
@@ -38,7 +38,6 @@ const show = computed(() => {
     return y.value > windowHeight.value / 2
 })
 
-// eslint-disable-next-line no-undef
 let timer: NodeJS.Timeout | null = null
 function resetScrolling() {
   timer && clearTimeout(timer)
@@ -77,15 +76,15 @@ function handleClick() {
 <style scoped>
 .back-to-top-button {
   position: fixed;
+  inset-inline-end: 1rem;
   right: 20px;
   bottom: 64px;
   z-index: var(--vp-z-index-back-to-top);
   width: 36px;
   height: 36px;
+  background-color: var(--vp-c-bg);
   border-radius: 100%;
   box-shadow: var(--vp-shadow-2);
-  background-color: var(--vp-c-bg);
-  inset-inline-end: 1rem;
   transition:
     background-color 0.25s ease,
     box-shadow 0.25s ease;
@@ -96,8 +95,8 @@ function handleClick() {
   position: absolute;
   top: 0;
   left: 0;
-  transition: opacity 0.5s ease;
   opacity: 0;
+  transition: opacity 0.5s ease;
 }
 
 .back-to-top-button .percent.show,
@@ -108,19 +107,19 @@ function handleClick() {
 .back-to-top-button .percent {
   width: 100%;
   height: 100%;
-  user-select: none;
+  font-size: 10px;
   line-height: 36px;
   text-align: center;
-  font-size: 10px;
+  user-select: none;
 }
 
 .back-to-top-button .icon {
-  width: 18px;
-  height: 18px;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  width: 18px;
+  height: 18px;
   color: var(--vp-c-text-3);
+  transform: translate(-50%, -50%);
 }
 
 .back-to-top-button svg {
@@ -131,23 +130,24 @@ function handleClick() {
 .back-to-top-button svg circle {
   fill: none;
   stroke: var(--vp-c-brand-2);
+  stroke-dasharray: 0% 314.1593%;
+  stroke-width: 4px;
   transform: rotate(-90deg);
   transform-origin: 50% 50%;
   r: 16;
-  stroke-dasharray: 0% 314.1593%;
-  stroke-width: 4px;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .back-to-top-button {
     width: 48px;
     height: 48px;
   }
 
   .back-to-top-button .percent {
-    line-height: 48px;
     font-size: 14px;
+    line-height: 48px;
   }
+
   .back-to-top-button .icon {
     width: 24px;
     height: 24px;
diff --git a/theme/src/client/components/Backdrop.vue b/theme/src/client/components/Backdrop.vue
index 94bc0567..e1929bcb 100644
--- a/theme/src/client/components/Backdrop.vue
+++ b/theme/src/client/components/Backdrop.vue
@@ -14,10 +14,12 @@ defineProps<{
 .backdrop {
   position: fixed;
   top: 0;
-  /*rtl:ignore*/
+
+  /* rtl:ignore */
   right: 0;
   bottom: 0;
-  /*rtl:ignore*/
+
+  /* rtl:ignore */
   left: 0;
   z-index: var(--vp-z-index-backdrop);
   background: var(--vp-backdrop-bg-color);
@@ -33,7 +35,7 @@ defineProps<{
   transition-duration: 0.25s;
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .backdrop {
     display: none;
   }
diff --git a/theme/src/client/components/Blog.vue b/theme/src/client/components/Blog.vue
index 673a049f..8aedf412 100644
--- a/theme/src/client/components/Blog.vue
+++ b/theme/src/client/components/Blog.vue
@@ -26,18 +26,18 @@ const page = usePageData<PlumeThemePageData>()
   align-items: flex-start;
   justify-content: flex-start;
   width: 100%;
-  margin: 0 auto;
   padding-top: var(--vp-nav-height);
+  margin: 0 auto;
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .blog-wrapper {
     max-width: 784px;
     padding-top: 0;
   }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
   .blog-wrapper {
     max-width: 1104px;
   }
diff --git a/theme/src/client/components/BlogAside.vue b/theme/src/client/components/BlogAside.vue
index a16de9b3..0f03879e 100644
--- a/theme/src/client/components/BlogAside.vue
+++ b/theme/src/client/components/BlogAside.vue
@@ -40,12 +40,12 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   position: sticky;
   top: calc(var(--vp-nav-height) + 2rem);
   width: 270px;
-  margin-left: 2rem;
+  padding: 1rem 0;
   margin-top: 2rem;
   margin-bottom: 12rem;
-  border-left: solid 1px var(--vp-c-divider);
+  margin-left: 2rem;
   text-align: center;
-  padding: 1rem 0;
+  border-left: solid 1px var(--vp-c-divider);
 
   img {
     width: 50%;
@@ -53,24 +53,24 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   }
 
   h3 {
+    margin-top: 1.5rem;
     font-size: 16px;
     font-weight: 600;
-    margin-top: 1.5rem;
   }
 }
 
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .blog-aside-wrapper {
     display: none;
   }
 }
 
 .blog-nav {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
   padding: 10px 12px 0;
   margin: 24px 24px 0;
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
   border-top: solid 1px var(--vp-c-divider);
 }
 
@@ -79,18 +79,19 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   align-items: center;
   justify-content: center;
   padding: 3px;
-  color: var(--vp-c-brand-1);
   font-weight: 600;
+  color: var(--vp-c-brand-1);
   border-radius: 8px;
   transition: all var(--t-color);
 }
+
 .nav-link:hover {
   color: var(--vp-c-brand-2);
 }
 
 .nav-link .icon {
-  margin-right: 4px;
   width: 1em;
   height: 1em;
+  margin-right: 4px;
 }
 </style>
diff --git a/theme/src/client/components/BlogExtract.vue b/theme/src/client/components/BlogExtract.vue
index 364e0900..afa630c7 100644
--- a/theme/src/client/components/BlogExtract.vue
+++ b/theme/src/client/components/BlogExtract.vue
@@ -85,19 +85,19 @@ const showBlogExtract = computed(() => {
 
 <style scoped>
 .blog-extract {
-  display: block;
   position: fixed;
   right: 0;
   bottom: 30%;
+  z-index: calc(var(--vp-z-index-nav) - 1);
+  display: block;
   padding: 4px 10px;
-  border-top-left-radius: 99px;
-  border-bottom-left-radius: 99px;
+  cursor: pointer;
+  background-color: var(--vp-c-bg);
   border: solid 1px var(--vp-c-divider);
   border-right: none;
+  border-top-left-radius: 99px;
+  border-bottom-left-radius: 99px;
   box-shadow: var(--vp-shadow-2);
-  z-index: calc(var(--vp-z-index-nav) - 1);
-  background-color: var(--vp-c-bg);
-  cursor: pointer;
 }
 
 .blog-extract .icon {
@@ -105,7 +105,7 @@ const showBlogExtract = computed(() => {
   color: var(--vp-c-text-2);
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .blog-extract {
     display: none;
   }
@@ -124,8 +124,8 @@ const showBlogExtract = computed(() => {
   left: 0;
   z-index: var(--vp-z-index-overlay);
   width: 100%;
-  opacity: 1;
   background-color: rgba(0, 0, 0, 0.3);
+  opacity: 1;
 }
 
 .blog-modal.fade-enter-from,
@@ -149,8 +149,8 @@ const showBlogExtract = computed(() => {
   box-shadow:
     0 -3px 12px rgba(0, 0, 0, 0.1),
     0 -1px 4px rgba(0, 0, 0, 0.1);
-  transform: translateY(100%);
   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  transform: translateY(100%);
 }
 
 .dark .blog-modal-container {
@@ -182,11 +182,11 @@ const showBlogExtract = computed(() => {
 }
 
 .blog-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
   padding: 10px 0 0;
   margin: 24px 0 0;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
   border-top: solid 1px var(--vp-c-divider);
 }
 
@@ -194,15 +194,15 @@ const showBlogExtract = computed(() => {
   display: flex;
   align-items: center;
   padding: 3px;
-  color: var(--vp-c-brand-1);
   font-weight: 600;
+  color: var(--vp-c-brand-1);
   border-radius: 8px;
   transition: all var(--t-color);
 }
 
 .nav-link .icon {
-  margin-right: 4px;
   width: 1em;
   height: 1em;
+  margin-right: 4px;
 }
 </style>
diff --git a/theme/src/client/components/DocOutlineItem.vue b/theme/src/client/components/DocOutlineItem.vue
index 0cf328a3..16280089 100644
--- a/theme/src/client/components/DocOutlineItem.vue
+++ b/theme/src/client/components/DocOutlineItem.vue
@@ -36,13 +36,13 @@ function onClick({ target: el }: Event) {
 
 .outline-link {
   display: block;
+  overflow: hidden;
+  font-weight: 400;
   line-height: 28px;
   color: var(--vp-c-text-2);
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
   transition: color 0.5s;
-  font-weight: 400;
 }
 
 .outline-link:hover,
diff --git a/theme/src/client/components/Flyout/MenuGroup.vue b/theme/src/client/components/Flyout/MenuGroup.vue
index f430fb39..d62ea735 100644
--- a/theme/src/client/components/Flyout/MenuGroup.vue
+++ b/theme/src/client/components/Flyout/MenuGroup.vue
@@ -23,15 +23,15 @@ defineProps<{
 
 <style scoped>
 .menu-group {
+  padding: 12px 12px 0;
   margin: 12px -12px 0;
   border-top: 1px solid var(--vp-c-divider);
-  padding: 12px 12px 0;
 }
 
 .menu-group:first-child {
+  padding-top: 0;
   margin-top: 0;
   border-top: 0;
-  padding-top: 0;
 }
 
 .menu-group + .menu-group {
@@ -41,9 +41,9 @@ defineProps<{
 
 .title {
   padding: 0 12px;
-  line-height: 32px;
   font-size: 14px;
   font-weight: 600;
+  line-height: 32px;
   color: var(--vp-c-text-2);
   transition: color 0.25s;
 }
diff --git a/theme/src/client/components/Flyout/MenuLink.vue b/theme/src/client/components/Flyout/MenuLink.vue
index a50f24ee..dc423812 100644
--- a/theme/src/client/components/Flyout/MenuLink.vue
+++ b/theme/src/client/components/Flyout/MenuLink.vue
@@ -30,20 +30,20 @@ const page = usePageData()
 
 <style scoped>
 .menu-group + .menu-link {
+  padding: 12px 12px 0;
   margin: 12px -12px 0;
   border-top: 1px solid var(--vp-c-divider);
-  padding: 12px 12px 0;
 }
 
 .link {
   display: block;
-  border-radius: 6px;
   padding: 0 12px;
-  line-height: 32px;
   font-size: 14px;
   font-weight: 500;
+  line-height: 32px;
   color: var(--vp-c-text-1);
   white-space: nowrap;
+  border-radius: 6px;
   transition:
     background-color 0.25s,
     color 0.25s;
diff --git a/theme/src/client/components/Flyout/VMenu.vue b/theme/src/client/components/Flyout/VMenu.vue
index 6f49effc..1f38b792 100644
--- a/theme/src/client/components/Flyout/VMenu.vue
+++ b/theme/src/client/components/Flyout/VMenu.vue
@@ -27,25 +27,25 @@ defineProps<{
 
 <style scoped>
 .menu-wrapper {
-  border-radius: 12px;
-  padding: 12px;
   min-width: 128px;
-  border: 1px solid var(--vp-c-divider);
+  max-height: calc(100vh - var(--vp-nav-height));
+  padding: 12px;
+  overflow-y: auto;
   background-color: var(--vp-c-bg-elv);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
   box-shadow: var(--vp-shadow-3);
   transition: background-color 0.5s;
-  max-height: calc(100vh - var(--vp-nav-height));
-  overflow-y: auto;
 }
 
 .menu-wrapper :deep(.group) {
-  margin: 0 -12px;
   padding: 0 12px 12px;
+  margin: 0 -12px;
 }
 
 .menu-wrapper :deep(.group + .group) {
-  border-top: 1px solid var(--vp-c-divider);
   padding: 11px 12px 12px;
+  border-top: 1px solid var(--vp-c-divider);
 }
 
 .menu-wrapper :deep(.group:last-child) {
@@ -53,8 +53,8 @@ defineProps<{
 }
 
 .menu-wrapper :deep(.group + .item) {
-  border-top: 1px solid var(--vp-c-divider);
   padding: 11px 16px 0;
+  border-top: 1px solid var(--vp-c-divider);
 }
 
 .menu-wrapper :deep(.item) {
@@ -64,9 +64,9 @@ defineProps<{
 
 .menu-wrapper :deep(.label) {
   flex-grow: 1;
-  line-height: 28px;
   font-size: 12px;
   font-weight: 500;
+  line-height: 28px;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
 }
diff --git a/theme/src/client/components/Flyout/index.vue b/theme/src/client/components/Flyout/index.vue
index af98edc1..100bd434 100644
--- a/theme/src/client/components/Flyout/index.vue
+++ b/theme/src/client/components/Flyout/index.vue
@@ -90,17 +90,17 @@ export default {
 }
 
 .flyout-wrapper:hover .menu,
-.button[aria-expanded='true'] + .menu {
-  opacity: 1;
+.button[aria-expanded="true"] + .menu {
   visibility: visible;
+  opacity: 1;
   transform: translateY(0);
 }
 
 .button {
   display: flex;
   align-items: center;
-  padding: 0 12px;
   height: var(--vp-nav-height);
+  padding: 0 12px;
   color: var(--vp-c-text-1);
   transition: color 0.5s;
 }
@@ -108,32 +108,33 @@ export default {
 .text {
   display: flex;
   align-items: center;
-  /* line-height: var(--vp-nav-height); */
-  line-height: normal;
   font-size: 14px;
   font-weight: 500;
+
+  /* line-height: var(--vp-nav-height); */
+  line-height: normal;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
 }
 
 .option-icon {
-  margin-right: 0px;
   width: 16px;
   height: 16px;
-  fill: currentColor;
+  margin-right: 0;
+  fill: currentcolor;
 }
 
 .text-icon {
-  margin-left: 4px;
   width: 14px;
   height: 14px;
-  fill: currentColor;
+  margin-left: 4px;
+  fill: currentcolor;
 }
 
 .icon {
   width: 20px;
   height: 20px;
-  fill: currentColor;
+  fill: currentcolor;
   transition: fill 0.25s;
 }
 
@@ -141,8 +142,8 @@ export default {
   position: absolute;
   top: calc(var(--vp-nav-height) / 2 + 20px);
   right: 0;
-  opacity: 0;
   visibility: hidden;
+  opacity: 0;
   transition:
     opacity 0.25s,
     visibility 0.25s,
diff --git a/theme/src/client/components/Friends.vue b/theme/src/client/components/Friends.vue
index 0907e064..9d587460 100644
--- a/theme/src/client/components/Friends.vue
+++ b/theme/src/client/components/Friends.vue
@@ -37,66 +37,69 @@ const list = computed(() => matter.value.list || [])
 <style scoped>
 .friends-wrapper {
   width: 100%;
-  margin: 0 auto;
   padding-top: var(--vp-nav-height);
   padding-bottom: 5rem;
+  margin: 0 auto;
 }
 
 .friends-wrapper .title {
+  padding-top: 3rem;
+  padding-left: 1rem;
+  margin-bottom: 1rem;
   font-size: 24px;
   font-weight: 700;
   color: var(--vp-c-brand-1);
-  padding-left: 1rem;
-  padding-top: 3rem;
-  margin-bottom: 1rem;
   outline: none;
 }
 
 .friends-wrapper .description {
-  color: var(--vp-c-text-1);
   padding-left: 1rem;
   margin-bottom: 16px;
   line-height: 28px;
+  color: var(--vp-c-text-1);
 }
 
 .friends-list {
   display: grid;
   gap: 16px;
-  margin-top: 64px;
   padding: 0 16px;
+  margin-top: 64px;
 }
 
 .edit-link {
-  margin-top: 64px;
   padding-left: 1rem;
+  margin-top: 64px;
 }
 
-@media (min-width: 640px) {
+@media (width >= 640px) {
   .friends-wrapper .title,
   .friends-wrapper .description,
   .edit-link {
     padding-left: 0;
   }
+
   .friends-list {
-    padding: 0 16px;
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    padding: 0 16px;
   }
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .friends-wrapper {
     max-width: 784px;
     padding-top: 0;
   }
+
   .friends-list {
     padding: 0;
   }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
   .friends-wrapper {
     max-width: 1104px;
   }
+
   .friends-list {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -105,11 +108,11 @@ const list = computed(() => matter.value.list || [])
 .edit-link-button {
   display: flex;
   align-items: center;
-  border: 0;
-  line-height: 32px;
   font-size: 14px;
   font-weight: 500;
+  line-height: 32px;
   color: var(--vp-c-brand-1);
+  border: 0;
   transition: color 0.25s;
 }
 
@@ -118,9 +121,9 @@ const list = computed(() => matter.value.list || [])
 }
 
 .edit-link-icon {
-  margin-right: 8px;
   width: 14px;
   height: 14px;
-  fill: currentColor;
+  margin-right: 8px;
+  fill: currentcolor;
 }
 </style>
diff --git a/theme/src/client/components/FriendsItem.vue b/theme/src/client/components/FriendsItem.vue
index c2561ff9..c6fb11de 100644
--- a/theme/src/client/components/FriendsItem.vue
+++ b/theme/src/client/components/FriendsItem.vue
@@ -28,12 +28,12 @@ defineProps<{
   display: flex;
   align-items: flex-start;
   padding: 16px;
-  border-radius: 6px;
-  border: 1px solid var(--vp-friends-border-color);
   margin-bottom: 8px;
-  transition: all 0.25s;
   background-color: var(--vp-friends-bg-color);
+  border: 1px solid var(--vp-friends-border-color);
+  border-radius: 6px;
   box-shadow: var(--vp-shadow-1);
+  transition: all 0.25s;
 }
 
 .friend:hover {
@@ -48,35 +48,36 @@ defineProps<{
 .avatar {
   width: 64px;
   height: 64px;
-  border-radius: 100%;
-  background-size: cover;
   background-color: var(--vp-c-default-soft);
+  background-size: cover;
+  border-radius: 100%;
 }
+
 .content {
   flex: 1;
 }
 
 .content .title {
   display: block;
-  font-weight: 700;
-  font-size: 18px;
-  color: var(--vp-friends-link-color);
-  padding-left: 16px;
   padding-bottom: 8px;
-  margin-left: -16px;
+  padding-left: 16px;
   margin-bottom: 8px;
+  margin-left: -16px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--vp-friends-link-color);
   border-bottom: 1px dashed var(--vp-friends-border-color);
 }
 
 .content p {
+  display: -webkit-box;
+  padding-top: 8px;
+  overflow: hidden;
   font-size: 0.875rem;
   line-height: 1.5;
-  padding-top: 8px;
-  display: -webkit-box;
-  overflow: hidden;
+  color: var(--vp-friends-text-color);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   line-clamp: 3;
-  color: var(--vp-friends-text-color);
 }
 </style>
diff --git a/theme/src/client/components/Home.vue b/theme/src/client/components/Home.vue
index 222fe1f7..1a04305c 100644
--- a/theme/src/client/components/Home.vue
+++ b/theme/src/client/components/Home.vue
@@ -75,11 +75,11 @@ const actions = computed(() => {
 <style scoped>
 .plume-home {
   width: 100%;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
   min-height: calc(100vh - var(--vp-nav-height));
   filter: var(--vp-home-hero-image-filter);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
   transition: all var(--t-color);
 }
 
@@ -88,13 +88,13 @@ const actions = computed(() => {
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  margin: 0 auto;
   padding-top: 4rem;
+  margin: 0 auto;
 }
 
 .plume-home .content {
-  padding: 0 2rem;
   width: 100%;
+  padding: 0 2rem;
 }
 
 .plume-home .content .hero-name {
@@ -107,34 +107,36 @@ const actions = computed(() => {
 .plume-home .content .hero-tagline {
   display: flex;
   align-items: center;
+  margin-top: 1rem;
   font-size: 24px;
   font-weight: 500;
-  margin-top: 1rem;
-  color: var(--vp-c-text-hero-tagline);
   line-height: 1.25;
+  color: var(--vp-c-text-hero-tagline);
 }
 
 .plume-home .content .hero-tagline .line {
   display: inline-block;
   width: 80px;
   height: 0;
-  border-top: solid 1px var(--vp-c-text-hero-tagline);
   margin-right: 1rem;
+  border-top: solid 1px var(--vp-c-text-hero-tagline);
 }
 
 .plume-home .content .hero-text {
   width: 100%;
   max-width: 700px;
+  margin-top: 1.5rem;
   font-size: 16px;
   font-weight: 500;
-  margin-top: 1.5rem;
   color: var(--vp-c-text-hero-text);
+
   /* padding: 6px 20px; */
   border-radius: 5px;
+
   /* background-color: rgba(0, 0, 0, 0.25); */
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .plume-home .container {
     max-width: 768px;
     padding-top: 8rem;
@@ -145,7 +147,7 @@ const actions = computed(() => {
   }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
   .plume-home .container {
     max-width: 1104px;
     padding-top: 8rem;
@@ -159,8 +161,8 @@ const actions = computed(() => {
 .actions {
   display: flex;
   flex-wrap: wrap;
-  margin: -6px;
   padding-top: 24px;
+  margin: -6px;
 }
 
 .action {
diff --git a/theme/src/client/components/LayoutContent.vue b/theme/src/client/components/LayoutContent.vue
index aeabed94..590a09e8 100644
--- a/theme/src/client/components/LayoutContent.vue
+++ b/theme/src/client/components/LayoutContent.vue
@@ -22,8 +22,8 @@ const { hasSidebar } = useSidebar()
 .layout-content {
   flex-grow: 1;
   flex-shrink: 0;
-  margin: var(--vp-layout-top-height, 0px) auto 0;
   width: 100%;
+  margin: var(--vp-layout-top-height, 0) auto 0;
 }
 
 .layout-content.is-home {
@@ -35,23 +35,24 @@ const { hasSidebar } = useSidebar()
   margin: 0;
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .layout-content {
     padding-top: var(--vp-nav-height);
   }
 
   .layout-content.has-sidebar {
-    margin: var(--vp-layout-top-height, 0px) 0 0;
     padding-left: var(--vp-sidebar-width);
+    margin: var(--vp-layout-top-height, 0) 0 0;
   }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
   .layout-content.has-sidebar {
     padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
-    padding-left: calc(
-      (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
-    );
+    padding-left:
+      calc(
+        (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
+      );
   }
 }
 </style>
diff --git a/theme/src/client/components/LocalNav.vue b/theme/src/client/components/LocalNav.vue
index 29a4a7ca..6adb41fd 100644
--- a/theme/src/client/components/LocalNav.vue
+++ b/theme/src/client/components/LocalNav.vue
@@ -71,17 +71,18 @@ const showLocalNav = computed(() => {
 .local-nav {
   position: sticky;
   top: 0;
-  /*rtl:ignore*/
+
+  /* rtl:ignore */
   left: 0;
   z-index: var(--vp-z-index-local-nav);
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: var(--vp-layout-top-height, 0);
+  background-color: var(--vp-local-nav-bg-color);
   border-top: 1px solid var(--vp-c-gutter);
   border-bottom: 1px solid var(--vp-c-gutter);
-  padding-top: var(--vp-layout-top-height, 0px);
-  width: 100%;
-  background-color: var(--vp-local-nav-bg-color);
   transition:
     border-color 0.5s,
     background-color 0.5s;
@@ -95,7 +96,7 @@ const showLocalNav = computed(() => {
   border-top-color: transparent;
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .local-nav {
     display: none;
   }
@@ -111,9 +112,9 @@ const showLocalNav = computed(() => {
   display: flex;
   align-items: center;
   padding: 12px 24px 11px;
-  line-height: 24px;
   font-size: 12px;
   font-weight: 500;
+  line-height: 24px;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
 }
@@ -127,25 +128,25 @@ const showLocalNav = computed(() => {
   transition: color 0.25s;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .menu {
     padding: 0 32px;
   }
 }
 
 .menu-icon {
-  margin-right: 8px;
   width: 16px;
   height: 16px;
-  fill: currentColor;
+  margin-right: 8px;
+  fill: currentcolor;
 }
 
 .top-link {
   display: block;
   padding: 12px 24px 11px;
-  line-height: 24px;
   font-size: 12px;
   font-weight: 500;
+  line-height: 24px;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
 }
@@ -155,7 +156,7 @@ const showLocalNav = computed(() => {
   transition: color 0.25s;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .top-link {
     padding: 12px 32px 11px;
   }
diff --git a/theme/src/client/components/LocalNavOutlineDropdown.vue b/theme/src/client/components/LocalNavOutlineDropdown.vue
index d37c79c5..cc867e50 100644
--- a/theme/src/client/components/LocalNavOutlineDropdown.vue
+++ b/theme/src/client/components/LocalNavOutlineDropdown.vue
@@ -78,13 +78,13 @@ function scrollToTop() {
 }
 
 .local-nav-outline-dropdown button {
+  position: relative;
   display: block;
   font-size: 12px;
   font-weight: 500;
   line-height: 24px;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
-  position: relative;
 }
 
 .local-nav-outline-dropdown button:hover {
@@ -98,16 +98,16 @@ function scrollToTop() {
 
 .icon {
   display: inline-block;
-  vertical-align: middle;
-  margin-left: 2px;
   width: 14px;
   height: 14px;
-  fill: currentColor;
+  margin-left: 2px;
+  vertical-align: middle;
+  fill: currentcolor;
 }
 
 :deep(.outline-link) {
-  font-size: 14px;
   padding: 2px 0;
+  font-size: 14px;
 }
 
 .open > .icon {
@@ -121,11 +121,11 @@ function scrollToTop() {
   left: 16px;
   display: grid;
   gap: 1px;
-  border: 1px solid var(--vp-c-border);
-  border-radius: 8px;
-  background-color: var(--vp-c-gutter);
   max-height: calc(var(--vp-vh, 100vh) - 86px);
   overflow: hidden auto;
+  background-color: var(--vp-c-gutter);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 8px;
   box-shadow: var(--vp-shadow-3);
 }
 
@@ -136,9 +136,9 @@ function scrollToTop() {
 .top-link {
   display: block;
   padding: 0 16px;
-  line-height: 48px;
   font-size: 14px;
   font-weight: 500;
+  line-height: 48px;
   color: var(--vp-c-brand-1);
 }
 
diff --git a/theme/src/client/components/Nav/NavBar.vue b/theme/src/client/components/Nav/NavBar.vue
index 3e6e67f9..4f606d73 100644
--- a/theme/src/client/components/Nav/NavBar.vue
+++ b/theme/src/client/components/Nav/NavBar.vue
@@ -61,36 +61,36 @@ watchPostEffect(() => {
 <style scoped>
 .navbar-wrapper {
   position: relative;
-  border-bottom: 1px solid transparent;
-  padding: 0 8px 0 24px;
   height: var(--vp-nav-height);
-  pointer-events: none;
+  padding: 0 8px 0 24px;
   white-space: nowrap;
+  pointer-events: none;
+  border-bottom: 1px solid transparent;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .navbar-wrapper {
     padding: 0 32px;
   }
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .navbar-wrapper.has-sidebar {
     padding: 0;
   }
 
-  .navbar-wrapper:not(.has-sidebar):not(.top) {
-    border-bottom-color: var(--vp-c-gutter);
+  .navbar-wrapper:not(.has-sidebar, .top) {
     background-color: var(--vp-nav-bg-color);
+    border-bottom-color: var(--vp-c-gutter);
   }
 }
 
 .container {
   display: flex;
   justify-content: space-between;
-  margin: 0 auto;
   max-width: calc(var(--vp-layout-max-width) - 64px);
   height: var(--vp-nav-height);
+  margin: 0 auto;
   pointer-events: none;
 }
 
@@ -98,7 +98,7 @@ watchPostEffect(() => {
   pointer-events: auto;
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .navbar-wrapper.has-sidebar .container {
     max-width: 100%;
   }
@@ -110,29 +110,31 @@ watchPostEffect(() => {
   transition: background-color 0.5s;
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .navbar-wrapper.has-sidebar .title {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 2;
-    padding: 0 32px;
     width: var(--vp-sidebar-width);
     height: var(--vp-nav-height);
+    padding: 0 32px;
     background-color: transparent;
   }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
   .navbar-wrapper.has-sidebar .title {
-    padding-left: max(
-      32px,
-      calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
-    );
-    width: calc(
-      (100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
+    width:
+      calc(
+        (100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
         32px
-    );
+      );
+    padding-left:
+      max(
+        32px,
+        calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
+      );
   }
 }
 
@@ -140,7 +142,7 @@ watchPostEffect(() => {
   flex-grow: 1;
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .navbar-wrapper.has-sidebar .content {
     position: relative;
     z-index: 1;
@@ -149,31 +151,32 @@ watchPostEffect(() => {
   }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
   .navbar-wrapper.has-sidebar .content {
     padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
-    padding-left: calc(
-      (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
-    );
+    padding-left:
+      calc(
+        (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
+      );
   }
 }
 
 .content-body {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
   height: calc(var(--vp-nav-height) - 1px);
   transition: background-color 0.5s;
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .navbar-wrapper:not(.top) .content-body {
     position: relative;
     background-color: var(--vp-nav-bg-color);
   }
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .content-body {
     column-gap: 0.5rem;
   }
@@ -184,12 +187,12 @@ watchPostEffect(() => {
 .menu + .social-links::before,
 .translations + .appearance::before,
 .appearance + .social-links::before {
-  margin-right: 8px;
-  margin-left: 8px;
   width: 1px;
   height: 24px;
+  margin-right: 8px;
+  margin-left: 8px;
+  content: "";
   background-color: var(--vp-c-divider);
-  content: '';
 }
 
 .menu + .appearance::before,
@@ -205,7 +208,7 @@ watchPostEffect(() => {
   margin-right: -8px;
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .navbar-wrapper.has-sidebar .curtain {
     position: absolute;
     right: 0;
@@ -218,17 +221,18 @@ watchPostEffect(() => {
     display: block;
     width: 100%;
     height: 32px;
+    content: "";
     background: linear-gradient(var(--vp-c-bg), transparent 70%);
-    content: '';
   }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
   .navbar-wrapper.has-sidebar .curtain {
-    width: calc(
-      100% -
+    width:
+      calc(
+        100% -
         ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))
-    );
+      );
   }
 }
 </style>
diff --git a/theme/src/client/components/Nav/NavBarAppearance.vue b/theme/src/client/components/Nav/NavBarAppearance.vue
index b04ed1fd..05b8a8b4 100644
--- a/theme/src/client/components/Nav/NavBarAppearance.vue
+++ b/theme/src/client/components/Nav/NavBarAppearance.vue
@@ -16,7 +16,7 @@ const theme = useThemeLocaleData()
   display: none;
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .navbar-appearance {
     display: flex;
     align-items: center;
diff --git a/theme/src/client/components/Nav/NavBarExtra.vue b/theme/src/client/components/Nav/NavBarExtra.vue
index caf2a8f2..ddc824f4 100644
--- a/theme/src/client/components/Nav/NavBarExtra.vue
+++ b/theme/src/client/components/Nav/NavBarExtra.vue
@@ -55,13 +55,13 @@ const hasExtraContent = computed(
   margin-right: -12px;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .navbar-extra {
     display: block;
   }
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .navbar-extra {
     display: none;
   }
@@ -69,9 +69,9 @@ const hasExtraContent = computed(
 
 .trans-title {
   padding: 0 24px 0 12px;
-  line-height: 32px;
   font-size: 14px;
   font-weight: 700;
+  line-height: 32px;
   color: var(--vp-c-text-1);
 }
 
diff --git a/theme/src/client/components/Nav/NavBarHamburger.vue b/theme/src/client/components/Nav/NavBarHamburger.vue
index 45f6809b..708af8a0 100644
--- a/theme/src/client/components/Nav/NavBarHamburger.vue
+++ b/theme/src/client/components/Nav/NavBarHamburger.vue
@@ -27,13 +27,13 @@ defineEmits<(e: 'click') => void>()
 <style scoped>
 .navbar-hamburger {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   width: 48px;
   height: var(--vp-nav-height);
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .navbar-hamburger {
     display: none;
   }
diff --git a/theme/src/client/components/Nav/NavBarMenu.vue b/theme/src/client/components/Nav/NavBarMenu.vue
index 49dc1317..926b177e 100644
--- a/theme/src/client/components/Nav/NavBarMenu.vue
+++ b/theme/src/client/components/Nav/NavBarMenu.vue
@@ -25,7 +25,7 @@ const theme = useThemeLocaleData()
   display: none;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .navbar-menu {
     display: flex;
   }
diff --git a/theme/src/client/components/Nav/NavBarMenuLink.vue b/theme/src/client/components/Nav/NavBarMenuLink.vue
index 18b5ad47..89b21ff9 100644
--- a/theme/src/client/components/Nav/NavBarMenuLink.vue
+++ b/theme/src/client/components/Nav/NavBarMenuLink.vue
@@ -33,9 +33,9 @@ const page = usePageData()
   display: flex;
   align-items: center;
   padding: 0 12px;
-  line-height: var(--vp-nav-height);
   font-size: 14px;
   font-weight: 500;
+  line-height: var(--vp-nav-height);
   color: var(--vp-c-text-1);
   transition: color 0.25s;
 }
diff --git a/theme/src/client/components/Nav/NavBarSearch.vue b/theme/src/client/components/Nav/NavBarSearch.vue
index aeec97b6..7f9d459b 100644
--- a/theme/src/client/components/Nav/NavBarSearch.vue
+++ b/theme/src/client/components/Nav/NavBarSearch.vue
@@ -5,19 +5,14 @@
 </template>
 
 <style>
-.navbar-search {
-  display: flex;
-  align-items: center;
-}
-
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .navbar-search {
     flex-grow: 1;
     padding-left: 24px;
   }
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .navbar-search {
     padding-left: 32px;
   }
@@ -29,6 +24,51 @@
   }
 }
 
+@media (width >= 768px) {
+  .navbar-search .DocSearch-Button {
+    justify-content: flex-start;
+    width: 100%;
+    height: 40px;
+    padding: 0 10px 0 12px;
+    background-color: var(--vp-c-bg-alt);
+    border: 1px solid transparent;
+    border-radius: 8px;
+  }
+
+  .navbar-search .DocSearch-Button:hover {
+    background: var(--docsearch-searchbox-focus-background);
+    border-color: var(--vp-c-brand-1);
+  }
+}
+
+@media (width >= 768px) {
+  .DocSearch-Button .DocSearch-Search-Icon {
+    top: 1px;
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+    color: var(--vp-c-text-2);
+  }
+}
+
+@media (width >= 768px) {
+  .DocSearch-Button .DocSearch-Button-Placeholder {
+    display: inline-block;
+  }
+}
+
+@media (width >= 768px) {
+  .DocSearch-Button .DocSearch-Button-Keys {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.navbar-search {
+  display: flex;
+  align-items: center;
+}
+
 /* plugin-docsearch */
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1);
@@ -55,12 +95,12 @@
 
 .navbar-search .DocSearch-Button {
   display: flex;
-  justify-content: center !important;
   align-items: center;
-  margin: 0;
-  padding: 0;
+  justify-content: center !important;
   width: 32px;
   height: 32px;
+  padding: 0;
+  margin: 0;
   background: var(--docsearch-searchbox-background);
   transition: border-color 0.25s;
 }
@@ -82,23 +122,6 @@
   min-width: 32px;
 }
 
-@media (min-width: 768px) {
-  .navbar-search .DocSearch-Button {
-    justify-content: flex-start;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    padding: 0 10px 0 12px;
-    width: 100%;
-    height: 40px;
-    background-color: var(--vp-c-bg-alt);
-  }
-
-  .navbar-search .DocSearch-Button:hover {
-    border-color: var(--vp-c-brand-1);
-    background: var(--docsearch-searchbox-focus-background);
-  }
-}
-
 .DocSearch-Button .DocSearch-Button-Container {
   display: flex;
   align-items: center;
@@ -109,7 +132,7 @@
   width: 16px;
   height: 16px;
   color: var(--vp-c-text-1);
-  fill: currentColor;
+  fill: currentcolor;
   transition: color 0.5s;
 }
 
@@ -117,20 +140,10 @@
   color: var(--vp-c-text-1);
 }
 
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Search-Icon {
-    top: 1px;
-    margin-right: 8px;
-    width: 14px;
-    height: 14px;
-    color: var(--vp-c-text-2);
-  }
-}
-
 .DocSearch-Button .DocSearch-Button-Placeholder {
   display: none;
-  margin-top: 2px;
   padding: 0 16px 0 0;
+  margin-top: 2px;
   font-size: 13px;
   font-weight: 500;
   color: var(--vp-c-text-2);
@@ -141,67 +154,58 @@
   color: var(--vp-c-text-1);
 }
 
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Placeholder {
-    display: inline-block;
-  }
-}
-
 .DocSearch-Button .DocSearch-Button-Keys {
-  /*rtl:ignore*/
+  /* rtl:ignore */
   direction: ltr;
   display: none;
   min-width: auto;
 }
 
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Keys {
-    display: flex;
-    align-items: center;
-  }
-}
-
 .DocSearch-Button .DocSearch-Button-Key {
   display: block;
-  margin: 2px 0 0 0;
-  border: 1px solid var(--vp-c-divider);
-  /*rtl:begin:ignore*/
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  padding-left: 6px;
-  /*rtl:end:ignore*/
-  min-width: 0;
   width: auto;
+
+  /* rtl:end:ignore */
+  min-width: 0;
   height: 22px;
-  line-height: 22px;
+  padding-left: 6px;
+  margin: 2px 0 0;
   font-family: var(--vp-font-family-base);
   font-size: 12px;
   font-weight: 500;
+  line-height: 22px;
+  border: 1px solid var(--vp-c-divider);
+
+  /* rtl:begin:ignore */
+  border-right: none;
+  border-radius: 4px 0 0 4px;
   transition:
     color 0.5s,
     border-color 0.5s;
 }
 
 .DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
-  /*rtl:begin:ignore*/
+  padding-right: 6px;
+  padding-left: 2px;
+
+  /* rtl:begin:ignore */
   border-right: 1px solid var(--vp-c-divider);
   border-left: none;
   border-radius: 0 4px 4px 0;
-  padding-left: 2px;
-  padding-right: 6px;
-  /*rtl:end:ignore*/
+
+  /* rtl:end:ignore */
 }
 
 .DocSearch-Button .DocSearch-Button-Key:first-child {
   font-size: 1px;
-  letter-spacing: -12px;
   color: transparent;
+  letter-spacing: -12px;
 }
 
-.DocSearch-Button .DocSearch-Button-Key:first-child:after {
+.DocSearch-Button .DocSearch-Button-Key:first-child::after {
   font-size: 12px;
-  letter-spacing: normal;
   color: var(--docsearch-muted-color);
+  letter-spacing: normal;
 }
 
 .DocSearch-Button .DocSearch-Button-Key:first-child > * {
@@ -213,8 +217,8 @@
 }
 
 .DocSearch-Form {
-  border: 1px solid var(--vp-c-brand-1);
   background-color: var(--vp-c-white);
+  border: 1px solid var(--vp-c-brand-1);
 }
 
 .dark .DocSearch-Form {
@@ -228,5 +232,6 @@
   padding: 0 0.4rem 0 1.555rem;
   background-position: 0.5rem 0.4rem;
 }
+
 /* plugin-search */
 </style>
diff --git a/theme/src/client/components/Nav/NavBarSocialLinks.vue b/theme/src/client/components/Nav/NavBarSocialLinks.vue
index 9f1f494c..02c84746 100644
--- a/theme/src/client/components/Nav/NavBarSocialLinks.vue
+++ b/theme/src/client/components/Nav/NavBarSocialLinks.vue
@@ -18,7 +18,7 @@ const theme = useThemeLocaleData()
   display: none;
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .navbar-social-links {
     display: flex;
     align-items: center;
diff --git a/theme/src/client/components/Nav/NavBarTitle.vue b/theme/src/client/components/Nav/NavBarTitle.vue
index 7c3835bf..1846cf16 100644
--- a/theme/src/client/components/Nav/NavBarTitle.vue
+++ b/theme/src/client/components/Nav/NavBarTitle.vue
@@ -27,12 +27,12 @@ const { hasSidebar } = useSidebar()
 .title {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid transparent;
   width: 100%;
   height: var(--vp-nav-height);
   font-size: 16px;
   font-weight: 600;
   color: var(--vp-c-text-1);
+  border-bottom: 1px solid transparent;
   transition: opacity 0.25s;
 }
 
@@ -40,7 +40,7 @@ const { hasSidebar } = useSidebar()
   opacity: 0.6;
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .title {
     flex-shrink: 0;
   }
@@ -51,7 +51,7 @@ const { hasSidebar } = useSidebar()
 }
 
 :deep(.logo) {
-  margin-right: 8px;
   height: 24px;
+  margin-right: 8px;
 }
 </style>
diff --git a/theme/src/client/components/Nav/NavBarTranslations.vue b/theme/src/client/components/Nav/NavBarTranslations.vue
index c3b362f0..eebb752b 100644
--- a/theme/src/client/components/Nav/NavBarTranslations.vue
+++ b/theme/src/client/components/Nav/NavBarTranslations.vue
@@ -33,7 +33,7 @@ const { currentLang, localeLinks } = useLangs()
   display: none;
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .navbar-translations {
     display: flex;
     align-items: center;
@@ -42,9 +42,9 @@ const { currentLang, localeLinks } = useLangs()
 
 .title {
   padding: 0 24px 0 12px;
-  line-height: 32px;
   font-size: 14px;
   font-weight: 700;
+  line-height: 32px;
   color: var(--vp-c-text-1);
 }
 </style>
diff --git a/theme/src/client/components/Nav/NavScreen.vue b/theme/src/client/components/Nav/NavScreen.vue
index 26c7c3db..0af8d229 100644
--- a/theme/src/client/components/Nav/NavScreen.vue
+++ b/theme/src/client/components/Nav/NavScreen.vue
@@ -33,19 +33,18 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 <style scoped>
 .nav-screen {
   position: fixed;
-  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
-  /*rtl:ignore*/
-  right: 0;
-  bottom: 0;
-  /*rtl:ignore*/
-  left: 0;
-  padding: 0 32px;
+  inset: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) 0 0 0;
+
+  /* rtl:ignore */
+
+  /* rtl:ignore */
   width: 100%;
-  border-top: 1px solid var(--vp-c-divider);
-  background-color: var(--vp-nav-screen-bg-color);
+  padding: 0 32px;
   overflow-y: auto;
-  transition: background-color 0.5s;
   pointer-events: auto;
+  background-color: var(--vp-nav-screen-bg-color);
+  border-top: 1px solid var(--vp-c-divider);
+  transition: background-color 0.5s;
 }
 
 .nav-screen.fade-enter-active,
@@ -68,16 +67,16 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
   transform: translateY(-8px);
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .nav-screen {
     display: none;
   }
 }
 
 .container {
-  margin: 0 auto;
-  padding: 24px 0 96px;
   max-width: 288px;
+  padding: 24px 0 96px;
+  margin: 0 auto;
 }
 
 .menu + .translations,
diff --git a/theme/src/client/components/Nav/NavScreenAppearance.vue b/theme/src/client/components/Nav/NavScreenAppearance.vue
index 44bc85c2..e8a6553c 100644
--- a/theme/src/client/components/Nav/NavScreenAppearance.vue
+++ b/theme/src/client/components/Nav/NavScreenAppearance.vue
@@ -17,19 +17,19 @@ const theme = useThemeLocaleData()
 <style scoped>
 .nav-screen-appearance {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  border-radius: 8px;
+  justify-content: space-between;
   padding: 12px 14px 12px 16px;
   background-color: var(--vp-c-bg-soft);
+  border-radius: 8px;
   transition: var(--t-color);
   transition-property: background-color;
 }
 
 .text {
-  line-height: 24px;
   font-size: 12px;
   font-weight: 500;
+  line-height: 24px;
   color: var(--vp-c-text-2);
 }
 </style>
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroup.vue b/theme/src/client/components/Nav/NavScreenMenuGroup.vue
index f40608e3..b6f8803f 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroup.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuGroup.vue
@@ -60,9 +60,9 @@ function toggle() {
 
 <style scoped>
 .nav-screen-menu-group {
-  border-bottom: 1px solid var(--vp-c-divider);
   height: 48px;
   overflow: hidden;
+  border-bottom: 1px solid var(--vp-c-divider);
   transition: border-color 0.5s;
 }
 
@@ -75,8 +75,8 @@ function toggle() {
 }
 
 .nav-screen-menu-group.open {
-  padding-bottom: 10px;
   height: auto;
+  padding-bottom: 10px;
 }
 
 .nav-screen-menu-group.open .button {
@@ -85,19 +85,19 @@ function toggle() {
 }
 
 .nav-screen-menu-group.open .button-icon {
-  /*rtl:ignore*/
+  /* rtl:ignore */
   transform: rotate(45deg);
 }
 
 .button {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 12px 4px 11px 0;
+  justify-content: space-between;
   width: 100%;
-  line-height: 24px;
+  padding: 12px 4px 11px 0;
   font-size: 14px;
   font-weight: 500;
+  line-height: 24px;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
 }
@@ -120,7 +120,7 @@ function toggle() {
 }
 
 .group:first-child {
-  padding-top: 0px;
+  padding-top: 0;
 }
 
 .group + .group,
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue b/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
index e3b22b1a..904ff0c1 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
@@ -26,9 +26,9 @@ const closeScreen = inject('close-screen') as () => void
 .nav-screen-menu-group-link {
   display: block;
   margin-left: 12px;
-  line-height: 32px;
   font-size: 14px;
   font-weight: 400;
+  line-height: 32px;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
 }
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue b/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
index 16d2d6af..6cc42bbd 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
@@ -31,9 +31,9 @@ defineProps<{
 }
 
 .title {
-  line-height: 32px;
   font-size: 13px;
   font-weight: 700;
+  line-height: 32px;
   color: var(--vp-c-text-2);
   transition: color 0.25s;
 }
diff --git a/theme/src/client/components/Nav/NavScreenMenuLink.vue b/theme/src/client/components/Nav/NavScreenMenuLink.vue
index e7e6522c..bdf73c8d 100644
--- a/theme/src/client/components/Nav/NavScreenMenuLink.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuLink.vue
@@ -21,12 +21,12 @@ const closeScreen = inject('close-screen') as () => void
 <style scoped>
 .nav-screen-menu-link {
   display: block;
-  border-bottom: 1px solid var(--vp-c-divider);
   padding: 12px 0 11px;
-  line-height: 24px;
   font-size: 14px;
   font-weight: 500;
+  line-height: 24px;
   color: var(--vp-c-text-1);
+  border-bottom: 1px solid var(--vp-c-divider);
   transition:
     border-color 0.25s,
     color 0.25s;
diff --git a/theme/src/client/components/Nav/NavScreenTranslations.vue b/theme/src/client/components/Nav/NavScreenTranslations.vue
index d1b62279..5bfa12d7 100644
--- a/theme/src/client/components/Nav/NavScreenTranslations.vue
+++ b/theme/src/client/components/Nav/NavScreenTranslations.vue
@@ -56,7 +56,7 @@ function toggle() {
 .icon {
   width: 16px;
   height: 16px;
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .icon.lang {
@@ -72,8 +72,8 @@ function toggle() {
 }
 
 .link {
-  line-height: 32px;
   font-size: 13px;
+  line-height: 32px;
   color: var(--vp-c-text-1);
 }
 </style>
diff --git a/theme/src/client/components/Nav/index.vue b/theme/src/client/components/Nav/index.vue
index d20b7ecb..ca2a4586 100644
--- a/theme/src/client/components/Nav/index.vue
+++ b/theme/src/client/components/Nav/index.vue
@@ -29,8 +29,9 @@ provide('close-screen', closeScreen)
 <style scoped>
 .nav-wrapper {
   position: relative;
-  top: var(--vp-layout-top-height, 0px);
-  /*rtl:ignore*/
+  top: var(--vp-layout-top-height, 0);
+
+  /* rtl:ignore */
   left: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;
@@ -43,11 +44,11 @@ provide('close-screen', closeScreen)
 }
 
 .nav-wrapper.fixed :deep(.navbar-wrapper) {
-  border-bottom-color: var(--vp-c-gutter);
   background-color: var(--vp-nav-bg-color);
+  border-bottom-color: var(--vp-c-gutter);
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .nav-wrapper {
     position: fixed;
   }
diff --git a/theme/src/client/components/Page.vue b/theme/src/client/components/Page.vue
index b070c51d..d65c4c6a 100644
--- a/theme/src/client/components/Page.vue
+++ b/theme/src/client/components/Page.vue
@@ -55,26 +55,17 @@ onContentUpdated(() => zoom?.refresh())
 </template>
 
 <style scoped>
-.plume-page {
-  position: relative;
-  display: flex;
-}
-.plume-page {
-  padding: 32px 24px 96px;
-  width: 100%;
-}
-
 /* .plume-page.is-blog {
   padding-top: calc(var(--vp-nav-height) + 32px);
 } */
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .plume-page {
     padding: 48px 32px 128px;
   }
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .plume-page,
   .plume-page.is-blog {
     padding: 32px 32px 0;
@@ -91,7 +82,7 @@ onContentUpdated(() => zoom?.refresh())
   }
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .plume-page .container {
     display: flex;
     justify-content: center;
@@ -102,7 +93,7 @@ onContentUpdated(() => zoom?.refresh())
   }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
   .plume-page:not(.has-sidebar) .content {
     max-width: 784px;
   }
@@ -112,33 +103,58 @@ onContentUpdated(() => zoom?.refresh())
   }
 }
 
-.container {
-  margin: 0 auto;
+@media (width >= 960px) {
+  .content {
+    padding: 0 32px 128px;
+  }
+}
+
+@media (width >= 1280px) {
+  .content {
+    order: 1;
+    min-width: 640px;
+    margin: 0;
+  }
+}
+
+.plume-page {
+  position: relative;
+  display: flex;
+}
+
+.plume-page {
   width: 100%;
+  padding: 32px 24px 96px;
+}
+
+.container {
+  width: 100%;
+  margin: 0 auto;
 }
 
 .aside {
   position: relative;
   display: none;
-  order: 2;
   flex-grow: 1;
-  padding-left: 32px;
+  order: 2;
   width: 100%;
   max-width: 256px;
+  padding-left: 32px;
 }
 
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc(
-    (var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1 - 32px
-  );
-  padding-top: calc(
-    var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px
-  );
   height: 100vh;
-  overflow-x: hidden;
-  overflow-y: auto;
+  padding-top:
+    calc(
+      var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px
+    );
+  margin-top:
+    calc(
+      (var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1 - 32px
+    );
+  overflow: hidden auto;
   scrollbar-width: none;
 }
 
@@ -158,30 +174,17 @@ onContentUpdated(() => zoom?.refresh())
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(
-    100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px)
-  );
+  min-height:
+    calc(
+      100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px)
+    );
   padding-bottom: 32px;
 }
 
 .content {
   position: relative;
-  margin: 0 auto;
   width: 100%;
-}
-
-@media (min-width: 960px) {
-  .content {
-    padding: 0 32px 128px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .content {
-    order: 1;
-    margin: 0;
-    min-width: 640px;
-  }
+  margin: 0 auto;
 }
 
 .content-container {
diff --git a/theme/src/client/components/PageAside.vue b/theme/src/client/components/PageAside.vue
index 9dcce554..2dba8b46 100644
--- a/theme/src/client/components/PageAside.vue
+++ b/theme/src/client/components/PageAside.vue
@@ -81,10 +81,10 @@ function handlePrint() {
 
 .content {
   position: relative;
-  border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
   font-size: 13px;
   font-weight: 500;
+  border-left: 1px solid var(--vp-c-divider);
 }
 
 .outline-marker {
@@ -92,10 +92,10 @@ function handlePrint() {
   top: 32px;
   left: -1px;
   z-index: 0;
-  opacity: 0;
   width: 2px;
   height: 18px;
   background-color: var(--vp-c-brand-1);
+  opacity: 0;
   transition:
     top 0.25s cubic-bezier(0, 1, 0.5, 1),
     background-color 0.5s,
@@ -105,15 +105,16 @@ function handlePrint() {
 .outline-title {
   display: flex;
   align-items: center;
-  letter-spacing: 0.4px;
-  line-height: 28px;
   font-size: 13px;
   font-weight: 600;
+  line-height: 28px;
+  letter-spacing: 0.4px;
 }
+
 .outline-title .icon {
-  margin-left: 4px;
   width: 1em;
   height: 1em;
+  margin-left: 4px;
   font-size: 1.2em;
   cursor: pointer;
 }
diff --git a/theme/src/client/components/PageAsideItem.vue b/theme/src/client/components/PageAsideItem.vue
index b9257d11..6b38b293 100644
--- a/theme/src/client/components/PageAsideItem.vue
+++ b/theme/src/client/components/PageAsideItem.vue
@@ -31,11 +31,11 @@ defineProps<{
 
 .outline-link {
   display: block;
+  overflow: hidden;
   line-height: 28px;
   color: var(--vp-c-text-2);
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
   transition: color 0.5s;
 }
 
diff --git a/theme/src/client/components/PageFooter.vue b/theme/src/client/components/PageFooter.vue
index e5426294..55ca9828 100644
--- a/theme/src/client/components/PageFooter.vue
+++ b/theme/src/client/components/PageFooter.vue
@@ -76,11 +76,11 @@ const showFooter = computed(() => {
   margin-top: 96px;
 }
 
-@media (min-width: 640px) {
+@media (width >= 640px) {
   .edit-info {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     padding-bottom: 6px;
   }
 }
@@ -88,11 +88,11 @@ const showFooter = computed(() => {
 .edit-link-button {
   display: flex;
   align-items: center;
-  border: 0;
-  line-height: 32px;
   font-size: 14px;
   font-weight: 500;
+  line-height: 32px;
   color: var(--vp-c-brand-1);
+  border: 0;
   transition: color 0.25s;
 }
 
@@ -107,36 +107,36 @@ const showFooter = computed(() => {
 }
 
 .edit-link-icon {
-  margin-right: 8px;
   width: 14px;
   height: 14px;
-  fill: currentColor;
+  margin-right: 8px;
+  fill: currentcolor;
 }
 
 .last-updated-text {
-  line-height: 24px;
   font-size: 14px;
   font-weight: 500;
+  line-height: 24px;
   color: var(--vp-c-text-2);
 }
 
-@media (min-width: 640px) {
+@media (width >= 640px) {
   .last-updated-text {
-    line-height: 32px;
     font-size: 14px;
     font-weight: 500;
+    line-height: 32px;
   }
 }
 
 .contributors {
-  margin-top: -10px;
   padding-bottom: 6px;
-  line-height: 32px;
+  margin-top: -10px;
   font-size: 14px;
+  line-height: 32px;
   text-align: left;
 }
 
-@media (min-width: 640px) {
+@media (width >= 640px) {
   .contributors {
     text-align: right;
   }
@@ -150,20 +150,21 @@ const showFooter = computed(() => {
 
 .contributors-info {
   color: var(--vp-c-text-2);
+
   .contributor {
     color: var(--vp-c-text-3);
   }
 }
 
 .prev-next {
-  border-top: 1px solid var(--vp-c-divider);
-  margin-top: 10px;
-  padding-top: 24px;
   display: grid;
   grid-row-gap: 8px;
+  padding-top: 24px;
+  margin-top: 10px;
+  border-top: 1px solid var(--vp-c-divider);
 }
 
-@media (min-width: 640px) {
+@media (width >= 640px) {
   .prev-next {
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 16px;
@@ -172,11 +173,11 @@ const showFooter = computed(() => {
 
 .pager-link {
   display: block;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 11px 16px 13px;
   width: 100%;
   height: 100%;
+  padding: 11px 16px 13px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
   transition: border-color 0.25s;
 }
 
@@ -191,17 +192,17 @@ const showFooter = computed(() => {
 
 .desc {
   display: block;
-  line-height: 20px;
   font-size: 12px;
   font-weight: 500;
+  line-height: 20px;
   color: var(--vp-c-text-2);
 }
 
 .title {
   display: block;
-  line-height: 20px;
   font-size: 14px;
   font-weight: 500;
+  line-height: 20px;
   color: var(--vp-c-brand-1);
   transition: color 0.25s;
 }
diff --git a/theme/src/client/components/PageMeta.vue b/theme/src/client/components/PageMeta.vue
index ff9f9b7d..04dc00db 100644
--- a/theme/src/client/components/PageMeta.vue
+++ b/theme/src/client/components/PageMeta.vue
@@ -72,11 +72,11 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
 
 <style scoped>
 .page-category-wrapper {
+  padding-left: 1rem;
+  margin-bottom: 2rem;
   font-size: 16px;
   font-weight: 400;
-  margin-bottom: 2rem;
   border-left: solid 4px var(--vp-c-brand-1);
-  padding-left: 1rem;
 }
 
 .page-category-wrapper .category {
@@ -94,23 +94,24 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
 }
 
 .page-title {
+  margin-bottom: 1rem;
   font-size: 28px;
   font-weight: 600;
-  margin-bottom: 1rem;
 }
 
 .page-title.padding {
   padding-bottom: 4rem;
 }
+
 .page-meta-wrapper {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
-  flex-wrap: wrap;
   padding: 1rem 0 0.5rem;
   margin-bottom: 2rem;
-  color: var(--vp-c-text-3);
   font-size: 14px;
+  color: var(--vp-c-text-3);
   border-bottom: solid 1px var(--vp-c-divider);
 }
 
@@ -128,8 +129,8 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
 
 .page-meta-wrapper .tag {
   display: inline-block;
+  padding: 3px;
   line-height: 1;
-  padding: 3px 3px;
   color: var(--vp-c-text-2);
   background-color: var(--vp-c-mute);
   border-radius: 4px;
@@ -149,9 +150,9 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
 
 .page-meta-wrapper .create-time {
   flex: 1;
-  min-width: 110px;
   justify-content: right;
-  text-align: right;
+  min-width: 110px;
   margin-right: 0;
+  text-align: right;
 }
 </style>
diff --git a/theme/src/client/components/PostItem.vue b/theme/src/client/components/PostItem.vue
index ae0a69fe..a85070e3 100644
--- a/theme/src/client/components/PostItem.vue
+++ b/theme/src/client/components/PostItem.vue
@@ -65,6 +65,12 @@ const createTime = computed(() => {
 .post-item {
   padding-top: 1rem;
   margin: 0 1.75rem 2rem;
+
+  @media (width >= 960px) {
+    h3 {
+      font-size: 20px;
+    }
+  }
   // border-bottom: solid 1px var(--vp-c-divider);
 
   &:last-of-type {
@@ -74,10 +80,10 @@ const createTime = computed(() => {
   h3 {
     display: flex;
     align-items: center;
+    margin-bottom: 0.75rem;
     font-size: 18px;
     font-weight: 600;
     transition: color var(--t-color);
-    margin-bottom: 0.75rem;
   }
 
   h3:hover {
@@ -88,34 +94,28 @@ const createTime = computed(() => {
     }
   }
 
-  @media (min-width: 960px) {
-    h3 {
-      font-size: 20px;
-    }
-  }
-
   .sticky {
     display: inline-block;
-    font-weight: 600;
     padding: 3px 6px;
     margin-left: 0.5rem;
-    border-radius: 4px;
-    line-height: 1;
     font-size: 13px;
+    font-weight: 600;
+    line-height: 1;
     color: var(--vp-c-text-2);
     background-color: var(--vp-c-default-soft);
+    border-radius: 4px;
   }
 }
 
 .post-meta {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
-  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
   font-size: 14px;
   font-weight: 400;
   color: var(--vp-c-text-2);
-  margin-bottom: 0.5rem;
 
   > div {
     display: flex;
@@ -148,9 +148,11 @@ const createTime = computed(() => {
 .plume-content :deep(p) {
   margin: 0.5rem 0;
 }
+
 .plume-content :deep(p:first-of-type) {
   margin-top: 0;
 }
+
 .plume-content :deep(p:last-of-type) {
   margin-bottom: 0;
 }
diff --git a/theme/src/client/components/PostList.vue b/theme/src/client/components/PostList.vue
index 2b90265c..968d7304 100644
--- a/theme/src/client/components/PostList.vue
+++ b/theme/src/client/components/PostList.vue
@@ -31,8 +31,8 @@ const {
 
 <style scoped>
 .post-list {
-  padding-top: 2rem;
   flex: 1;
+  padding-top: 2rem;
 }
 
 .pagination {
@@ -43,10 +43,10 @@ const {
 }
 
 .btn {
-  color: var(--vp-c-brand-1);
-  font-weight: 500;
-  border: 1px solid var(--vp-c-brand-1);
   padding: 0 4px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  border: 1px solid var(--vp-c-brand-1);
   border-radius: 4px;
   transition: all var(--t-color);
 }
@@ -56,16 +56,17 @@ const {
   background-color: var(--vp-c-brand-2);
   border-color: var(--vp-c-brand-2);
 }
+
 .btn[disabled],
 .btn[disabled]:hover {
   color: var(--vp-c-gray-1);
-  border-color: var(--vp-c-divider);
-  background-color: transparent;
   cursor: not-allowed;
+  background-color: transparent;
+  border-color: var(--vp-c-divider);
 }
 
 .page-info {
-  color: var(--vp-c-text-3);
   font-weight: 500;
+  color: var(--vp-c-text-3);
 }
 </style>
diff --git a/theme/src/client/components/ShortPostList.vue b/theme/src/client/components/ShortPostList.vue
index 51bb5568..9b835b57 100644
--- a/theme/src/client/components/ShortPostList.vue
+++ b/theme/src/client/components/ShortPostList.vue
@@ -25,8 +25,8 @@ defineProps<{
 
 <style scoped>
 .post-list {
-  margin-top: 32px;
   padding: 0 12px;
+  margin-top: 32px;
 }
 
 .post-list li {
@@ -38,12 +38,12 @@ defineProps<{
 }
 
 .post-list .post-title {
+  display: -webkit-box;
   flex: 1;
   margin-right: 14px;
+  overflow: hidden;
   font-weight: 600;
   transition: all var(--t-color);
-  display: -webkit-box;
-  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
@@ -57,6 +57,7 @@ defineProps<{
 .post-list li:hover .post-title {
   color: var(--vp-c-brand-1);
 }
+
 .post-list li:hover .post-time {
   color: var(--vp-c-text-2);
 }
diff --git a/theme/src/client/components/Sidebar.vue b/theme/src/client/components/Sidebar.vue
index 91789ccc..0e1e25b7 100644
--- a/theme/src/client/components/Sidebar.vue
+++ b/theme/src/client/components/Sidebar.vue
@@ -58,74 +58,75 @@ watch(
 <style scoped>
 .sidebar-wrapper {
   position: fixed;
-  top: var(--vp-layout-top-height, 0px);
+  top: var(--vp-layout-top-height, 0);
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);
-  padding: 32px 32px 96px;
   width: calc(100vw - 64px);
   max-width: 320px;
+  padding: 32px 32px 96px;
+  overflow: hidden auto;
   background-color: var(--vp-sidebar-bg-color);
-  opacity: 0;
   box-shadow: var(--vp-c-shadow-3);
-  overflow-x: hidden;
-  overflow-y: auto;
-  transform: translateX(-100%);
+  opacity: 0;
   transition:
     opacity 0.5s,
     transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  transform: translateX(-100%);
 }
 
 .sidebar-wrapper.open {
-  opacity: 1;
   visibility: visible;
-  transform: translateX(0);
+  opacity: 1;
   transition:
     opacity 0.25s,
     transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  transform: translateX(0);
 }
 
 .dark .sidebar-wrapper {
   box-shadow: var(--vp-shadow-1);
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .sidebar-wrapper {
     z-index: 1;
-    padding-top: var(--vp-nav-height);
     width: var(--vp-sidebar-width);
     max-width: 100%;
-    background-color: var(--vp-sidebar-bg-color);
-    opacity: 1;
+    padding-top: var(--vp-nav-height);
     visibility: visible;
+    background-color: var(--vp-sidebar-bg-color);
     box-shadow: none;
+    opacity: 1;
     transform: translateX(0);
   }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
   .sidebar-wrapper {
-    padding-left: max(
-      32px,
-      calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
-    );
-    width: calc(
-      (100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
+    width:
+      calc(
+        (100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
         32px
-    );
+      );
+    padding-left:
+      max(
+        32px,
+        calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
+      );
   }
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .curtain {
     position: sticky;
     top: -64px;
     left: 0;
     z-index: 1;
+    height: var(--vp-nav-height);
     margin-top: calc(var(--vp-nav-height) * -1);
     margin-right: -32px;
     margin-left: -32px;
-    height: var(--vp-nav-height);
     background-color: var(--vp-sidebar-bg-color);
   }
 }
@@ -135,14 +136,14 @@ watch(
 }
 
 .group + .group {
-  border-top: 1px solid var(--vp-c-divider);
   padding-top: 10px;
+  border-top: 1px solid var(--vp-c-divider);
 }
 
-@media (min-width: 960px) {
+@media (width >= 960px) {
   .group {
-    padding-top: 10px;
     width: calc(var(--vp-sidebar-width) - 64px);
+    padding-top: 10px;
   }
 }
 </style>
diff --git a/theme/src/client/components/SidebarItem.vue b/theme/src/client/components/SidebarItem.vue
index 1ca964f2..28d98cdb 100644
--- a/theme/src/client/components/SidebarItem.vue
+++ b/theme/src/client/components/SidebarItem.vue
@@ -147,8 +147,8 @@ function onCaretClick() {
 .text {
   flex-grow: 1;
   padding: 4px 0;
-  line-height: 24px;
   font-size: 14px;
+  line-height: 24px;
   transition: color 0.25s;
 }
 
@@ -195,11 +195,11 @@ function onCaretClick() {
 
 .caret {
   display: flex;
-  justify-content: center;
   align-items: center;
-  margin-right: -7px;
+  justify-content: center;
   width: 32px;
   height: 32px;
+  margin-right: -7px;
   color: var(--vp-c-text-3);
   cursor: pointer;
   transition: color 0.25s;
@@ -216,9 +216,9 @@ function onCaretClick() {
 .caret-icon {
   width: 18px;
   height: 18px;
-  fill: currentColor;
-  transform: rotate(90deg);
+  fill: currentcolor;
   transition: transform 0.25s;
+  transform: rotate(90deg);
 }
 
 .sidebar-item.collapsed .caret-icon {
@@ -230,8 +230,8 @@ function onCaretClick() {
 .sidebar-item.level-3 .items,
 .sidebar-item.level-4 .items,
 .sidebar-item.level-5 .items {
-  border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
+  border-left: 1px solid var(--vp-c-divider);
 }
 
 .sidebar-item.collapsed .items {
diff --git a/theme/src/client/components/SkipLink.vue b/theme/src/client/components/SkipLink.vue
index a4eb6070..b9c73e00 100644
--- a/theme/src/client/components/SkipLink.vue
+++ b/theme/src/client/components/SkipLink.vue
@@ -44,25 +44,25 @@ function focusOnTargetAnchor({ target }: Event) {
 .skip-link {
   top: 8px;
   left: 8px;
-  padding: 8px 16px;
   z-index: 999;
-  border-radius: 8px;
+  padding: 8px 16px;
   font-size: 12px;
   font-weight: bold;
-  text-decoration: none;
   color: var(--vp-c-brand-1);
-  box-shadow: var(--vp-shadow-3);
+  text-decoration: none;
   background-color: var(--vp-c-bg);
+  border-radius: 8px;
+  box-shadow: var(--vp-shadow-3);
 }
 
 .skip-link:focus {
-  height: auto;
   width: auto;
+  height: auto;
   clip: auto;
   clip-path: none;
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .skip-link {
     top: 14px;
     left: 16px;
diff --git a/theme/src/client/components/SocialLink.vue b/theme/src/client/components/SocialLink.vue
index 0fe81894..fb866493 100644
--- a/theme/src/client/components/SocialLink.vue
+++ b/theme/src/client/components/SocialLink.vue
@@ -29,8 +29,8 @@ const svg = computed(() => {
 <style scoped>
 .social-link {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   width: 36px;
   height: 36px;
   color: var(--vp-c-text-2);
@@ -45,6 +45,6 @@ const svg = computed(() => {
 .social-link > :deep(svg) {
   width: 20px;
   height: 20px;
-  fill: currentColor;
+  fill: currentcolor;
 }
 </style>
diff --git a/theme/src/client/components/Switch.vue b/theme/src/client/components/Switch.vue
index 6d997e03..05eba422 100644
--- a/theme/src/client/components/Switch.vue
+++ b/theme/src/client/components/Switch.vue
@@ -11,13 +11,13 @@
 <style scoped>
 .switch-wrapper {
   position: relative;
-  border-radius: 11px;
   display: block;
+  flex-shrink: 0;
   width: 40px;
   height: 22px;
-  flex-shrink: 0;
-  border: 1px solid var(--vp-input-border-color);
   background-color: var(--vp-input-switch-bg-color);
+  border: 1px solid var(--vp-input-border-color);
+  border-radius: 11px;
   transition:
     border-color 0.25s ease,
     background-color 0.25s ease;
@@ -30,12 +30,13 @@
 .check {
   position: absolute;
   top: 1px;
-  /*rtl:ignore*/
+
+  /* rtl:ignore */
   left: 1px;
   width: 18px;
   height: 18px;
-  border-radius: 50%;
   background-color: var(--vp-c-neutral-inverse);
+  border-radius: 50%;
   box-shadow: var(--vp-shadow-1);
   transition: transform 0.25s;
 }
@@ -45,8 +46,8 @@
   display: block;
   width: 18px;
   height: 18px;
-  border-radius: 50%;
   overflow: hidden;
+  border-radius: 50%;
 }
 
 .icon :deep(svg) {
diff --git a/theme/src/client/components/SwitchAppearance.vue b/theme/src/client/components/SwitchAppearance.vue
index ff806a06..4d1b047b 100644
--- a/theme/src/client/components/SwitchAppearance.vue
+++ b/theme/src/client/components/SwitchAppearance.vue
@@ -69,7 +69,6 @@ function useAppearance() {
     checked.value = dark
     classList[dark ? 'add' : 'remove']('dark')
 
-    // eslint-disable-next-line no-unused-vars
     const _ = window.getComputedStyle(css).opacity
     document.head.removeChild(css)
   }
@@ -112,7 +111,7 @@ watch(checked, (newIsDark) => {
 }
 
 .dark .switch-appearance :deep(.check) {
-  /*rtl:ignore*/
+  /* rtl:ignore */
   transform: translateX(18px);
 }
 </style>
diff --git a/theme/src/client/components/Tags.vue b/theme/src/client/components/Tags.vue
index 26a0d738..1e4a8e8e 100644
--- a/theme/src/client/components/Tags.vue
+++ b/theme/src/client/components/Tags.vue
@@ -37,69 +37,75 @@ const { tags: tagsLink } = useBlogExtract()
 
 <style scoped>
 .tags-wrapper {
-  padding: 32px 24px 168px;
   flex: 1;
+  padding: 32px 24px 168px;
 }
 
 .tags-wrapper.has-list {
   padding-bottom: 64px;
 }
+
 .tags-title {
   display: flex;
   align-items: center;
+  margin-bottom: 20px;
   font-size: 20px;
   font-weight: 700;
   color: var(--vp-c-brand-1);
-  margin-bottom: 20px;
 }
+
 .tags-title .icon {
   width: 1em;
   height: 1em;
   margin-right: 8px;
 }
+
 .tags {
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
   align-items: center;
+  justify-content: flex-start;
 }
+
 .tags .tag {
   display: flex;
   align-items: center;
-  word-wrap: break-word;
-  margin: 8px;
   padding: 6px 6px 6px 10px;
+  margin: 8px;
+  line-height: 1;
+
   /* background-color: var(--vp-c-default-soft); */
+
   /* color: var(--vp-c-text-2); */
   color: var(--vp-tag-color);
-  border: solid 1px var(--vp-tag-color);
-  line-height: 1;
-  border-radius: 4px;
+  word-wrap: break-word;
   cursor: pointer;
+  border: solid 1px var(--vp-tag-color);
+  border-radius: 4px;
   transition: all var(--t-color);
 }
 
 .tag-title {
+  padding-bottom: 8px;
+  margin: 20px 12px -10px;
   font-size: 20px;
   font-weight: 600;
   border-bottom: 1px solid var(--vp-c-divider);
-  padding-bottom: 8px;
-  margin: 20px 12px -10px 12px;
 }
 
 .tag-count {
   display: inline-block;
-  border-left: 1px solid var(--vp-tag-color);
   padding-left: 6px;
   margin-left: 4px;
   color: var(--vp-tag-color);
+  border-left: 1px solid var(--vp-tag-color);
   transition: all var(--t-color);
 }
 
 .tags .tag:hover,
 .tags .tag.active {
-  background-color: var(--vp-tag-color);
   color: var(--vp-c-bg);
+  background-color: var(--vp-tag-color);
 }
 
 .tags .tag:hover .tag-count,
diff --git a/theme/src/client/components/VButton.vue b/theme/src/client/components/VButton.vue
index 3b902243..eb394f9f 100644
--- a/theme/src/client/components/VButton.vue
+++ b/theme/src/client/components/VButton.vue
@@ -52,10 +52,10 @@ function linkTo(e: Event) {
 <style scoped>
 .VPButton {
   display: inline-block;
-  border: 1px solid transparent;
-  text-align: center;
   font-weight: 600;
+  text-align: center;
   white-space: nowrap;
+  border: 1px solid transparent;
   transition:
     color 0.25s,
     border-color 0.25s,
@@ -70,70 +70,70 @@ function linkTo(e: Event) {
 }
 
 .VPButton.medium {
-  border-radius: 20px;
   padding: 0 20px;
-  line-height: 38px;
   font-size: 14px;
+  line-height: 38px;
+  border-radius: 20px;
 }
 
 .VPButton.big {
-  border-radius: 24px;
   padding: 0 24px;
-  line-height: 46px;
   font-size: 16px;
+  line-height: 46px;
+  border-radius: 24px;
 }
 
 .VPButton.brand {
-  border-color: var(--vp-button-brand-border);
   color: var(--vp-button-brand-text);
   background-color: var(--vp-button-brand-bg);
+  border-color: var(--vp-button-brand-border);
 }
 
 .VPButton.brand:hover {
-  border-color: var(--vp-button-brand-hover-border);
   color: var(--vp-button-brand-hover-text);
   background-color: var(--vp-button-brand-hover-bg);
+  border-color: var(--vp-button-brand-hover-border);
 }
 
 .VPButton.brand:active {
-  border-color: var(--vp-button-brand-active-border);
   color: var(--vp-button-brand-active-text);
   background-color: var(--vp-button-brand-active-bg);
+  border-color: var(--vp-button-brand-active-border);
 }
 
 .VPButton.alt {
-  border-color: var(--vp-button-alt-border);
   color: var(--vp-button-alt-text);
   background-color: var(--vp-button-alt-bg);
+  border-color: var(--vp-button-alt-border);
 }
 
 .VPButton.alt:hover {
-  border-color: var(--vp-button-alt-hover-border);
   color: var(--vp-button-alt-hover-text);
   background-color: var(--vp-button-alt-hover-bg);
+  border-color: var(--vp-button-alt-hover-border);
 }
 
 .VPButton.alt:active {
-  border-color: var(--vp-button-alt-active-border);
   color: var(--vp-button-alt-active-text);
   background-color: var(--vp-button-alt-active-bg);
+  border-color: var(--vp-button-alt-active-border);
 }
 
 .VPButton.sponsor {
-  border-color: var(--vp-button-sponsor-border);
   color: var(--vp-button-sponsor-text);
   background-color: var(--vp-button-sponsor-bg);
+  border-color: var(--vp-button-sponsor-border);
 }
 
 .VPButton.sponsor:hover {
-  border-color: var(--vp-button-sponsor-hover-border);
   color: var(--vp-button-sponsor-hover-text);
   background-color: var(--vp-button-sponsor-hover-bg);
+  border-color: var(--vp-button-sponsor-hover-border);
 }
 
 .VPButton.sponsor:active {
-  border-color: var(--vp-button-sponsor-active-border);
   color: var(--vp-button-sponsor-active-text);
   background-color: var(--vp-button-sponsor-active-bg);
+  border-color: var(--vp-button-sponsor-active-border);
 }
 </style>
diff --git a/theme/src/client/components/VFooter.vue b/theme/src/client/components/VFooter.vue
index 2b45dec2..a293aa14 100644
--- a/theme/src/client/components/VFooter.vue
+++ b/theme/src/client/components/VFooter.vue
@@ -31,9 +31,9 @@ const { hasSidebar } = useSidebar()
 .plume-footer {
   position: relative;
   z-index: var(--vp-z-index-footer);
-  border-top: 1px solid var(--vp-c-gutter);
   padding: 32px 24px;
   background-color: var(--vp-c-bg);
+  border-top: 1px solid var(--vp-c-gutter);
   transition: all 0.25s;
 }
 
@@ -54,23 +54,23 @@ const { hasSidebar } = useSidebar()
   text-underline-offset: 4px;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .plume-footer {
     padding: 32px;
   }
 }
 
 .container {
-  margin: 0 auto;
   max-width: var(--vp-layout-max-width);
+  margin: 0 auto;
   text-align: center;
 }
 
 .message,
 .copyright {
-  line-height: 24px;
   font-size: 14px;
   font-weight: 500;
+  line-height: 24px;
   color: var(--vp-c-text-2);
 }
 
diff --git a/theme/src/client/components/global/Badge.vue b/theme/src/client/components/global/Badge.vue
index 32e3b55f..5adc871b 100644
--- a/theme/src/client/components/global/Badge.vue
+++ b/theme/src/client/components/global/Badge.vue
@@ -18,13 +18,13 @@ withDefaults(defineProps<Props>(), {
 <style scoped>
 .badge-view {
   display: inline-block;
-  margin-left: 2px;
-  border: 1px solid transparent;
-  border-radius: 12px;
   padding: 0 10px;
-  line-height: 22px;
+  margin-left: 2px;
   font-size: 12px;
   font-weight: 500;
+  line-height: 22px;
+  border: 1px solid transparent;
+  border-radius: 12px;
   transform: translateY(-2px);
 }
 
@@ -32,11 +32,13 @@ h1 .badge-view {
   margin-top: 4px;
   vertical-align: top;
 }
+
 h2 .badge-view {
-  margin-top: 3px;
   padding: 0 8px;
+  margin-top: 3px;
   vertical-align: top;
 }
+
 h3 .badge-view {
   vertical-align: middle;
 }
@@ -44,31 +46,31 @@ h3 .badge-view {
 h4 .badge-view,
 h5 .badge-view,
 h6 .badge-view {
-  vertical-align: middle;
   line-height: 18px;
+  vertical-align: middle;
 }
 
 .badge-view.info {
-  border-color: var(--vp-badge-info-border);
   color: var(--vp-badge-info-text);
   background-color: var(--vp-badge-info-bg);
+  border-color: var(--vp-badge-info-border);
 }
 
 .badge-view.tip {
-  border-color: var(--vp-badge-tip-border);
   color: var(--vp-badge-tip-text);
   background-color: var(--vp-badge-tip-bg);
+  border-color: var(--vp-badge-tip-border);
 }
 
 .badge-view.warning {
-  border-color: var(--vp-badge-warning-border);
   color: var(--vp-badge-warning-text);
   background-color: var(--vp-badge-warning-bg);
+  border-color: var(--vp-badge-warning-border);
 }
 
 .badge-view.danger {
-  border-color: var(--vp-badge-danger-border);
   color: var(--vp-badge-danger-text);
   background-color: var(--vp-badge-danger-bg);
+  border-color: var(--vp-badge-danger-border);
 }
 </style>
diff --git a/theme/src/client/components/global/ExternalLinkIcon.vue b/theme/src/client/components/global/ExternalLinkIcon.vue
index db7214fe..190a68f3 100644
--- a/theme/src/client/components/global/ExternalLinkIcon.vue
+++ b/theme/src/client/components/global/ExternalLinkIcon.vue
@@ -9,11 +9,11 @@ import IconExternalLink from '../icons/IconExternalLink.vue'
 <style scoped>
 .external-icon {
   position: relative;
-  display: inline-block;
-  color: var(--vp-c-text-3);
-  vertical-align: middle;
   top: 1px;
+  display: inline-block;
   width: 0.8em;
   height: 0.8em;
+  color: var(--vp-c-text-3);
+  vertical-align: middle;
 }
 </style>
diff --git a/theme/src/client/composables/index.ts b/theme/src/client/composables/index.ts
index 77c180f4..7b4e0e11 100644
--- a/theme/src/client/composables/index.ts
+++ b/theme/src/client/composables/index.ts
@@ -8,3 +8,4 @@ export * from './page.js'
 export * from './readingTime.js'
 export * from './blog.js'
 export * from './locale.js'
+export * from './useRouteQuery.js'
diff --git a/theme/src/client/layouts/NotFound.vue b/theme/src/client/layouts/NotFound.vue
index 892794e3..96155109 100644
--- a/theme/src/client/layouts/NotFound.vue
+++ b/theme/src/client/layouts/NotFound.vue
@@ -46,36 +46,36 @@ const themeData = useThemeLocaleData()
   text-align: center;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .not-found {
     padding: 96px 32px 168px;
   }
 }
 
 .code {
-  line-height: 64px;
   font-size: 64px;
   font-weight: 600;
+  line-height: 64px;
 }
 
 .title {
   padding-top: 12px;
-  letter-spacing: 2px;
-  line-height: 20px;
   font-size: 20px;
   font-weight: 700;
+  line-height: 20px;
+  letter-spacing: 2px;
 }
 
 .divider {
-  margin: 24px auto 18px;
   width: 64px;
   height: 1px;
+  margin: 24px auto 18px;
   background-color: var(--vp-c-divider);
 }
 
 .quote {
-  margin: 0 auto;
   max-width: 256px;
+  margin: 0 auto;
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-2);
@@ -87,19 +87,19 @@ const themeData = useThemeLocaleData()
 
 .link {
   display: inline-block;
-  border: 1px solid var(--vp-c-brand);
-  border-radius: 16px;
   padding: 3px 16px;
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-brand);
+  border: 1px solid var(--vp-c-brand);
+  border-radius: 16px;
   transition:
     border-color 0.25s,
     color 0.25s;
 }
 
 .link:hover {
-  border-color: var(--vp-c-brand-dark);
   color: var(--vp-c-brand-dark);
+  border-color: var(--vp-c-brand-dark);
 }
 </style>
diff --git a/theme/src/client/styles/code.scss b/theme/src/client/styles/code.scss
index 02fa7182..1af415c7 100644
--- a/theme/src/client/styles/code.scss
+++ b/theme/src/client/styles/code.scss
@@ -9,19 +9,19 @@ html:not(.dark) .vp-code span {
 .plume-content {
   pre {
     padding: 1.3rem 1.5rem;
-    margin: 0 0 0.85rem 0;
-    border-radius: 6px;
+    margin: 0 0 0.85rem;
     overflow: auto;
+    font-size: 14px;
+    border-radius: 6px;
     scrollbar-width: thin;
     scrollbar-color: var(--vp-c-brand-1) var(--vp-c-border);
-    font-size: 14px;
 
     code {
-      color: #fff;
       padding: 0;
+      color: #fff;
+      overflow-wrap: unset;
       background-color: transparent;
       border-radius: 0;
-      overflow-wrap: unset;
       -webkit-font-smoothing: auto;
       -moz-osx-font-smoothing: auto;
     }
@@ -32,26 +32,26 @@ html:not(.dark) .vp-code span {
   }
 
   .code-tabs {
-    .div[class*='language-'] {
+    .div[class*="language-"] {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
   }
 }
 
-div[class*='language-'] {
+div[class*="language-"] {
   position: relative;
   background-color: var(--vp-code-block-bg);
   border-radius: 6px;
 
   &::before {
-    content: attr(data-ext);
     position: absolute;
-    z-index: 3;
     top: 0.8em;
     right: 1em;
+    z-index: 3;
     font-size: 0.75rem;
     color: var(--vp-code-line-number-color);
+    content: attr(data-ext);
   }
 
   code {
@@ -60,20 +60,21 @@ div[class*='language-'] {
   }
 
   pre {
-    // force override the background color to be compatible with shiki
-    background: transparent !important;
     position: relative;
     z-index: 1;
+
+    // force override the background color to be compatible with shiki
+    background: transparent !important;
   }
 
   .highlight-lines {
-    user-select: none;
-    padding-top: 1.3rem;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
+    padding-top: 1.3rem;
     line-height: 1.5;
+    user-select: none;
 
     .highlight-line {
       background-color: var(--vp-c-default-soft);
@@ -91,19 +92,19 @@ div[class*='language-'] {
       position: relative;
 
       &::before {
-        content: ' ';
         position: absolute;
-        z-index: 2;
-        left: 0;
         top: 0;
+        left: 0;
+        z-index: 2;
         display: block;
         height: 100%;
+        content: " ";
       }
     }
 
     pre {
-      margin-left: 2rem;
       padding-left: 1rem;
+      margin-left: 2rem;
       vertical-align: middle;
     }
 
@@ -111,40 +112,40 @@ div[class*='language-'] {
       position: absolute;
       top: 0;
       left: 0;
+      z-index: 1;
       width: 2rem;
       height: 100%;
-      text-align: center;
-      z-index: 1;
-      color: var(--vp-code-line-number-color);
       padding-top: 1.25rem;
       line-height: var(--vp-code-line-height);
+      color: var(--vp-code-line-number-color);
+      text-align: center;
       counter-reset: line-number;
       border-right: var(--vp-code-block-divider-color) 1px solid;
 
       .line-number {
         position: relative;
         z-index: 3;
-        user-select: none;
         height: 1.5rem;
+        user-select: none;
 
         &::before {
-          counter-increment: line-number;
-          content: counter(line-number);
           font-size: 0.85em;
+          content: counter(line-number);
+          counter-increment: line-number;
         }
       }
     }
   }
 }
 
-.plume-content [class*='language-'] code .highlighted {
+.plume-content [class*="language-"] code .highlighted {
+  z-index: 2;
+  display: inline-block;
+  width: calc(100% + 2 * 24px);
+  padding: 0 24px;
+  margin: 0 -24px;
   background-color: var(--vp-code-line-highlight-color);
   transition: background-color 0.5s;
-  margin: 0 -24px;
-  padding: 0 24px;
-  width: calc(100% + 2 * 24px);
-  display: inline-block;
-  z-index: 2;
 
   &.error {
     background-color: var(--vp-code-line-error-color);
@@ -155,12 +156,12 @@ div[class*='language-'] {
   }
 }
 
-.plume-content [class*='language-'] code .diff {
-  transition: background-color 0.5s;
-  margin: 0 -24px;
-  padding: 0 24px;
-  width: calc(100% + 2 * 24px);
+.plume-content [class*="language-"] code .diff {
   display: inline-block;
+  width: calc(100% + 2 * 24px);
+  padding: 0 24px;
+  margin: 0 -24px;
+  transition: background-color 0.5s;
 
   &::before {
     position: absolute;
@@ -173,8 +174,8 @@ div[class*='language-'] {
   }
 
   &.remove::before {
-    content: '-';
     color: var(--vp-code-line-diff-remove-symbol-color);
+    content: "-";
     transform: translateX(-6px);
   }
 
@@ -183,13 +184,13 @@ div[class*='language-'] {
   }
 
   &.add::before {
-    content: '+';
     color: var(--vp-code-line-diff-add-symbol-color);
+    content: "+";
     transform: translateX(-6px);
   }
 }
 
-.plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+.plume-content [class*="language-"] .has-focused-lines .line:not(.has-focus) {
   filter: blur(0.095rem);
   opacity: 0.7;
   transition:
@@ -197,27 +198,24 @@ div[class*='language-'] {
     opacity 0.35s;
 }
 
-.plume-content
-  [class*='language-']:hover
-  .has-focused-lines
-  .line:not(.has-focus) {
+.plume-content [class*="language-"]:hover .has-focused-lines .line:not(.has-focus) {
   filter: blur(0);
   opacity: 1;
 }
 
 .code-tabs-nav {
-  margin-bottom: 0rem;
+  margin-bottom: 0;
 }
 
 // narrow mobile
-@media (max-width: 419px) {
+@media (width <= 419px) {
   .plume-content {
-    div[class*='language-'] {
+    div[class*="language-"] {
       margin: 0.85rem -1.5rem;
       border-radius: 0;
     }
 
-    .hint-container div[class*='language-'] {
+    .hint-container div[class*="language-"] {
       margin: 0.85rem -1rem 0.85rem -1.25rem;
     }
   }
diff --git a/theme/src/client/styles/content.scss b/theme/src/client/styles/content.scss
index 8946d105..8ac8e934 100644
--- a/theme/src/client/styles/content.scss
+++ b/theme/src/client/styles/content.scss
@@ -14,18 +14,18 @@
 }
 
 .plume-content h1 {
-  letter-spacing: -0.02em;
-  line-height: 40px;
   font-size: 28px;
+  line-height: 40px;
+  letter-spacing: -0.02em;
 }
 
 .plume-content h2 {
-  margin: 48px 0 16px;
-  border-top: 1px solid var(--vp-c-divider);
   padding-top: 24px;
-  letter-spacing: -0.02em;
-  line-height: 32px;
+  margin: 48px 0 16px;
   font-size: 24px;
+  line-height: 32px;
+  letter-spacing: -0.02em;
+  border-top: 1px solid var(--vp-c-divider);
 }
 
 .plume-content h2:first-of-type {
@@ -34,15 +34,15 @@
 
 .plume-content h3 {
   margin: 32px 0 0;
-  letter-spacing: -0.01em;
-  line-height: 28px;
   font-size: 20px;
+  line-height: 28px;
+  letter-spacing: -0.01em;
 }
 
 .plume-content .header-anchor {
   float: left;
-  margin-left: -0.87em;
   padding-right: 0.23em;
+  margin-left: -0.87em;
   font-weight: 500;
   user-select: none;
   opacity: 0;
@@ -66,11 +66,11 @@
   opacity: 1;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .plume-content h1 {
-    letter-spacing: -0.02em;
-    line-height: 40px;
     font-size: 32px;
+    line-height: 40px;
+    letter-spacing: -0.02em;
   }
 }
 
@@ -100,9 +100,9 @@
 }
 
 .plume-content blockquote {
+  padding-left: 16px;
   margin: 16px 0;
   border-left: 2px solid var(--vp-c-divider);
-  padding-left: 16px;
   transition: border-color 0.5s;
 }
 
@@ -166,9 +166,9 @@
 
 .plume-content table {
   display: block;
-  border-collapse: collapse;
   margin: 20px 0;
   overflow-x: auto;
+  border-collapse: collapse;
 }
 
 .plume-content tr {
@@ -183,15 +183,15 @@
 
 .plume-content th,
 .plume-content td {
-  border: 1px solid var(--vp-c-divider);
   padding: 8px 16px;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .plume-content th {
-  text-align: left;
   font-size: 14px;
   font-weight: 600;
   color: var(--vp-c-text-2);
+  text-align: left;
   background-color: var(--vp-c-bg-soft);
 }
 
@@ -263,9 +263,9 @@
 }
 
 .plume-content :not(pre) > code {
-  border-radius: 4px;
   padding: 3px 6px;
   background-color: var(--vp-code-bg);
+  border-radius: 4px;
   transition:
     color 0.25s,
     background-color 0.5s;
diff --git a/theme/src/client/styles/fonts.scss b/theme/src/client/styles/fonts.scss
index 394728cc..d1a4eee9 100644
--- a/theme/src/client/styles/fonts.scss
+++ b/theme/src/client/styles/fonts.scss
@@ -1,165 +1,239 @@
 /* webfont-marker-begin */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+@import "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";
 
 html body {
   font-synthesis: style;
 }
+
 /* webfont-marker-end */
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: normal;
-  font-named-instance: 'Regular';
-  src: url('../fonts/inter-roman-cyrillic.woff2') format('woff2');
+  font-weight: 100 900;
+  src: url("../fonts/inter-roman-cyrillic.woff2") format("woff2");
+  font-display: swap;
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-named-instance: "Regular";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: normal;
-  font-named-instance: 'Regular';
-  src: url('../fonts/inter-roman-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+  font-weight: 100 900;
+  src: url("../fonts/inter-roman-cyrillic-ext.woff2") format("woff2");
+  font-display: swap;
+  unicode-range:
+    U+0460-052F,
+    U+1C80-1C88,
+    U+20B4,
+    U+2DE0-2DFF,
+    U+A640-A69F,
     U+FE2E-FE2F;
+  font-named-instance: "Regular";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: normal;
-  font-named-instance: 'Regular';
-  src: url('../fonts/inter-roman-greek.woff2') format('woff2');
+  font-weight: 100 900;
+  src: url("../fonts/inter-roman-greek.woff2") format("woff2");
+  font-display: swap;
   unicode-range: U+0370-03FF;
+  font-named-instance: "Regular";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: normal;
-  font-named-instance: 'Regular';
-  src: url('../fonts/inter-roman-greek-ext.woff2') format('woff2');
+  font-weight: 100 900;
+  src: url("../fonts/inter-roman-greek-ext.woff2") format("woff2");
+  font-display: swap;
   unicode-range: U+1F00-1FFF;
+  font-named-instance: "Regular";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: normal;
-  font-named-instance: 'Regular';
-  src: url('../fonts/inter-roman-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  font-weight: 100 900;
+  src: url("../fonts/inter-roman-latin.woff2") format("woff2");
+  font-display: swap;
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+2000-206F,
+    U+2074,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
+  font-named-instance: "Regular";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: normal;
-  font-named-instance: 'Regular';
-  src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-weight: 100 900;
+  src: url("../fonts/inter-roman-latin-ext.woff2") format("woff2");
+  font-display: swap;
+  unicode-range:
+    U+0100-024F,
+    U+0259,
+    U+1E00-1EFF,
+    U+2020,
+    U+20A0-20AB,
+    U+20AD-20CF,
+    U+2113,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+  font-named-instance: "Regular";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: normal;
-  font-named-instance: 'Regular';
-  src: url('../fonts/inter-roman-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+  font-weight: 100 900;
+  src: url("../fonts/inter-roman-vietnamese.woff2") format("woff2");
+  font-display: swap;
+  unicode-range:
+    U+0102-0103,
+    U+0110-0111,
+    U+0128-0129,
+    U+0168-0169,
+    U+01A0-01A1,
+    U+01AF-01B0,
+    U+1EA0-1EF9,
+    U+20AB;
+  font-named-instance: "Regular";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: italic;
-  font-named-instance: 'Italic';
-  src: url('../fonts/inter-italic-cyrillic.woff2') format('woff2');
+  font-weight: 100 900;
+  src: url("../fonts/inter-italic-cyrillic.woff2") format("woff2");
+  font-display: swap;
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-named-instance: "Italic";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: italic;
-  font-named-instance: 'Italic';
-  src: url('../fonts/inter-italic-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+  font-weight: 100 900;
+  src: url("../fonts/inter-italic-cyrillic-ext.woff2") format("woff2");
+  font-display: swap;
+  unicode-range:
+    U+0460-052F,
+    U+1C80-1C88,
+    U+20B4,
+    U+2DE0-2DFF,
+    U+A640-A69F,
     U+FE2E-FE2F;
+  font-named-instance: "Italic";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: italic;
-  font-named-instance: 'Italic';
-  src: url('../fonts/inter-italic-greek.woff2') format('woff2');
+  font-weight: 100 900;
+  src: url("../fonts/inter-italic-greek.woff2") format("woff2");
+  font-display: swap;
   unicode-range: U+0370-03FF;
+  font-named-instance: "Italic";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: italic;
-  font-named-instance: 'Italic';
-  src: url('../fonts/inter-italic-greek-ext.woff2') format('woff2');
+  font-weight: 100 900;
+  src: url("../fonts/inter-italic-greek-ext.woff2") format("woff2");
+  font-display: swap;
   unicode-range: U+1F00-1FFF;
+  font-named-instance: "Italic";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: italic;
-  font-named-instance: 'Italic';
-  src: url('../fonts/inter-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  font-weight: 100 900;
+  src: url("../fonts/inter-italic-latin.woff2") format("woff2");
+  font-display: swap;
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+2000-206F,
+    U+2074,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
+  font-named-instance: "Italic";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: italic;
-  font-named-instance: 'Italic';
-  src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-weight: 100 900;
+  src: url("../fonts/inter-italic-latin-ext.woff2") format("woff2");
+  font-display: swap;
+  unicode-range:
+    U+0100-024F,
+    U+0259,
+    U+1E00-1EFF,
+    U+2020,
+    U+20A0-20AB,
+    U+20AD-20CF,
+    U+2113,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+  font-named-instance: "Italic";
 }
 
 @font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter var";
   font-style: italic;
-  font-named-instance: 'Italic';
-  src: url('../fonts/inter-italic-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+  font-weight: 100 900;
+  src: url("../fonts/inter-italic-vietnamese.woff2") format("woff2");
+  font-display: swap;
+  unicode-range:
+    U+0102-0103,
+    U+0110-0111,
+    U+0128-0129,
+    U+0168-0169,
+    U+01A0-01A1,
+    U+01AF-01B0,
+    U+1EA0-1EF9,
+    U+20AB;
+  font-named-instance: "Italic";
 }
 
 /* Chinese quotes rendering fix. 中英文弯引号共享 Unicode 码位，确保引号使用中文字体渲染 */
 @font-face {
-  font-family: 'Chinese Quotes';
-  src: local('PingFang SC Regular'), local('PingFang SC'), local('SimHei'),
-    local('Source Han Sans SC');
+  font-family: "Chinese Quotes";
+  src:
+    local("PingFang SC Regular"),
+    local("PingFang SC"),
+    local("SimHei"),
+    local("Source Han Sans SC");
   unicode-range: U+2018, U+2019, U+201C, U+201D; /* 分别是 ‘’“” */
 }
diff --git a/theme/src/client/styles/index.scss b/theme/src/client/styles/index.scss
index eedffd8c..47417456 100644
--- a/theme/src/client/styles/index.scss
+++ b/theme/src/client/styles/index.scss
@@ -1,13 +1,11 @@
-@import '@vuepress/plugin-palette/palette';
-
-@import 'vars';
-@import 'fonts';
-@import 'normalize';
-@import 'nprogress';
-@import 'utils';
-@import 'content';
-@import 'code';
-@import 'md-enhance';
-@import 'search';
-
-@import '@vuepress/plugin-palette/style';
+@import "@vuepress/plugin-palette/palette";
+@import "vars";
+@import "fonts";
+@import "normalize";
+@import "nprogress";
+@import "utils";
+@import "content";
+@import "code";
+@import "md-enhance";
+@import "search";
+@import "@vuepress/plugin-palette/style";
diff --git a/theme/src/client/styles/md-enhance.scss b/theme/src/client/styles/md-enhance.scss
index 53d8f906..d676d233 100644
--- a/theme/src/client/styles/md-enhance.scss
+++ b/theme/src/client/styles/md-enhance.scss
@@ -1,14 +1,20 @@
 .plume-content {
+  @media (width <= 419px) {
+    .vp-code-demo {
+      margin: 8px -12px;
+    }
+  }
+
   .hint-container {
-    border-radius: 8px;
     padding: 16px 16px 8px;
-    line-height: 24px;
     font-size: var(--vp-custom-block-font-size);
+    line-height: 24px;
     color: var(--vp-c-text-2);
+    border-radius: 8px;
 
     .hint-container-title {
-      font-weight: 600;
       margin-top: 0;
+      font-weight: 600;
     }
 
     p + p {
@@ -20,18 +26,18 @@
       color: inherit;
     }
 
-    div[class*='language-'] {
+    div[class*="language-"] {
       margin: 8px 0;
     }
 
-    div[class*='language-'] code {
+    div[class*="language-"] code {
       font-weight: 400;
       background-color: transparent;
     }
 
     &.note {
-      border-radius: 0;
       color: var(--vp-c-text-3);
+      border-radius: 0;
     }
 
     &.info {
@@ -56,8 +62,8 @@
       summary {
         margin: -1.5rem -1.5rem -1.1rem;
         font-weight: 700;
-        cursor: pointer;
         color: var(--vp-c-text-1);
+        cursor: pointer;
       }
 
       summary + p {
@@ -73,39 +79,46 @@
       code {
         color: var(--vp-c-brand-1);
       }
+
       a:hover {
         color: var(--vp-c-brand-2);
       }
     }
+
     &.important {
       a,
       code {
         color: var(--vp-c-purple-1);
       }
+
       a:hover {
         color: var(--vp-c-purple-2);
       }
     }
+
     &.warning {
       a,
       code {
         color: var(--vp-c-warning-1);
       }
+
       a:hover {
         color: var(--vp-c-warning-2);
       }
     }
+
     &.caution {
       a,
       code {
         color: var(--vp-c-danger-1);
       }
+
       a:hover {
         color: var(--vp-c-danger-2);
       }
     }
 
-    [class*='language-'] .line-numbers {
+    [class*="language-"] .line-numbers {
       padding-top: 21px;
     }
 
@@ -117,8 +130,15 @@
   }
 
   .vp-code-demo {
-    border: solid 1px var(--vp-c-divider);
     overflow: hidden;
+    border: solid 1px var(--vp-c-divider);
+
+    @media (width <= 419px) {
+      .vp-code-demo-codes div[class*="language-"] {
+        margin: 0;
+        border-radius: 0;
+      }
+    }
 
     &:hover {
       box-shadow: none;
@@ -155,38 +175,27 @@
       background-color: transparent;
     }
 
-    .vp-code-demo-codes div[class*='language-'] {
+    .vp-code-demo-codes div[class*="language-"] {
       border-bottom: 2px dashed var(--vp-c-divider);
 
       &:first-of-type {
         border-top: 1px solid var(--vp-c-divider);
       }
+
       &:last-of-type {
         border-bottom: none;
       }
     }
 
-    .vp-code-demo-codes div[class*='language-'] pre {
+    .vp-code-demo-codes div[class*="language-"] pre {
       margin-bottom: 0;
       border-radius: 0;
     }
-
-    @media (max-width: 419px) {
-      .vp-code-demo-codes div[class*='language-'] {
-        margin: 0;
-        border-radius: 0;
-      }
-    }
-  }
-
-  @media (max-width: 419px) {
-    .vp-code-demo {
-      margin: 8px -12px;
-    }
   }
 
   .task-list-container {
     padding-left: 0;
+
     .task-list-item {
       input {
         width: 0;
@@ -194,30 +203,169 @@
         padding: 0;
         margin: 0;
       }
+
       label {
         margin-left: 1.2em;
       }
+
       input::before,
       input::after {
-        content: none;
         position: absolute;
         top: -1em;
         left: 0;
-        font-size: 1em;
         display: inline-block;
+        font-size: 1em;
+        content: none;
       }
 
       input::after {
         content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath fill="%23c2c2c4" d="M26 27.5H6A1.5 1.5 0 0 1 4.5 26V6c0-.83.67-1.5 1.5-1.5h20c.828 0 1.5.67 1.5 1.5v20a1.5 1.5 0 0 1-1.5 1.5m-18.5-3h17v-17h-17z"%2F%3E%3C%2Fsvg%3E');
-        border: none;
         background-color: transparent;
+        border: none;
       }
 
       input:checked[disabled]::after {
         content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath fill="%23299764" d="M29.548 3.043a2.5 2.5 0 0 0-3.513.4L16 16.067l-3.508-4.414a2.5 2.5 0 0 0-3.915 3.112l5.465 6.875c.474.597 1.195.943 1.957.943s1.482-.35 1.957-.944L29.95 6.555c.86-1.08.68-2.654-.402-3.513zM24.5 24.5h-17v-17h12.756l2.385-3H6c-.83 0-1.5.67-1.5 1.5v20c0 .828.67 1.5 1.5 1.5h20a1.5 1.5 0 0 0 1.5-1.5V12.85l-3 3.774z"%2F%3E%3C%2Fsvg%3E');
-        border: none;
         background-color: transparent;
+        border: none;
       }
     }
   }
+
+  .vp-tabs {
+    margin: 1.5rem -0.75rem;
+    overflow: hidden;
+    border: 1px solid var(--vp-c-divider);
+  }
+
+  .hint-container .vp-tabs {
+    margin: 1rem -0.45rem 1rem -0.75rem;
+
+    .vp-tab {
+      padding: 0.45rem 0.75rem;
+      font-size: 14px;
+
+      p {
+        margin: 8px 0;
+      }
+    }
+  }
+
+  .footnotes-sep {
+    margin-top: 48px;
+  }
+
+  .footnotes {
+    position: relative;
+    padding: 48px 0 12px 16px;
+    margin-left: -16px;
+    font-size: 14px;
+    border-left: 4px solid var(--vp-c-default-soft);
+
+    @media (width >= 419px) {
+      & {
+        margin-left: 0;
+      }
+    }
+
+    &::before {
+      position: absolute;
+      top: 12px;
+      left: 16px;
+      font-size: 16px;
+      font-weight: 700;
+
+      [lang="zh-CN"] & {
+        content: "脚注:";
+      }
+
+      [lang="en-US"] & {
+        content: "Footnotes:";
+      }
+    }
+
+    ol {
+      margin: 0;
+
+      p {
+        margin: 8px 0;
+      }
+
+      li:first-of-type p:first-of-type {
+        margin-top: 0;
+      }
+
+      li:last-of-type p:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .footnote-item {
+    padding-top: 0;
+    margin-top: 0;
+
+    > p {
+      margin-bottom: 0;
+    }
+  }
+
+  .footnote-backref {
+    position: relative;
+    color: transparent;
+    text-decoration: none;
+
+    &:hover {
+      color: transparent;
+    }
+
+    &::before {
+      position: absolute;
+      top: -0.4em;
+      left: 0;
+      font-size: 1em;
+      content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 48 48"%3E%3Cg fill="none" stroke="%23c2c2c4" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"%3E%3Cpath d="m13 8l-7 6l7 7"%2F%3E%3Cpath d="M6 14h22.994c6.883 0 12.728 5.62 12.996 12.5c.284 7.27-5.723 13.5-12.996 13.5H11.998"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+    }
+  }
+
+  .footnote-anchor {
+    top: 0;
+  }
+}
+
+.plume-content {
+  figure {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: auto;
+    margin: 1rem auto;
+    text-align: center;
+
+    img {
+      margin: 0 auto;
+      overflow: hidden;
+    }
+
+    > a {
+      &[href^="http://"],
+      &[href^="https://"] {
+        &::after {
+          @media print {
+            content: "";
+          }
+        }
+      }
+
+      .external-icon {
+        display: none;
+      }
+    }
+
+    figcaption {
+      display: inline-block;
+      margin: 6px auto;
+      font-size: 0.8rem;
+    }
+  }
 }
diff --git a/theme/src/client/styles/normalize.scss b/theme/src/client/styles/normalize.scss
index 6acd1076..0810c23f 100644
--- a/theme/src/client/styles/normalize.scss
+++ b/theme/src/client/styles/normalize.scss
@@ -2,13 +2,13 @@
   *,
   ::before,
   ::after {
-    animation-delay: -1ms !important;
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
     background-attachment: initial !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0s !important;
     transition-delay: 0s !important;
+    transition-duration: 0s !important;
+    animation-duration: 1ms !important;
+    animation-delay: -1ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
   }
 }
 
@@ -28,7 +28,7 @@ html {
 body {
   -webkit-text-size-adjust: 100%;
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -38,13 +38,13 @@ html.dark {
 }
 
 body {
-  margin: 0;
   width: 100%;
   min-width: 320px;
   min-height: 100vh;
-  line-height: 24px;
+  margin: 0;
   font-family: var(--vp-font-family-base);
   font-weight: 400;
+  line-height: 24px;
   direction: ltr;
 }
 
@@ -52,8 +52,8 @@ html,
 body {
   color: var(--vp-c-text-1);
   background-color: var(--vp-c-bg);
-  transition-duration: 0.25s;
   transition-timing-function: ease;
+  transition-duration: 0.25s;
   transition-property: color, background-color;
 }
 
@@ -68,9 +68,9 @@ h4,
 h5,
 h6 {
   margin: 0;
-  line-height: 24px;
   font-size: 16px;
   font-weight: 400;
+  line-height: 24px;
 }
 
 p {
@@ -100,7 +100,7 @@ b {
 a,
 area,
 button,
-[role='button'],
+[role="button"],
 input,
 label,
 select,
@@ -116,9 +116,9 @@ a {
 
 ol,
 ul {
-  list-style: none;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
 blockquote {
@@ -158,10 +158,10 @@ input,
 optgroup,
 select,
 textarea {
-  border: 0;
   padding: 0;
   line-height: inherit;
   color: inherit;
+  border: 0;
 }
 
 button {
@@ -172,7 +172,7 @@ button {
 }
 
 button:enabled,
-[role='button']:enabled {
+[role="button"]:enabled {
   cursor: pointer;
 }
 
@@ -220,11 +220,11 @@ textarea::placeholder {
 
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
   margin: 0;
+  -webkit-appearance: none;
 }
 
-input[type='number'] {
+input[type="number"] {
   -moz-appearance: textfield;
   appearance: textfield;
 }
@@ -239,8 +239,8 @@ select {
 }
 
 fieldset {
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 
 h1,
diff --git a/theme/src/client/styles/search.scss b/theme/src/client/styles/search.scss
index d6fe52bf..529d28e0 100644
--- a/theme/src/client/styles/search.scss
+++ b/theme/src/client/styles/search.scss
@@ -1,8 +1,8 @@
 .search-box .suggestions {
-  box-shadow: var(--vp-shadow-3);
   top: 2.5rem;
   right: -1rem;
-  border-radius: 12px;
   padding: 16px 12px;
   background-color: var(--vp-c-bg);
+  border-radius: 12px;
+  box-shadow: var(--vp-shadow-3);
 }
diff --git a/theme/src/client/styles/utils.scss b/theme/src/client/styles/utils.scss
index ddb87b22..41bfe23e 100644
--- a/theme/src/client/styles/utils.scss
+++ b/theme/src/client/styles/utils.scss
@@ -2,10 +2,10 @@
   position: absolute;
   width: 1px;
   height: 1px;
-  white-space: nowrap;
+  overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  overflow: hidden;
+  white-space: nowrap;
 }
 
 .icon {
diff --git a/theme/src/client/styles/vars.scss b/theme/src/client/styles/vars.scss
index 82004a03..175cf89a 100644
--- a/theme/src/client/styles/vars.scss
+++ b/theme/src/client/styles/vars.scss
@@ -3,9 +3,8 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-c-white: #ffffff;
-  --vp-c-black: #000000;
-
+  --vp-c-white: #fff;
+  --vp-c-black: #000;
   --vp-c-neutral: var(--vp-c-black);
   --vp-c-neutral-inverse: var(--vp-c-white);
 }
@@ -125,9 +124,9 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-c-bg: #ffffff;
+  --vp-c-bg: #fff;
   --vp-c-bg-alt: #f6f6f7;
-  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-elv: #fff;
   --vp-c-bg-soft: #f6f6f7;
 }
 
@@ -160,7 +159,7 @@
 .dark {
   --vp-c-border: #3c3f44;
   --vp-c-divider: #2e2e32;
-  --vp-c-gutter: #000000;
+  --vp-c-gutter: #000;
 }
 
 /**
@@ -245,12 +244,35 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-font-family-base: 'Chinese Quotes', 'Inter var', 'Inter', ui-sans-serif,
-    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
-    Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --vp-font-family-base:
+    "Chinese Quotes",
+    "Inter var",
+    "Inter",
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    blinkmacsystemfont,
+    "Segoe UI",
+    roboto,
+    "Helvetica Neue",
+    helvetica,
+    arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --vp-font-family-mono:
+    ui-monospace,
+    sfmono-regular,
+    "SF Mono",
+    menlo,
+    monaco,
+    consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace;
 }
 
 /**
@@ -301,7 +323,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-header-anchor-symbol: '#';
+  --vp-header-anchor-symbol: "#";
 }
 
 /**
@@ -339,7 +361,7 @@
   --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
   --vp-code-copy-code-hover-bg: var(--vp-c-bg);
   --vp-code-copy-code-active-text: var(--vp-c-text-2);
-  --vp-code-copy-copied-text-content: 'Copied';
+  --vp-code-copy-copied-text-content: "Copied";
 
   // --vp-code-tab-divider: var(--vp-code-block-divider-color);
   // --vp-code-tab-text-color: var(--vp-c-text-2);
@@ -349,8 +371,8 @@
   // --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
 }
 
-html[lang='zh-CN'] {
-  --vp-code-copy-copied-text-content: '已复制';
+html[lang="zh-CN"] {
+  --vp-code-copy-copied-text-content: "已复制";
 }
 
 /**
@@ -509,6 +531,7 @@ html[lang='zh-CN'] {
   --vp-friends-link-color: var(--vp-c-brand-1);
   --vp-friends-border-color: var(--vp-c-border);
 }
+
 /**
  * Component: Badge
  * -------------------------------------------------------------------------- */
@@ -631,6 +654,14 @@ html.dark {
   --code-demo-header-bg-color: var(--vp-c-bg-soft);
 }
 
+/* md enhance tabs */
+:root {
+  --tab-bg-color: var(--vp-c-bg);
+  --tab-nav-bg-color: var(--vp-c-bg-soft);
+  --tab-nav-hover-color: var(--vp-c-bg);
+  --tab-nav-text-color: var(--vp-c-text-1);
+}
+
 :root {
   --t-color: 250ms ease;
   --code-bg-color: var(--vp-code-block-bg);