From 790f51839c630a3a68a9335b8aff2e0f09741f30 Mon Sep 17 00:00:00 2001
From: Percy Ma <kecrily@gmail.com>
Date: Thu, 2 Jun 2022 23:39:31 +0800
Subject: [PATCH] perf(a11y): make font size follow user brower settings

close https://github.com/vuejs/vitepress/issues/570
---
 src/client/app/components/Debug.vue           |  24 ++--
 src/client/theme-default/NotFound.vue         |  34 +++---
 src/client/theme-default/components/VPBox.vue |  22 ++--
 .../theme-default/components/VPButton.vue     |  14 +--
 .../theme-default/components/VPCarbonAds.vue  |  14 +--
 src/client/theme-default/components/VPDoc.vue |  44 +++----
 .../theme-default/components/VPDocAside.vue   |   4 +-
 .../components/VPDocAsideOutline.vue          |  24 ++--
 .../theme-default/components/VPDocFooter.vue  |  37 +++---
 .../components/VPDocFooterLastUpdated.vue     |   8 +-
 .../theme-default/components/VPFlyout.vue     |  24 ++--
 .../theme-default/components/VPFooter.vue     |  10 +-
 .../theme-default/components/VPHero.vue       |  86 ++++++-------
 .../theme-default/components/VPHome.vue       |   8 +-
 .../components/VPHomeFeatures.vue             |  10 +-
 .../components/VPHomeSponsors.vue             |  26 ++--
 .../theme-default/components/VPLink.vue       |   8 +-
 .../theme-default/components/VPLocalNav.vue   |  24 ++--
 .../theme-default/components/VPMenu.vue       |  26 ++--
 .../theme-default/components/VPMenuGroup.vue  |  16 +--
 .../theme-default/components/VPMenuLink.vue   |  12 +-
 .../theme-default/components/VPNavBar.vue     |  22 ++--
 .../components/VPNavBarExtra.vue              |  16 +--
 .../components/VPNavBarHamburger.vue          |  20 +--
 .../components/VPNavBarMenuLink.vue           |   4 +-
 .../components/VPNavBarSearch.vue             |  58 ++++-----
 .../components/VPNavBarTitle.vue              |  12 +-
 .../components/VPNavBarTranslations.vue       |   6 +-
 .../theme-default/components/VPNavScreen.vue  |  14 +--
 .../components/VPNavScreenAppearance.vue      |   6 +-
 .../components/VPNavScreenMenuGroup.vue       |  22 ++--
 .../components/VPNavScreenMenuGroupLink.vue   |   6 +-
 .../VPNavScreenMenuGroupSection.vue           |   4 +-
 .../components/VPNavScreenMenuLink.vue        |   8 +-
 .../components/VPNavScreenTranslations.vue    |  18 +--
 .../theme-default/components/VPSidebar.vue    |  24 ++--
 .../components/VPSidebarGroup.vue             |  26 ++--
 .../components/VPSidebarLink.vue              |   6 +-
 .../theme-default/components/VPSkipLink.vue   |  12 +-
 .../theme-default/components/VPSocialLink.vue |   8 +-
 .../theme-default/components/VPSwitch.vue     |  26 ++--
 .../components/icons/VPIconAlignJustify.vue   |   2 +-
 .../components/icons/VPIconExternalLink.vue   |   4 +-
 src/client/theme-default/styles/base.css      |  16 +--
 .../styles/components/custom-block.css        |  14 +--
 .../styles/components/vp-doc.css              | 114 +++++++++---------
 .../styles/components/vp-sponsor.css          |  50 ++++----
 src/client/theme-default/styles/utils.css     |   4 +-
 src/client/theme-default/styles/vars.css      |  20 +--
 49 files changed, 508 insertions(+), 509 deletions(-)

diff --git a/src/client/app/components/Debug.vue b/src/client/app/components/Debug.vue
index 41e926a0..5eb3ffcf 100644
--- a/src/client/app/components/Debug.vue
+++ b/src/client/app/components/Debug.vue
@@ -27,11 +27,11 @@ watch(open, (value) => {
 .debug {
   box-sizing: border-box;
   position: fixed;
-  right: 8px;
-  bottom: 8px;
+  right: .5rem;
+  bottom: .5rem;
   z-index: 9999;
   border-radius: 4px;
-  width: 74px;
+  width: 4.625rem;
   height: 32px;
   color: #eeeeee;
   overflow: hidden;
@@ -57,7 +57,7 @@ watch(open, (value) => {
 
 @media (min-width: 512px) {
   .debug.open {
-    width: 512px;
+    width: 32rem;
   }
 }
 
@@ -67,20 +67,20 @@ watch(open, (value) => {
 
 .title {
   margin: 0;
-  padding: 6px 16px 6px;
-  line-height: 20px;
-  font-size: 13px;
+  padding: .375rem 1rem .375rem;
+  line-height: 1.25rem;
+  font-size: .8125rem;
 }
 
 .block {
-  margin: 2px 0 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.16);
-  padding: 8px 16px;
+  margin: .125rem 0 0;
+  border-top: .0625rem solid rgba(255, 255, 255, 0.16);
+  padding: .5rem 1rem;
   font-family: Hack, monospace;
-  font-size: 13px;
+  font-size: .8125rem;
 }
 
 .block + .block {
-  margin-top: 8px;
+  margin-top: .5rem;
 }
 </style>
diff --git a/src/client/theme-default/NotFound.vue b/src/client/theme-default/NotFound.vue
index 193d11cd..934c9efd 100644
--- a/src/client/theme-default/NotFound.vue
+++ b/src/client/theme-default/NotFound.vue
@@ -23,55 +23,55 @@ const { site } = useData()
 
 <style scoped>
 .NotFound {
-  padding: 64px 24px 96px;
+  padding: 4rem 1.5rem 6rem;
   text-align: center;
 }
 
 @media (min-width: 768px) {
   .NotFound {
-    padding: 96px 32px 168px;
+    padding: 6rem 2rem 10.5rem;
   }
 }
 
 .code {
-  line-height: 64px;
-  font-size: 64px;
+  line-height: 4rem;
+  font-size: 4rem;
   font-weight: 600;
 }
 
 .title {
-  padding-top: 12px;
-  letter-spacing: 2px;
-  line-height: 20px;
-  font-size: 20px;
+  padding-top: .75rem;
+  letter-spacing: .125rem;
+  line-height: 1.25rem;
+  font-size: 1.25rem;
   font-weight: 700;
 }
 
 .divider {
-  margin: 24px auto 18px;
-  width: 64px;
-  height: 1px;
+  margin: 1.5rem auto 1.125rem;
+  width: 4rem;
+  height: .0625rem;
   background-color: var(--vp-c-divider)
 }
 
 .quote {
   margin: 0 auto;
-  max-width: 256px;
-  font-size: 14px;
+  max-width: 16rem;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .action {
-  padding-top: 20px;
+  padding-top: 1.25rem;
 }
 
 .link {
   display: inline-block;
-  border: 1px solid var(--vp-c-brand);
+  border: .0625rem solid var(--vp-c-brand);
   border-radius: 16px;
-  padding: 3px 16px;
-  font-size: 14px;
+  padding: .1875rem 1rem;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-brand);
   transition: border-color 0.25s, color .25s;
diff --git a/src/client/theme-default/components/VPBox.vue b/src/client/theme-default/components/VPBox.vue
index 2593492a..e60e23fa 100644
--- a/src/client/theme-default/components/VPBox.vue
+++ b/src/client/theme-default/components/VPBox.vue
@@ -16,9 +16,9 @@ defineProps<{
 
 <style scoped>
 .VPBox {
-  border: 1px solid var(--vp-c-divider-light);
+  border: .0625rem solid var(--vp-c-divider-light);
   border-radius: 12px;
-  padding: 24px;
+  padding: 1.5rem;
   height: 100%;
   background-color: var(--vp-c-bg-soft);
 }
@@ -27,12 +27,12 @@ defineProps<{
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
   border-radius: 6px;
   background-color: var(--vp-c-gray-light-4);
-  width: 48px;
-  height: 48px;
-  font-size: 24px;
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
 }
 
 .dark .icon {
@@ -40,15 +40,15 @@ defineProps<{
 }
 
 .title {
-  line-height: 24px;
-  font-size: 16px;
+  line-height: 1.5rem;
+  font-size: 1rem;
   font-weight: 600;
 }
 
 .details {
-  padding-top: 8px;
-  line-height: 24px;
-  font-size: 14px;
+  padding-top: .5rem;
+  line-height: 1.5rem;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index d6c5d246..b3a5fa72 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -41,7 +41,7 @@ const component = computed(() => {
 <style scoped>
 .VPButton {
   display: inline-block;
-  border: 1px solid transparent;
+  border: .0625rem solid transparent;
   text-align: center;
   font-weight: 500;
   white-space: nowrap;
@@ -54,16 +54,16 @@ const component = computed(() => {
 
 .VPButton.medium {
   border-radius: 20px;
-  padding: 0 20px;
-  line-height: 38px;
-  font-size: 14px;
+  padding: 0 1.25rem;
+  line-height: 2.375rem;
+  font-size: .875rem;
 }
 
 .VPButton.big {
   border-radius: 24px;
-  padding: 0 24px;
-  line-height: 46px;
-  font-size: 16px;
+  padding: 0 1.5rem;
+  line-height: 2.875rem;
+  font-size: 1rem;
 }
 
 .VPButton.brand {
diff --git a/src/client/theme-default/components/VPCarbonAds.vue b/src/client/theme-default/components/VPCarbonAds.vue
index aa4d0c83..4d27a216 100644
--- a/src/client/theme-default/components/VPCarbonAds.vue
+++ b/src/client/theme-default/components/VPCarbonAds.vue
@@ -46,12 +46,12 @@ if (carbonOptions) {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 24px;
+  padding: 1.5rem;
   border-radius: 12px;
-  min-height: 240px;
+  min-height: 15rem;
   text-align: center;
-  line-height: 18px;
-  font-size: 12px;
+  line-height: 1.125rem;
+  font-size: .75rem;
   font-weight: 500;
   background-color: var(--vp-c-bg-soft);
   transition: color 0.5s, background-color 0.5s;
@@ -65,7 +65,7 @@ if (carbonOptions) {
 .VPCarbonAds .carbon-text {
   display: block;
   margin: 0 auto;
-  padding-top: 12px;
+  padding-top: .75rem;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
 }
@@ -76,8 +76,8 @@ if (carbonOptions) {
 
 .VPCarbonAds .carbon-poweredby {
   display: block;
-  padding-top: 6px;
-  font-size: 11px;
+  padding-top: .375rem;
+  font-size: .6875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
   text-transform: uppercase;
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index d817351e..dcadfcee 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -47,25 +47,25 @@ const pageName = computed(() => {
 
 <style scoped>
 .VPDoc {
-  padding: 32px 24px 96px;
+  padding: 2rem 1.5rem 6rem;
   width: 100%;
 }
 
 @media (min-width: 768px) {
   .VPDoc {
-    padding: 48px 32px 128px;
+    padding: 3rem 2rem 8rem;
   }
 }
 
 @media (min-width: 960px) {
   .VPDoc {
-    padding: 32px 32px 0;
+    padding: 2rem 2rem 0;
   }
 
   .VPDoc:not(.has-sidebar) .container {
     display: flex;
     justify-content: center;
-    max-width: 992px;
+    max-width: 62rem;
   }
 
   .VPDoc:not(.has-sidebar) .aside {
@@ -73,7 +73,7 @@ const pageName = computed(() => {
   }
 
   .VPDoc:not(.has-sidebar) .content {
-    max-width: 752px;
+    max-width: 47rem;
   }
 }
 
@@ -90,11 +90,11 @@ const pageName = computed(() => {
 
 @media (min-width: 1440px) {
   .VPDoc:not(.has-sidebar) .content {
-    max-width: 784px;
+    max-width: 49rem;
   }
 
   .VPDoc:not(.has-sidebar) .container {
-    max-width: 1104px;
+    max-width: 69rem;
   }
 }
 
@@ -108,7 +108,7 @@ const pageName = computed(() => {
   display: none;
   order: 2;
   flex-grow: 1;
-  padding-left: 32px;
+  padding-left: 2rem;
   width: 100%;
   max-width: 256px;
 }
@@ -116,8 +116,8 @@ const pageName = computed(() => {
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc(var(--vp-nav-height-desktop) * -1 - 32px);
-  padding-top: calc(var(--vp-nav-height-desktop) + 32px);
+  margin-top: calc(var(--vp-nav-height-desktop) * -1 - 2rem);
+  padding-top: calc(var(--vp-nav-height-desktop) + 2rem);
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -132,16 +132,16 @@ const pageName = computed(() => {
   position: fixed;
   bottom: 0;
   z-index: 10;
-  width: 224px;
-  height: 32px;
+  width: 14rem;
+  height: 2rem;
   background: linear-gradient(transparent, var(--vp-c-bg) 70%);
 }
 
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height-desktop) + 32px));
-  padding-bottom: 32px;
+  min-height: calc(100vh - (var(--vp-nav-height-desktop) + 2rem));
+  padding-bottom: 2rem;
 }
 
 .content {
@@ -152,7 +152,7 @@ const pageName = computed(() => {
 
 @media (min-width: 960px) {
   .content {
-    padding: 0 32px 128px;
+    padding: 0 2rem 8rem;
   }
 }
 
@@ -166,26 +166,26 @@ const pageName = computed(() => {
 
 .content-container {
   margin: 0 auto;
-  max-width: 688px;
+  max-width: 43rem;
 }
 
 .edit-link {
-  margin: 0 0 32px;
+  margin: 0 0 2rem;
 }
 
 .edit-link .vt-link {
-  font-size: 14px;
+  font-size: .875rem;
   color: var(--vt-c-brand);
   font-weight: 500;
 }
 
 .vt-icon {
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   color: var(--vt-c-brand);
   display: inline-block;
-  margin-right: 8px;
+  margin-right: .5rem;
   position: relative;
-  top: -1px;
+  top: -.0625rem;
 }
 </style>
diff --git a/src/client/theme-default/components/VPDocAside.vue b/src/client/theme-default/components/VPDocAside.vue
index 4232d156..e7804fcf 100644
--- a/src/client/theme-default/components/VPDocAside.vue
+++ b/src/client/theme-default/components/VPDocAside.vue
@@ -37,10 +37,10 @@ const { page, theme } = useData()
 
 .VPDocAside :deep(.spacer + .VPDocAsideSponsors),
 .VPDocAside :deep(.spacer + .VPDocAsideCarbonAds) {
-  margin-top: 24px;
+  margin-top: 1.5rem;
 }
 
 .VPDocAside :deep(.VPDocAsideSponsors + .VPDocAsideCarbonAds) {
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 </style>
diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue
index 26b556ad..f4b48646 100644
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/src/client/theme-default/components/VPDocAsideOutline.vue
@@ -72,34 +72,34 @@ function handleClick({ target: el }: Event) {
 
 .content {
   position: relative;
-  border-left: 1px solid var(--vp-c-divider-light);
-  padding-left: 16px;
-  font-size: 13px;
+  border-left: .0625rem solid var(--vp-c-divider-light);
+  padding-left: 1rem;
+  font-size: .8125rem;
   font-weight: 500;
 }
 
 .outline-marker {
   position: absolute;
-  top: 32px;
-  left: -1px;
+  top: 2rem;
+  left: -0.0625rem;
   z-index: 0;
   opacity: 0;
-  width: 1px;
-  height: 18px;
+  width: .0625rem;
+  height: 1.125rem;
   background-color: var(--vp-c-brand);
   transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
 }
 
 .outline-title {
-  letter-spacing: 0.4px;
-  line-height: 28px;
-  font-size: 13px;
+  letter-spacing: .025rem;
+  line-height: 1.75rem;
+  font-size: .8125rem;
   font-weight: 600;
 }
 
 .outline-link {
   display: block;
-  line-height: 28px;
+  line-height: 1.75rem;
   color: var(--vp-c-text-2);
   white-space: nowrap;
   overflow: hidden;
@@ -114,7 +114,7 @@ function handleClick({ target: el }: Event) {
 }
 
 .outline-link.nested {
-  padding-left: 13px;
+  padding-left: .8125rem;
 }
 
 .root {
diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index cb6deeed..f662ff0b 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -47,25 +47,24 @@ const control = usePrevNext()
 
 <style scoped>
 .VPDocFooter {
-  margin-top: 64px;
+  margin-top: 4rem;
 }
 
 .edit-info {
-  padding-bottom: 18px;
+  padding-bottom: 1.125rem;
 }
 
 @media (min-width: 640px) {
   .edit-info {
     display: flex;
     justify-content: space-between;
-    align-items: baseline;
-    padding-bottom: 14px;
+    padding-bottom: .875rem;
   }
 }
 
 .edit-link {
-  line-height: 32px;
-  font-size: 14px;
+  line-height: 2rem;
+  font-size: .875rem;
   font-weight: 500;
 }
 
@@ -82,15 +81,15 @@ const control = usePrevNext()
 }
 
 .edit-link-icon {
-  margin-right: 8px;
-  width: 14px;
-  height: 14px;
+  margin-right: .5rem;
+  width: .875rem;
+  height: .875rem;
   fill: currentColor;
 }
 
 .prev-next {
-  border-top: 1px solid var(--vp-c-divider-light);
-  padding-top: 24px;
+  border-top: .0625rem solid var(--vp-c-divider-light);
+  padding-top: 1.5rem;
 }
 
 @media (min-width: 640px) {
@@ -100,7 +99,7 @@ const control = usePrevNext()
 }
 
 .pager.has-prev {
-  padding-top: 8px;
+  padding-top: .5rem;
 }
 
 @media (min-width: 640px) {
@@ -113,15 +112,15 @@ const control = usePrevNext()
 
   .pager.has-prev {
     padding-top: 0;
-    padding-left: 16px;
+    padding-left: 1rem;
   }
 }
 
 .pager-link {
   display: block;
-  border: 1px solid var(--vp-c-divider-light);
+  border: .0625rem solid var(--vp-c-divider-light);
   border-radius: 8px;
-  padding: 11px 16px 13px;
+  padding: .6875rem 1rem .8125rem;
   width: 100%;
   height: 100%;
   transition: border-color 0.25s;
@@ -142,16 +141,16 @@ const control = usePrevNext()
 
 .desc {
   display: block;
-  line-height: 20px;
-  font-size: 12px;
+  line-height: 1.25rem;
+  font-size: .75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .title {
   display: block;
-  line-height: 20px;
-  font-size: 14px;
+  line-height: 1.25rem;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-brand);
   transition: color 0.25s;
diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index efaac851..f062b5fa 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -27,16 +27,16 @@ onMounted(() => {
 
 <style scoped>
 .VPLastUpdated {
-  line-height: 24px;
-  font-size: 14px;
+  line-height: 1.5rem;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 @media (min-width: 640px) {
   .VPLastUpdated {
-    line-height: 32px;
-    font-size: 14px;
+    line-height: 2rem;
+    font-size: .875rem;
     font-weight: 500;
   }
 }
diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index ed31ee73..9be30329 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -82,7 +82,7 @@ function onBlur() {
 .button {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 .75rem;
   height: var(--vp-nav-height-mobile);
   color: var(--vp-c-text-1);
   transition: color 0.5s;
@@ -98,7 +98,7 @@ function onBlur() {
   display: flex;
   align-items: center;
   line-height: var(--vp-nav-height-mobile);
-  font-size: 13px;
+  font-size: .8125rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
@@ -111,29 +111,29 @@ function onBlur() {
 }
 
 .option-icon {
-  margin-right: 0px;
-  width: 16px;
-  height: 16px;
+  margin-right: 0rem;
+  width: 1rem;
+  height: 1rem;
   fill: currentColor;
 }
 
 .text-icon {
-  margin-left: 4px;
-  width: 14px;
-  height: 14px;
+  margin-left: .25rem;
+  width: .875rem;
+  height: .875rem;
   fill: currentColor;
 }
 
 .icon {
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
   fill: currentColor;
   transition: fill 0.25s;
 }
 
 .menu {
   position: absolute;
-  top: calc(var(--vp-nav-height-mobile) / 2 + 20px);
+  top: calc(var(--vp-nav-height-mobile) / 2 + 1.25rem);
   right: 0;
   opacity: 0;
   visibility: hidden;
@@ -142,7 +142,7 @@ function onBlur() {
 
 @media (min-width: 960px) {
   .menu {
-    top: calc(var(--vp-nav-height-desktop) / 2 + 20px);
+    top: calc(var(--vp-nav-height-desktop) / 2 + 1.25rem);
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPFooter.vue b/src/client/theme-default/components/VPFooter.vue
index b8f6537c..8ababfe1 100644
--- a/src/client/theme-default/components/VPFooter.vue
+++ b/src/client/theme-default/components/VPFooter.vue
@@ -19,8 +19,8 @@ const { hasSidebar } = useSidebar()
 .VPFooter {
   position: relative;
   z-index: var(--vp-z-index-footer);
-  border-top: 1px solid var(--vp-c-divider-light);
-  padding: 32px 24px;
+  border-top: .0625rem solid var(--vp-c-divider-light);
+  padding: 2rem 1.5rem;
   background-color: var(--vp-c-bg);
 }
 
@@ -30,7 +30,7 @@ const { hasSidebar } = useSidebar()
 
 @media (min-width: 768px) {
   .VPFooter {
-    padding: 32px;
+    padding: 2rem;
   }
 }
 
@@ -42,8 +42,8 @@ const { hasSidebar } = useSidebar()
 
 .message,
 .copyright {
-  line-height: 24px;
-  font-size: 14px;
+  line-height: 1.5rem;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index 51987dc5..3555880d 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -55,12 +55,12 @@ defineProps<{
 <style scoped>
 .VPHero {
   margin-top: calc(var(--vp-nav-height) * -1);
-  padding: calc(var(--vp-nav-height) + 48px) 24px 48px;
+  padding: calc(var(--vp-nav-height) + 3rem) 1.5rem 3rem;
 }
 
 @media (min-width: 640px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + 5rem) 3rem 4rem;
   }
 }
 
@@ -68,7 +68,7 @@ defineProps<{
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 960px;
+  max-width: 60rem;
 }
 
 @media (min-width: 960px) {
@@ -110,10 +110,10 @@ defineProps<{
 
 .name,
 .text {
-  max-width: 392px;
-  letter-spacing: -0.4px;
-  line-height: 40px;
-  font-size: 32px;
+  max-width: 24.5rem;
+  letter-spacing: -0.025rem;
+  line-height: 2.5rem;
+  font-size: 2rem;
   font-weight: 700;
 }
 
@@ -136,17 +136,17 @@ defineProps<{
 @media (min-width: 640px) {
   .name,
   .text {
-    max-width: 576px;
-    line-height: 56px;
-    font-size: 48px;
+    max-width: 36rem;
+    line-height: 3.5rem;
+    font-size: 3rem;
   }
 }
 
 @media (min-width: 960px) {
   .name,
   .text {
-    line-height: 64px;
-    font-size: 56px;
+    line-height: 4rem;
+    font-size: 3.5rem;
   }
 
   .VPHero.has-image .name,
@@ -156,10 +156,10 @@ defineProps<{
 }
 
 .tagline {
-  padding-top: 16px;
-  max-width: 392px;
-  line-height: 28px;
-  font-size: 18px;
+  padding-top: 1rem;
+  max-width: 24.5rem;
+  line-height: 1.75rem;
+  font-size: 1.125rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
@@ -170,18 +170,18 @@ defineProps<{
 
 @media (min-width: 640px) {
   .tagline {
-    padding-top: 24px;
-    max-width: 576px;
-    line-height: 32px;
-    font-size: 20px;
+    padding-top: 1.5rem;
+    max-width: 36rem;
+    line-height: 2rem;
+    font-size: 1.25rem;
   }
 }
 
 @media (min-width: 960px) {
   .tagline {
-    padding-top: 24px;
-    line-height: 36px;
-    font-size: 24px;
+    padding-top: 1.5rem;
+    line-height: 2.25rem;
+    font-size: 1.5rem;
   }
 
   .VPHero.has-image .tagline {
@@ -192,8 +192,8 @@ defineProps<{
 .actions {
   display: flex;
   flex-wrap: wrap;
-  margin: -6px;
-  padding-top: 24px;
+  margin: -0.375rem;
+  padding-top: 1.5rem;
 }
 
 .VPHero.has-image .actions {
@@ -202,7 +202,7 @@ defineProps<{
 
 @media (min-width: 640px) {
   .actions {
-    padding-top: 32px;
+    padding-top: 2rem;
   }
 }
 
@@ -214,17 +214,17 @@ defineProps<{
 
 .action {
   flex-shrink: 0;
-  padding: 6px;
+  padding: .375rem;
 }
 
 .image {
   order: 1;
-  margin: -76px -24px -48px;
+  margin: -4.75rem -1.5rem -3rem;
 }
 
 @media (min-width: 640px) {
   .image {
-    margin: -108px -24px -48px;
+    margin: -6.75rem -1.5rem -3rem;
   }
 }
 
@@ -240,14 +240,14 @@ defineProps<{
 .image-container {
   position: relative;
   margin: 0 auto;
-  width: 320px;
-  height: 320px;
+  width: 20rem;
+  height: 20rem;
 }
 
 @media (min-width: 640px) {
   .image-container {
-    width: 392px;
-    height: 392px;
+    width: 24.5rem;
+    height: 24.5rem;
   }
 }
 
@@ -258,7 +258,7 @@ defineProps<{
     align-items: center;
     width: 100%;
     height: 100%;
-    transform: translate(-32px, -32px);
+    transform: translate(-2rem, -2rem);
   }
 }
 
@@ -267,8 +267,8 @@ defineProps<{
   top: 50%;
   left: 50%;
   border-radius: 50%;
-  width: 192px;
-  height: 192px;
+  width: 12rem;
+  height: 12rem;
   background-image: var(--vp-home-hero-image-background-image);
   filter: var(--vp-home-hero-image-filter);
   transform: translate(-50%, -50%);
@@ -276,15 +276,15 @@ defineProps<{
 
 @media (min-width: 640px) {
   .image-bg {
-    width: 256px;
-    height: 256px;
+    width: 16rem;
+    height: 16rem;
   }
 }
 
 @media (min-width: 960px) {
   .image-bg {
-    width: 320px;
-    height: 320px;
+    width: 20rem;
+    height: 20rem;
   }
 }
 
@@ -292,19 +292,19 @@ defineProps<{
   position: absolute;
   top: 50%;
   left: 50%;
-  max-width: 192px;
+  max-width: 12rem;
   transform: translate(-50%, -50%);
 }
 
 @media (min-width: 640px) {
   .image-src {
-    max-width: 256px;
+    max-width: 16rem;
   }
 }
 
 @media (min-width: 960px) {
   .image-src {
-    max-width: 320px;
+    max-width: 20rem;
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPHome.vue b/src/client/theme-default/components/VPHome.vue
index 12e85c39..886584b6 100644
--- a/src/client/theme-default/components/VPHome.vue
+++ b/src/client/theme-default/components/VPHome.vue
@@ -17,17 +17,17 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
 
 <style scoped>
 .VPHome {
-  padding-bottom: 96px;
+  padding-bottom: 6rem;
 }
 
 .VPHome :deep(.VPHomeSponsors) {
-  margin-top: 112px;
-  margin-bottom: -128px;
+  margin-top: 7rem;
+  margin-bottom: -8rem;
 }
 
 @media (min-width: 768px) {
   .VPHome {
-    padding-bottom: 128px;
+    padding-bottom: 8rem;
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPHomeFeatures.vue b/src/client/theme-default/components/VPHomeFeatures.vue
index 86fc2a50..a8f9e073 100644
--- a/src/client/theme-default/components/VPHomeFeatures.vue
+++ b/src/client/theme-default/components/VPHomeFeatures.vue
@@ -43,28 +43,28 @@ const grid = computed(() => {
 <style scoped>
 .VPHomeFeatures {
   position: relative;
-  padding: 0 24px;
+  padding: 0 1.5rem;
 }
 
 @media (min-width: 640px) {
   .VPHomeFeatures {
-    padding: 0 48px;
+    padding: 0 3rem;
   }
 }
 
 .container {
   margin: 0 auto;
-  max-width: 960px;
+  max-width: 60rem;
 }
 
 .items {
   display: flex;
   flex-wrap: wrap;
-  margin: -8px;
+  margin: -0.5rem;
 }
 
 .item {
-  padding: 8px;
+  padding: .5rem;
   width: 100%;
 }
 
diff --git a/src/client/theme-default/components/VPHomeSponsors.vue b/src/client/theme-default/components/VPHomeSponsors.vue
index 102912d5..8fab160e 100644
--- a/src/client/theme-default/components/VPHomeSponsors.vue
+++ b/src/client/theme-default/components/VPHomeSponsors.vue
@@ -48,46 +48,46 @@ defineProps<{
 
 <style scoped>
 .VPHomeSponsors {
-  border-top: 1px solid var(--vp-c-divider-light);
-  padding: 88px 24px 96px;
+  border-top: .0625rem solid var(--vp-c-divider-light);
+  padding: 5.5rem 1.5rem 6rem;
   background-color: var(--vp-c-bg);
 }
 
 .container {
   margin: 0 auto;
-  max-width: 960px;
+  max-width: 60rem;
 }
 
 .love {
   margin: 0 auto;
-  width: 28px;
-  height: 28px;
+  width: 1.75rem;
+  height: 1.75rem;
   color: var(--vp-c-text-3);
 }
 
 .icon {
-  width: 28px;
-  height: 28px;
+  width: 1.75rem;
+  height: 1.75rem;
   fill: currentColor;
 }
 
 .message {
   margin: 0 auto;
-  padding-top: 10px;
-  max-width: 320px;
+  padding-top: .625rem;
+  max-width: 20rem;
   text-align: center;
-  line-height: 24px;
-  font-size: 16px;
+  line-height: 1.5rem;
+  font-size: 1rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .sponsors {
-  padding-top: 32px;
+  padding-top: 2rem;
 }
 
 .action {
-  padding-top: 40px;
+  padding-top: 2.5rem;
   text-align: center;
 }
 </style>
diff --git a/src/client/theme-default/components/VPLink.vue b/src/client/theme-default/components/VPLink.vue
index bf29e4b5..8dd77bd5 100644
--- a/src/client/theme-default/components/VPLink.vue
+++ b/src/client/theme-default/components/VPLink.vue
@@ -28,10 +28,10 @@ const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
 <style scoped>
 .icon {
   display: inline-block;
-  margin-top: -1px;
-  margin-left: 4px;
-  width: 11px;
-  height: 11px;
+  margin-top: -0.0625rem;
+  margin-left: .25rem;
+  width: .6875rem;
+  height: .6875rem;
   fill: var(--vp-c-text-3);
   transition: fill 0.25s;
 }
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index cd6dbe4e..9e7c0054 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -44,7 +44,7 @@ function scrollToTop() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid var(--vp-c-divider-light);
+  border-bottom: .0625rem solid var(--vp-c-divider-light);
   width: 100%;
   background-color: var(--vp-c-bg);
   transition: border-color 0.5s, background-color 0.5s;
@@ -59,9 +59,9 @@ function scrollToTop() {
 .menu {
   display: flex;
   align-items: center;
-  padding: 12px 24px 11px;
-  line-height: 24px;
-  font-size: 12px;
+  padding: .75rem 1.5rem .6875rem;
+  line-height: 1.5rem;
+  font-size: .75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
@@ -74,22 +74,22 @@ function scrollToTop() {
 
 @media (min-width: 768px) {
   .menu {
-    padding: 0 32px;
+    padding: 0 2rem;
   }
 }
 
 .menu-icon {
-  margin-right: 8px;
-  width: 16px;
-  height: 16px;
+  margin-right: .5rem;
+  width: 1rem;
+  height: 1rem;
   fill: currentColor;
 }
 
 .top-link {
   display: block;
-  padding: 12px 24px 11px;
-  line-height: 24px;
-  font-size: 12px;
+  padding: .75rem 1.5rem .6875rem;
+  line-height: 1.5rem;
+  font-size: .75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
@@ -102,7 +102,7 @@ function scrollToTop() {
 
 @media (min-width: 768px) {
   .top-link {
-    padding: 12px 32px 11px;
+    padding: .75rem 2rem .6875rem;
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPMenu.vue b/src/client/theme-default/components/VPMenu.vue
index 7dad2062..5fd689ff 100644
--- a/src/client/theme-default/components/VPMenu.vue
+++ b/src/client/theme-default/components/VPMenu.vue
@@ -23,9 +23,9 @@ defineProps<{
 <style scoped>
 .VPMenu {
   border-radius: 12px;
-  padding: 12px;
-  min-width: 128px;
-  border: 1px solid var(--vp-c-divider-light);
+  padding: .75rem;
+  min-width: 8rem;
+  border: .0625rem solid var(--vp-c-divider-light);
   background-color: var(--vp-c-bg);
   box-shadow: var(--vp-shadow-3);
   transition: background-color 0.5s;
@@ -36,13 +36,13 @@ defineProps<{
 }
 
 .VPMenu :deep(.group) {
-  margin: 0 -12px;
-  padding: 0 12px 12px;
+  margin: 0 -0.75rem;
+  padding: 0 .75rem .75rem;
 }
 
 .VPMenu :deep(.group + .group) {
-  border-top: 1px solid var(--vp-c-divider-light);
-  padding: 11px 12px 12px;
+  border-top: .0625rem solid var(--vp-c-divider-light);
+  padding: .6875rem .75rem .75rem;
 }
 
 .VPMenu :deep(.group:last-child) {
@@ -50,25 +50,25 @@ defineProps<{
 }
 
 .VPMenu :deep(.group + .item) {
-  border-top: 1px solid var(--vp-c-divider-light);
-  padding: 11px 16px 0;
+  border-top: .0625rem solid var(--vp-c-divider-light);
+  padding: .6875rem 1rem 0;
 }
 
 .VPMenu :deep(.item) {
-  padding: 0 16px;
+  padding: 0 1rem;
   white-space: nowrap;
 }
 
 .VPMenu :deep(.label) {
   flex-grow: 1;
-  line-height: 28px;
-  font-size: 12px;
+  line-height: 1.75rem;
+  font-size: .75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color .5s;
 }
 
 .VPMenu :deep(.action) {
-  padding-left: 24px;
+  padding-left: 1.5rem;
 }
 </style>
diff --git a/src/client/theme-default/components/VPMenuGroup.vue b/src/client/theme-default/components/VPMenuGroup.vue
index 167874be..b7b8f068 100644
--- a/src/client/theme-default/components/VPMenuGroup.vue
+++ b/src/client/theme-default/components/VPMenuGroup.vue
@@ -19,9 +19,9 @@ defineProps<{
 
 <style scoped>
 .VPMenuGroup {
-  margin: 12px -12px 0;
-  border-top: 1px solid var(--vp-c-divider-light);
-  padding: 12px 12px 0;
+  margin: .75rem -0.75rem 0;
+  border-top: .0625rem solid var(--vp-c-divider-light);
+  padding: .75rem .75rem 0;
 }
 
 .VPMenuGroup:first-child {
@@ -31,14 +31,14 @@ defineProps<{
 }
 
 .VPMenuGroup + .VPMenuGroup {
-  margin-top: 12px;
-  border-top: 1px solid var(--vp-c-divider-light);
+  margin-top: .75rem;
+  border-top: .0625rem solid var(--vp-c-divider-light);
 }
 
 .title {
-  padding: 0 12px;
-  line-height: 32px;
-  font-size: 14px;
+  padding: 0 .75rem;
+  line-height: 2rem;
+  font-size: .875rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
   transition: color 0.25s;
diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
index 8fb00a69..55b435c9 100644
--- a/src/client/theme-default/components/VPMenuLink.vue
+++ b/src/client/theme-default/components/VPMenuLink.vue
@@ -23,17 +23,17 @@ const { page } = useData()
 
 <style scoped>
 .VPMenuGroup + .VPMenuLink {
-  margin: 12px -12px 0;
-  border-top: 1px solid var(--vp-c-divider-light);
-  padding: 12px 12px 0;
+  margin: .75rem -0.75rem 0;
+  border-top: .0625rem solid var(--vp-c-divider-light);
+  padding: .75rem .75rem 0;
 }
 
 .link {
   display: block;
   border-radius: 6px;
-  padding: 0 12px;
-  line-height: 32px;
-  font-size: 14px;
+  padding: 0 .75rem;
+  line-height: 2rem;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   white-space: nowrap;
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 4e27b1f6..c21dc5aa 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -45,8 +45,8 @@ const { hasSidebar } = useSidebar()
 <style scoped>
 .VPNavBar {
   position: relative;
-  border-bottom: 1px solid var(--vp-c-divider-light);
-  padding: 0 8px 0 24px;
+  border-bottom: .0625rem solid var(--vp-c-divider-light);
+  padding: 0 .5rem 0 1.5rem;
   height: var(--vp-nav-height-mobile);
   background-color: var(--vt-c-bg);
   transition: border-color 0.5s, background-color 0.5s;
@@ -54,7 +54,7 @@ const { hasSidebar } = useSidebar()
 
 @media (min-width: 768px) {
   .VPNavBar {
-    padding: 0 32px;
+    padding: 0 2rem;
   }
 }
 
@@ -84,7 +84,7 @@ const { hasSidebar } = useSidebar()
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
-  max-width: calc(var(--vp-layout-max-width) - 64px);
+  max-width: calc(var(--vp-layout-max-width) - 4rem);
 }
 
 .content {
@@ -99,24 +99,24 @@ const { hasSidebar } = useSidebar()
 .menu + .social-links::before,
 .translations + .appearance::before,
 .appearance + .social-links::before {
-  margin-right: 8px;
-  margin-left: 8px;
-  width: 1px;
-  height: 24px;
+  margin-right: .5rem;
+  margin-left: .5rem;
+  width: .0625rem;
+  height: 1.5rem;
   background-color: var(--vp-c-divider-light);
   content: "";
 }
 
 .menu + .appearance::before,
 .translations + .appearance::before {
-  margin-right: 16px;
+  margin-right: 1rem;
 }
 
 .appearance + .social-links::before {
-  margin-left: 16px;
+  margin-left: 1rem;
 }
 
 .social-links {
-  margin-right: -8px;
+  margin-right: -0.5rem;
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarExtra.vue b/src/client/theme-default/components/VPNavBarExtra.vue
index aceca5ce..19c4c3cd 100644
--- a/src/client/theme-default/components/VPNavBarExtra.vue
+++ b/src/client/theme-default/components/VPNavBarExtra.vue
@@ -38,7 +38,7 @@ const { site, theme } = useData()
 <style scoped>
 .VPNavBarExtra {
   display: none;
-  margin-right: -12px;
+  margin-right: -0.75rem;
 }
 
 @media (min-width: 768px) {
@@ -54,9 +54,9 @@ const { site, theme } = useData()
 }
 
 .trans-title {
-  padding: 0 24px 0 12px;
-  line-height: 32px;
-  font-size: 14px;
+  padding: 0 1.5rem 0 .75rem;
+  line-height: 2rem;
+  font-size: .875rem;
   font-weight: 700;
   color: var(--vp-c-text-1);
 }
@@ -65,18 +65,18 @@ const { site, theme } = useData()
 .item.social-links {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 .75rem;
 }
 
 .item.appearance {
-  min-width: 176px;
+  min-width: 11rem;
 }
 
 .appearance-action {
-  margin-right: -2px;
+  margin-right: -0.125rem;
 }
 
 .social-links-list {
-  margin: -4px -8px;
+  margin: -0.25rem -0.5rem;
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarHamburger.vue b/src/client/theme-default/components/VPNavBarHamburger.vue
index 1e014177..3039369b 100644
--- a/src/client/theme-default/components/VPNavBarHamburger.vue
+++ b/src/client/theme-default/components/VPNavBarHamburger.vue
@@ -31,7 +31,7 @@ defineEmits<{
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 48px;
+  width: 3rem;
   height: var(--vp-nav-height);
 }
 
@@ -43,8 +43,8 @@ defineEmits<{
 
 .container {
   position: relative;
-  width: 16px;
-  height: 14px;
+  width: 1rem;
+  height: .875rem;
   overflow: hidden;
 }
 
@@ -52,9 +52,9 @@ defineEmits<{
 .container:hover .middle { top: 6; left: 0; transform: translateX(0); }
 .container:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
 
-.container.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
-.container.active .middle { top: 6px; transform: translateX(16px); }
-.container.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
+.container.active .top    { top: .375rem; transform: translateX(0) rotate(225deg); }
+.container.active .middle { top: .375rem; transform: translateX(16px); }
+.container.active .bottom { top: .375rem; transform: translateX(0) rotate(135deg); }
 
 .container.active:hover .top,
 .container.active:hover .middle,
@@ -67,13 +67,13 @@ defineEmits<{
 .middle,
 .bottom {
   position: absolute;
-  width: 16px;
-  height: 2px;
+  width: 1rem;
+  height: .125rem;
   background-color: var(--vp-c-text-1);
   transition: top .25s, background-color .5s, transform .25s;
 }
 
 .top    { top: 0; left: 0; transform: translateX(0); }
-.middle { top: 6px; left: 0; transform: translateX(8px); }
-.bottom { top: 12px; left: 0; transform: translateX(4px); }
+.middle { top: .375rem; left: 0; transform: translateX(8px); }
+.bottom { top: .75rem; left: 0; transform: translateX(4px); }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarMenuLink.vue b/src/client/theme-default/components/VPNavBarMenuLink.vue
index 556f641f..7b51abe1 100644
--- a/src/client/theme-default/components/VPNavBarMenuLink.vue
+++ b/src/client/theme-default/components/VPNavBarMenuLink.vue
@@ -32,9 +32,9 @@ const { page } = useData()
 .VPNavBarMenuLink {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 .75rem;
   line-height: var(--vp-nav-height-mobile);
-  font-size: 14px;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
index 1d2973a5..00d09f3d 100644
--- a/src/client/theme-default/components/VPNavBarSearch.vue
+++ b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -96,13 +96,13 @@ function load() {
 @media (min-width: 768px) {
   .VPNavBarSearch {
     flex-grow: 1;
-    padding-left: 24px;
+    padding-left: 1.5rem;
   }
 }
 
 @media (min-width: 960px) {
   .VPNavBarSearch {
-    padding-left: 32px;
+    padding-left: 2rem;
   }
 }
 
@@ -134,8 +134,8 @@ function load() {
   align-items: center;
   margin: 0;
   padding: 0;
-  width: 32px;
-  height: 55px;
+  width: 2rem;
+  height: 3.4375rem;
   background: transparent;
   transition: border-color 0.25s;
 }
@@ -145,8 +145,8 @@ function load() {
 }
 
 .DocSearch-Button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
+  outline: .0625rem dotted;
+  outline: .3125rem auto -webkit-focus-ring-color;
 }
 
 .DocSearch-Button:focus:not(:focus-visible) {
@@ -156,11 +156,11 @@ function load() {
 @media (min-width: 768px) {
   .DocSearch-Button {
     justify-content: flex-start;
-    border: 1px solid transparent;
+    border: .0625rem solid transparent;
     border-radius: 8px;
-    padding: 0 10px 0 12px;
+    padding: 0 .625rem 0 .75rem;
     width: 100%;
-    height: 40px;
+    height: 2.5rem;
     background-color: var(--vp-c-bg-alt);
   }
 
@@ -177,8 +177,8 @@ function load() {
 
 .DocSearch-Button .DocSearch-Search-Icon {
   position: relative;
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
   color: var(--vp-c-text-1);
   fill: currentColor;
   transition: color 0.5s;
@@ -190,19 +190,19 @@ function load() {
 
 @media (min-width: 768px) {
   .DocSearch-Button .DocSearch-Search-Icon {
-    top: 1px;
-    margin-right: 8px;
-    width: 14px;
-    height: 14px;
+    top: .0625rem;
+    margin-right: .5rem;
+    width: .875rem;
+    height: .875rem;
     color: var(--vp-c-text-2);
   }
 }
 
 .DocSearch-Button .DocSearch-Button-Placeholder {
   display: none;
-  margin-top: 2px;
-  padding: 0 16px 0 0;
-  font-size: 13px;
+  margin-top: .125rem;
+  padding: 0 1rem 0 0;
+  font-size: .8125rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
@@ -232,35 +232,35 @@ function load() {
 
 .DocSearch-Button .DocSearch-Button-Key {
   display: block;
-  margin: 2px 0 0 0;
-  border: 1px solid var(--vp-c-divider);
+  margin: .125rem 0 0 0;
+  border: .0625rem solid var(--vp-c-divider);
   border-right: none;
   border-radius: 4px 0 0 4px;
-  padding-left: 6px;
+  padding-left: .375rem;
   min-width: 0;
   width: auto;
-  height: 22px;
-  line-height: 22px;
+  height: 1.375rem;
+  line-height: 1.375rem;
   font-family: var(--vp-font-family-base);
-  font-size: 12px;
+  font-size: .75rem;
   font-weight: 500;
   transition: color 0.5s, border-color 0.5s;
 }
 
 .DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
-  border-right: 1px solid var(--vp-c-divider);
+  border-right: .0625rem solid var(--vp-c-divider);
   border-left: none;
   border-radius: 0 4px 4px 0;
-  padding-left: 2px;
-  padding-right: 6px;
+  padding-left: .125rem;
+  padding-right: .375rem;
 }
 
 .dark .DocSearch-Footer {
-  border-top: 1px solid var(--vp-c-divider);
+  border-top: .0625rem solid var(--vp-c-divider);
 }
 
 .DocSearch-Form {
-  border: 1px solid var(--vp-c-brand);
+  border: .0625rem solid var(--vp-c-brand);
   background-color: var(--vp-c-white);
 }
 
diff --git a/src/client/theme-default/components/VPNavBarTitle.vue b/src/client/theme-default/components/VPNavBarTitle.vue
index c09c06dc..b027a1c2 100644
--- a/src/client/theme-default/components/VPNavBarTitle.vue
+++ b/src/client/theme-default/components/VPNavBarTitle.vue
@@ -19,14 +19,14 @@ const { hasSidebar } = useSidebar()
 <style scoped>
 .VPNavBarTitle {
   flex-shrink: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: .0625rem solid transparent;
   transition: background-color 0.5s;
 }
 
 @media (min-width: 960px) {
   .VPNavBarTitle.has-sidebar {
-    margin-right: 32px;
-    width: calc(var(--vp-sidebar-width) - 64px);
+    margin-right: 2rem;
+    width: calc(var(--vp-sidebar-width) - 4rem);
     border-bottom-color: var(--vp-c-divider-light);
     background-color: var(--vp-c-bg-alt);
   }
@@ -37,7 +37,7 @@ const { hasSidebar } = useSidebar()
   align-items: center;
   width: 100%;
   height: var(--vp-nav-height);
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
   transition: opacity 0.25s;
@@ -54,7 +54,7 @@ const { hasSidebar } = useSidebar()
 }
 
 .logo {
-  margin-right: 8px;
-  height: 24px;
+  margin-right: .5rem;
+  height: 1.5rem;
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarTranslations.vue b/src/client/theme-default/components/VPNavBarTranslations.vue
index fe91597b..9402ed9d 100644
--- a/src/client/theme-default/components/VPNavBarTranslations.vue
+++ b/src/client/theme-default/components/VPNavBarTranslations.vue
@@ -36,9 +36,9 @@ const { theme } = useData()
 }
 
 .title {
-  padding: 0 24px 0 12px;
-  line-height: 32px;
-  font-size: 14px;
+  padding: 0 1.5rem 0 .75rem;
+  line-height: 2rem;
+  font-size: .875rem;
   font-weight: 700;
   color: var(--vp-c-text-1);
 }
diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
index 7204ac8f..7fd009c1 100644
--- a/src/client/theme-default/components/VPNavScreen.vue
+++ b/src/client/theme-default/components/VPNavScreen.vue
@@ -45,7 +45,7 @@ function unlockBodyScroll() {
   right: 0;
   bottom: 0;
   left: 0;
-  padding: 0 32px;
+  padding: 0 2rem;
   width: 100%;
   background-color: var(--vp-c-bg);
   overflow-y: auto;
@@ -69,7 +69,7 @@ function unlockBodyScroll() {
 
 .VPNavScreen.fade-enter-from .container,
 .VPNavScreen.fade-leave-to .container {
-  transform: translateY(-8px);
+  transform: translateY(-0.5rem);
 }
 
 @media (min-width: 768px) {
@@ -80,21 +80,21 @@ function unlockBodyScroll() {
 
 .container {
   margin: 0 auto;
-  padding: 24px 0 96px;
-  max-width: 288px;
+  padding: 1.5rem 0 6rem;
+  max-width: 18rem;
 }
 
 .menu + .translations,
 .menu + .appearance,
 .translations + .appearance {
-  margin-top: 24px;
+  margin-top: 1.5rem;
 }
 
 .menu + .social-links {
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 
 .appearance + .social-links {
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavScreenAppearance.vue b/src/client/theme-default/components/VPNavScreenAppearance.vue
index 3a804195..0bfa6ee2 100644
--- a/src/client/theme-default/components/VPNavScreenAppearance.vue
+++ b/src/client/theme-default/components/VPNavScreenAppearance.vue
@@ -18,14 +18,14 @@ const { site } = useData()
   justify-content: space-between;
   align-items: center;
   border-radius: 8px;
-  padding: 12px 14px 12px 16px;
+  padding: .75rem .875rem .75rem 1rem;
   background-color: var(--vp-c-bg-soft);
   transition: background-color 0.5s;
 }
 
 .text {
-  line-height: 24px;
-  font-size: 12px;
+  line-height: 1.5rem;
+  font-size: .75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
index d66e02c9..27e19fda 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
@@ -54,8 +54,8 @@ function toggle() {
 
 <style scoped>
 .VPNavScreenMenuGroup {
-  border-bottom: 1px solid var(--vp-c-divider-light);
-  height: 48px;
+  border-bottom: .0625rem solid var(--vp-c-divider-light);
+  height: 3rem;
   overflow: hidden;
   transition: border-color 0.5s;
 }
@@ -69,12 +69,12 @@ function toggle() {
 }
 
 .VPNavScreenMenuGroup.open {
-  padding-bottom: 10px;
+  padding-bottom: .625rem;
   height: auto;
 }
 
 .VPNavScreenMenuGroup.open .button {
-  padding-bottom: 6px;
+  padding-bottom: .375rem;
   color: var(--vp-c-brand);
 }
 
@@ -86,10 +86,10 @@ function toggle() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 4px 11px 0;
+  padding: .75rem .25rem .6875rem 0;
   width: 100%;
-  line-height: 24px;
-  font-size: 14px;
+  line-height: 1.5rem;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
@@ -100,18 +100,18 @@ function toggle() {
 }
 
 .button-icon {
-  width: 14px;
-  height: 14px;
+  width: .875rem;
+  height: .875rem;
   fill: var(--vp-c-text-2);
   transition: fill 0.5s, transform 0.25s;
 }
 
 .group:first-child {
-  padding-top: 0px;
+  padding-top: 0rem;
 }
 
 .group + .group,
 .group + .item {
-  padding-top: 4px;
+  padding-top: .25rem;
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
index 61f5bd83..11e28911 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
@@ -19,12 +19,12 @@ const closeScreen = inject('close-screen') as () => void
 <style scoped>
 .VPNavScreenMenuGroupLink {
   display: block;
-  line-height: 32px;
-  font-size: 13px;
+  line-height: 2rem;
+  font-size: .8125rem;
   font-weight: 400;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
-  margin-left: 12px;
+  margin-left: .75rem;
 }
 
 .VPNavScreenMenuGroupLink:hover {
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue b/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue
index 35fa4be3..7a3d1fc7 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue
@@ -26,8 +26,8 @@ defineProps<{
 }
 
 .title {
-  line-height: 32px;
-  font-size: 13px;
+  line-height: 2rem;
+  font-size: .8125rem;
   font-weight: 700;
   color: var(--vp-c-text-2);
   transition: color 0.25s;
diff --git a/src/client/theme-default/components/VPNavScreenMenuLink.vue b/src/client/theme-default/components/VPNavScreenMenuLink.vue
index f7ae9800..352e638e 100644
--- a/src/client/theme-default/components/VPNavScreenMenuLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuLink.vue
@@ -19,10 +19,10 @@ const closeScreen = inject('close-screen') as () => void
 <style scoped>
 .VPNavScreenMenuLink {
   display: block;
-  border-bottom: 1px solid var(--vp-c-divider-light);
-  padding: 12px 0 11px;
-  line-height: 24px;
-  font-size: 14px;
+  border-bottom: .0625rem solid var(--vp-c-divider-light);
+  padding: .75rem 0 .6875rem;
+  line-height: 1.5rem;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: border-color 0.5s, color 0.25s;
diff --git a/src/client/theme-default/components/VPNavScreenTranslations.vue b/src/client/theme-default/components/VPNavScreenTranslations.vue
index 7305554e..a28d7000 100644
--- a/src/client/theme-default/components/VPNavScreenTranslations.vue
+++ b/src/client/theme-default/components/VPNavScreenTranslations.vue
@@ -31,7 +31,7 @@ function toggle() {
 
 <style scoped>
 .VPNavScreenTranslations {
-  height: 24px;
+  height: 1.5rem;
   overflow: hidden;
 }
 
@@ -42,32 +42,32 @@ function toggle() {
 .title {
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
 }
 
 .icon {
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
   fill: currentColor;
 }
 
 .icon.lang {
-  margin-right: 8px;
+  margin-right: .5rem;
 }
 
 .icon.chevron {
-  margin-left: 4px;
+  margin-left: .25rem;
 }
 
 .list {
-  padding: 4px 0 0 24px;
+  padding: .25rem 0 0 1.5rem;
 }
 
 .link {
-  line-height: 32px;
-  font-size: 13px;
+  line-height: 2rem;
+  font-size: .8125rem;
   color: var(--vp-c-text-1);
 }
 </style>
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 4d486e80..ae745a63 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -52,9 +52,9 @@ watchPostEffect(async () => {
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);
-  padding: 32px 32px 96px;
-  width: calc(100vw - 64px);
-  max-width: 320px;
+  padding: 2rem 2rem 6rem;
+  width: calc(100vw - 4rem);
+  max-width: 20rem;
   background-color: var(--vp-c-bg);
   opacity: 0;
   box-shadow: var(--vp-c-shadow-3);
@@ -81,7 +81,7 @@ watchPostEffect(async () => {
   .VPSidebar {
     z-index: 1;
     padding-top: var(--vp-nav-height-desktop);
-    padding-bottom: 128px;
+    padding-bottom: 8rem;
     width: var(--vp-sidebar-width);
     max-width: 100%;
     width: var(--vp-sidebar-width);
@@ -96,8 +96,8 @@ watchPostEffect(async () => {
 
 @media (min-width: 1440px) {
   .VPSidebar {
-    padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2);
-    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left: calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2);
+    width: calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2 + var(--vp-sidebar-width) - 2rem);
   }
 }
 
@@ -106,19 +106,19 @@ watchPostEffect(async () => {
 }
 
 .group + .group {
-  margin-top: 32px;
-  border-top: 1px solid var(--vp-c-divider-light);
-  padding-top: 10px;
+  margin-top: 2rem;
+  border-top: .0625rem solid var(--vp-c-divider-light);
+  padding-top: .625rem;
 }
 
 @media (min-width: 960px) {
   .group {
-    padding-top: 10px;
-    width: calc(var(--vp-sidebar-width) - 64px);
+    padding-top: .625rem;
+    width: calc(var(--vp-sidebar-width) - 4rem);
   }
 
   .group + .group {
-    margin-top: 24px;
+    margin-top: 1.5rem;
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPSidebarGroup.vue b/src/client/theme-default/components/VPSidebarGroup.vue
index 19890585..f17a15b7 100644
--- a/src/client/theme-default/components/VPSidebarGroup.vue
+++ b/src/client/theme-default/components/VPSidebarGroup.vue
@@ -48,10 +48,10 @@ function toggle() {
 }
 
 .title-text {
-  padding-top: 6px;
-  padding-bottom: 6px;
-  line-height: 20px;
-  font-size: 14px;
+  padding-top: .375rem;
+  padding-bottom: .375rem;
+  line-height: 1.25rem;
+  font-size: .875rem;
   font-weight: 700;
   color: var(--vp-c-text-1);
 }
@@ -59,10 +59,10 @@ function toggle() {
 .action {
   display: none;
   position: relative;
-  margin-right: -8px;
+  margin-right: -0.5rem;
   border-radius: 4px;
-  width: 32px;
-  height: 32px;
+  width: 2rem;
+  height: 2rem;
   color: var(--vp-c-text-3);
   transition: color 0.25s;
 }
@@ -77,10 +77,10 @@ function toggle() {
 
 .icon {
   position: absolute;
-  top: 8px;
-  left: 8px;
-  width: 16px;
-  height: 16px;
+  top: .5rem;
+  left: .5rem;
+  width: 1rem;
+  height: 1rem;
   fill: currentColor;
 }
 
@@ -95,13 +95,13 @@ function toggle() {
 }
 
 .VPSidebarGroup.collapsed .items {
-  margin-bottom: -22px;
+  margin-bottom: -1.375rem;
   max-height: 0;
 }
 
 @media (min-width: 960px) {
   .VPSidebarGroup.collapsed .items {
-    margin-bottom: -14px;
+    margin-bottom: -0.875rem;
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
index 41937655..7f191ae1 100644
--- a/src/client/theme-default/components/VPSidebarLink.vue
+++ b/src/client/theme-default/components/VPSidebarLink.vue
@@ -27,7 +27,7 @@ const closeSideBar = inject('close-sidebar') as () => void
 <style scoped>
 .link {
   display: block;
-  padding: 6px 0;
+  padding: .375rem 0;
 }
 
 .link:hover .link-text {
@@ -41,8 +41,8 @@ const closeSideBar = inject('close-sidebar') as () => void
 }
 
 .link-text {
-  line-height: 20px;
-  font-size: 14px;
+  line-height: 1.25rem;
+  font-size: .875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
diff --git a/src/client/theme-default/components/VPSkipLink.vue b/src/client/theme-default/components/VPSkipLink.vue
index 5324e8bd..b84125d2 100644
--- a/src/client/theme-default/components/VPSkipLink.vue
+++ b/src/client/theme-default/components/VPSkipLink.vue
@@ -39,12 +39,12 @@ function focusOnTargetAnchor({ target }: Event) {
 
 <style scoped>
 .VPSkipLink {
-  top: 8px;
-  left: 8px;
-  padding: 8px 16px;
+  top: .5rem;
+  left: .5rem;
+  padding: .5rem 1rem;
   z-index: 999;
   border-radius: 8px;
-  font-size: 12px;
+  font-size: .75rem;
   font-weight: bold;
   text-decoration: none;
   color: var(--vp-c-brand);
@@ -65,8 +65,8 @@ function focusOnTargetAnchor({ target }: Event) {
 
 @media (min-width: 1280px) {
   .VPSkipLink {
-    top: 14px;
-    left: 16px;
+    top: .875rem;
+    left: 1rem;
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPSocialLink.vue b/src/client/theme-default/components/VPSocialLink.vue
index 5b86ccdd..684ada09 100644
--- a/src/client/theme-default/components/VPSocialLink.vue
+++ b/src/client/theme-default/components/VPSocialLink.vue
@@ -44,8 +44,8 @@ const icons = {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 36px;
-  height: 36px;
+  width: 2.25rem;
+  height: 2.25rem;
   color: var(--vp-c-text-2);
   transition: color .5s;
 }
@@ -56,8 +56,8 @@ const icons = {
 }
 
 .icon {
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
   fill: currentColor;
 }
 </style>
diff --git a/src/client/theme-default/components/VPSwitch.vue b/src/client/theme-default/components/VPSwitch.vue
index 94c47b70..68172c19 100644
--- a/src/client/theme-default/components/VPSwitch.vue
+++ b/src/client/theme-default/components/VPSwitch.vue
@@ -13,10 +13,10 @@
   position: relative;
   border-radius: 11px;
   display: block;
-  width: 40px;
-  height: 22px;
+  width: 2.5rem;
+  height: 1.375rem;
   flex-shrink: 0;
-  border: 1px solid var(--vp-c-divider);
+  border: .0625rem solid var(--vp-c-divider);
   background-color: var(--vp-c-bg-mute);
   transition: border-color 0.25s, background-color 0.25s;
 }
@@ -27,10 +27,10 @@
 
 .check {
   position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 18px;
-  height: 18px;
+  top: .0625rem;
+  left: .0625rem;
+  width: 1.125rem;
+  height: 1.125rem;
   border-radius: 50%;
   background-color: var(--vp-c-white);
   box-shadow: var(--vp-shadow-1);
@@ -44,18 +44,18 @@
 .icon {
   position: relative;
   display: block;
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   border-radius: 50%;
   overflow: hidden;
 }
 
 .icon :deep(svg) {
   position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 12px;
-  height: 12px;
+  top: .1875rem;
+  left: .1875rem;
+  width: .75rem;
+  height: .75rem;
   fill: var(--vp-c-text-2);
 }
 
diff --git a/src/client/theme-default/components/icons/VPIconAlignJustify.vue b/src/client/theme-default/components/icons/VPIconAlignJustify.vue
index 653dab13..cac090d0 100644
--- a/src/client/theme-default/components/icons/VPIconAlignJustify.vue
+++ b/src/client/theme-default/components/icons/VPIconAlignJustify.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" height="1.5rem" width="1.5rem">
     <path d="M21,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,11,21,11z" />
     <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
     <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />
diff --git a/src/client/theme-default/components/icons/VPIconExternalLink.vue b/src/client/theme-default/components/icons/VPIconExternalLink.vue
index 72459909..b871701d 100644
--- a/src/client/theme-default/components/icons/VPIconExternalLink.vue
+++ b/src/client/theme-default/components/icons/VPIconExternalLink.vue
@@ -3,9 +3,9 @@
     xmlns="http://www.w3.org/2000/svg"
     aria-hidden="true"
     focusable="false"
-    height="24px"
+    height="1.5rem"
     viewBox="0 0 24 24"
-    width="24px"
+    width="1.5rem"
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" />
diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css
index 9b6044ed..b838761c 100644
--- a/src/client/theme-default/styles/base.css
+++ b/src/client/theme-default/styles/base.css
@@ -6,7 +6,7 @@
 
 html {
   line-height: 1.4;
-  font-size: 16px;
+  font-size: 1rem;
   -webkit-text-size-adjust: 100%;
 }
 
@@ -17,11 +17,11 @@ html.dark {
 body {
   margin: 0;
   width: 100%;
-  min-width: 320px;
+  min-width: 20rem;
   min-height: 100vh;
-  line-height: 24px;
+  line-height: 1.5rem;
   font-family: var(--vp-font-family-base);
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 400;
   color: var(--vp-c-text-1);
   background-color: var(--vp-c-bg);
@@ -43,8 +43,8 @@ h4,
 h5,
 h6 {
   margin: 0;
-  line-height: 24px;
-  font-size: 16px;
+  line-height: 1.5rem;
+  font-size: 1rem;
   font-weight: 400;
 }
 
@@ -154,8 +154,8 @@ button,
 
 button:focus,
 button:focus-visible {
-  outline: 1px dotted;
-  outline: 4px auto -webkit-focus-ring-color;
+  outline: .0625rem dotted;
+  outline: .25rem auto -webkit-focus-ring-color;
 }
 
 button:focus:not(:focus-visible) {
diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css
index 81bc71e4..3a41b3dd 100644
--- a/src/client/theme-default/styles/components/custom-block.css
+++ b/src/client/theme-default/styles/components/custom-block.css
@@ -1,9 +1,9 @@
 .custom-block {
-  border: 1px solid transparent;
+  border: .0625rem solid transparent;
   border-radius: 8px;
-  padding: 16px 16px 8px;
-  line-height: 24px;
-  font-size: 14px;
+  padding: 1rem 1rem .5rem;
+  line-height: 1.5rem;
+  font-size: .875rem;
   color: var(--vp-c-text-2);
 }
 
@@ -62,16 +62,16 @@
 }
 
 .custom-block p + p {
-  margin: 8px 0;
+  margin: .5rem 0;
 }
 
 .custom-block.details summary {
-  margin: 0 0 8px;
+  margin: 0 0 .5rem;
   font-weight: 700;
 }
 
 .custom-block.details summary + p {
-  margin: 8px 0;
+  margin: .5rem 0;
 }
 
 .custom-block a {
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index e43aa8f3..39f5dd9a 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -15,24 +15,24 @@
 
 .vp-doc h1 {
   letter-spacing: -0.02em;
-  line-height: 40px;
-  font-size: 28px;
+  line-height: 2.5rem;
+  font-size: 1.75rem;
 }
 
 .vp-doc h2 {
-  margin: 48px 0 0;
-  border-top: 1px solid var(--vp-c-divider-light);
-  padding-top: 24px;
+  margin: 3rem 0 0;
+  border-top: .0625rem solid var(--vp-c-divider-light);
+  padding-top: 1.5rem;
   letter-spacing: -0.02em;
-  line-height: 32px;
-  font-size: 24px;
+  line-height: 2rem;
+  font-size: 1.5rem;
 }
 
 .vp-doc h3 {
-  margin: 32px 0 0;
+  margin: 2rem 0 0;
   letter-spacing: -0.01em;
-  line-height: 28px;
-  font-size: 20px;
+  line-height: 1.75rem;
+  font-size: 1.25rem;
 }
 
 .vp-doc .header-anchor {
@@ -62,8 +62,8 @@
 @media (min-width: 768px) {
   .vp-doc h1 {
     letter-spacing: -0.02em;
-    line-height: 40px;
-    font-size: 32px;
+    line-height: 2.5rem;
+    font-size: 2rem;
   }
 }
 
@@ -73,23 +73,23 @@
 
 .vp-doc p,
 .vp-doc summary {
-  margin: 16px 0;
+  margin: 1rem 0;
 }
 
 .vp-doc p {
-  line-height: 28px;
+  line-height: 1.75rem;
 }
 
 .vp-doc blockquote {
-  margin: 16px 0;
-  border-left: 2px solid var(--vp-c-divider);
-  padding-left: 16px;
+  margin: 1rem 0;
+  border-left: .125rem solid var(--vp-c-divider);
+  padding-left: 1rem;
   transition: border-color 0.5s;
 }
 
 .vp-doc blockquote > p {
   margin: 0;
-  font-size: 16px;
+  font-size: 1rem;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
 }
@@ -116,7 +116,7 @@
 .vp-doc ul,
 .vp-doc ol {
   padding-left: 1.25rem;
-  margin: 16px 0;
+  margin: 1rem 0;
 }
 
 .vp-doc ul {
@@ -128,12 +128,12 @@
 }
 
 .vp-doc li + li {
-  margin-top: 8px;
+  margin-top: .5rem;
 }
 
 .vp-doc li > ol,
 .vp-doc li > ul {
-  margin: 8px 0 0;
+  margin: .5rem 0 0;
 }
 
 /**
@@ -143,12 +143,12 @@
 .vp-doc table {
   display: block;
   border-collapse: collapse;
-  margin: 20px 0;
+  margin: 1.25rem 0;
   overflow-x: auto;
 }
 
 .vp-doc tr {
-  border-top: 1px solid var(--vp-c-divider);
+  border-top: .0625rem solid var(--vp-c-divider);
   transition: background-color 0.5s;
 }
 
@@ -158,12 +158,12 @@
 
 .vp-doc th,
 .vp-doc td {
-  border: 1px solid var(--vp-c-divider);
-  padding: 12px 16px;
+  border: .0625rem solid var(--vp-c-divider);
+  padding: .75rem 1rem;
 }
 
 .vp-doc th {
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 600;
   background-color: var(--vp-c-white-soft);
 }
@@ -177,9 +177,9 @@
  * -------------------------------------------------------------------------- */
 
 .vp-doc hr {
-  margin: 16px 0;
+  margin: 1rem 0;
   border: none;
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: .0625rem solid var(--vp-c-divider-light);
 }
 
 /**
@@ -187,12 +187,12 @@
  * -------------------------------------------------------------------------- */
 
 .vp-doc .custom-block {
-  margin: 16px 0;
+  margin: 1rem 0;
 }
 
 .vp-doc .custom-block p {
-  margin: 8px 0;
-  line-height: 24px;
+  margin: .5rem 0;
+  line-height: 1.5rem;
 }
 
 .vp-doc .custom-block p:first-child {
@@ -217,7 +217,7 @@
 }
 
 .vp-doc .custom-block div[class*='language-'] {
-  margin: 8px 0;
+  margin: .5rem 0;
 }
 
 .vp-doc .custom-block div[class*='language-'] code {
@@ -236,7 +236,7 @@
 
 .vp-doc :not(pre) > code {
   border-radius: 4px;
-  padding: 3px 6px;
+  padding: .1875rem .375rem;
   color: var(--vp-c-text-code);
   background-color: var(--vp-c-bg-mute);
   transition: color 0.5s, background-color 0.5s;
@@ -259,7 +259,7 @@
 
 .vp-doc div[class*='language-'] {
   position: relative;
-  margin: 16px -24px;
+  margin: 1rem -1.5rem;
   background-color: var(--vp-code-block-bg);
   overflow-x: auto;
   transition: background-color 0.5s;
@@ -268,7 +268,7 @@
 @media (min-width: 640px) {
   .vp-doc div[class*='language-'] {
     border-radius: 8px;
-    margin: 16px 0;
+    margin: 1rem 0;
   }
 }
 
@@ -281,7 +281,7 @@
 .vp-doc div[class*='language-'] + div[class*='language-'],
 .vp-doc div[class$='-api'] + div[class*='language-'],
 .vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
-  margin-top: -8px;
+  margin-top: -0.5rem;
 }
 
 .vp-doc [class*='language-'] pre,
@@ -304,14 +304,14 @@
   position: relative;
   z-index: 1;
   margin: 0;
-  padding: 16px 0;
+  padding: 1rem 0;
   background: transparent;
   overflow-x: auto;
 }
 
 .vp-doc [class*='language-'] code {
   display: block;
-  padding: 0 24px;
+  padding: 0 1.5rem;
   width: fit-content;
   line-height: var(--vp-code-line-height);
   font-size: var(--vp-code-font-size);
@@ -324,7 +324,7 @@
   top: 0;
   bottom: 0;
   left: 0;
-  padding-top: 16px;
+  padding-top: 1rem;
   width: 100%;
   line-height: var(--vp-code-line-height);
   font-family: var(--vp-font-family-mono);
@@ -339,11 +339,11 @@
 }
 
 .vp-doc div[class*='language-'].line-numbers-mode {
-  padding-left: 32px;
+  padding-left: 2rem;
 }
 
 .vp-doc div[class*='language-'].line-numbers-mode pre {
-  padding-left: 16px;
+  padding-left: 1rem;
 }
 
 .vp-doc .line-numbers-wrapper {
@@ -352,9 +352,9 @@
   bottom: 0;
   left: 0;
   z-index: 3;
-  border-right: 1px solid var(--vp-c-divider-dark-2);
-  padding-top: 16px;
-  width: 32px;
+  border-right: .0625rem solid var(--vp-c-divider-dark-2);
+  padding-top: 1rem;
+  width: 2rem;
   text-align: center;
   font-family: var(--vp-font-family-mono);
   line-height: var(--vp-code-line-height);
@@ -365,21 +365,21 @@
 
 .vp-doc [class*='language-'] > span.copy {
   position: absolute;
-  top: 8px;
-  right: 8px;
+  top: .5rem;
+  right: .5rem;
   z-index: 2;
   display: block;
   justify-content: center;
   align-items: center;
   border-radius: 4px;
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   background-color: var(--vp-code-block-bg);
   opacity: 0;
   cursor: pointer;
   background-image: var(--vp-icon-copy);
   background-position: 50%;
-  background-size: 20px;
+  background-size: 1.25rem;
   background-repeat: no-repeat;
   transition: opacity 0.25s;
 }
@@ -402,14 +402,14 @@
 .vp-doc [class*='language-'] > span.copy.copied::before,
 .vp-doc [class*='language-'] > span.copy:hover.copied::before {
   position: relative;
-  left: -65px;
+  left: -4.0625rem;
   display: block;
   border-radius: 4px 0 0 4px;
-  padding-top: 8px;
-  width: 64px;
-  height: 40px;
+  padding-top: .5rem;
+  width: 4rem;
+  height: 2.5rem;
   text-align: center;
-  font-size: 12px;
+  font-size: .75rem;
   font-weight: 500;
   color: var(--vp-code-copy-code-active-text);
   background-color: var(--vp-code-copy-code-hover-bg);
@@ -419,10 +419,10 @@
 
 .vp-doc [class*='language-']:before {
   position: absolute;
-  top: 6px;
-  right: 12px;
+  top: .375rem;
+  right: .75rem;
   z-index: 2;
-  font-size: 12px;
+  font-size: .75rem;
   font-weight: 500;
   color: var(--vp-c-text-dark-3);
   transition: color 0.5s, opacity 0.5s;
diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css
index 09fb6cb1..0bdb5ead 100644
--- a/src/client/theme-default/styles/components/vp-sponsor.css
+++ b/src/client/theme-default/styles/components/vp-sponsor.css
@@ -12,14 +12,14 @@
 }
 
 .vp-sponsor-section + .vp-sponsor-section {
-  margin-top: 4px;
+  margin-top: .25rem;
 }
 
 .vp-sponsor-tier {
-  margin-bottom: 4px;
+  margin-bottom: .25rem;
   text-align: center;
-  letter-spacing: 1px;
-  line-height: 24px;
+  letter-spacing: .0625rem;
+  line-height: 1.5rem;
   width: 100%;
   font-weight: 600;
   color: var(--vp-c-text-2);
@@ -27,58 +27,58 @@
 }
 
 .vp-sponsor.normal .vp-sponsor-tier {
-  padding: 13px 0 11px;
-  font-size: 14px;
+  padding: .8125rem 0 .6875rem;
+  font-size: .875rem;
 }
 
 .vp-sponsor.aside .vp-sponsor-tier {
-  padding: 9px 0 7px;
-  font-size: 12px;
+  padding: .5625rem 0 .4375rem;
+  font-size: .75rem;
 }
 
 .vp-sponsor-grid + .vp-sponsor-tier {
-  margin-top: 4px;
+  margin-top: .25rem;
 }
 
 .vp-sponsor-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: .25rem;
 }
 
-.vp-sponsor-grid.xmini .vp-sponsor-grid-link   { height: 64px; }
-.vp-sponsor-grid.xmini .vp-sponsor-grid-image  { max-width: 64px; max-height: 22px }
+.vp-sponsor-grid.xmini .vp-sponsor-grid-link   { height: 4rem; }
+.vp-sponsor-grid.xmini .vp-sponsor-grid-image  { max-width: 4rem; max-height: 1.375rem }
 
-.vp-sponsor-grid.mini .vp-sponsor-grid-link   { height: 72px; }
-.vp-sponsor-grid.mini .vp-sponsor-grid-image  { max-width: 96px; max-height: 24px }
+.vp-sponsor-grid.mini .vp-sponsor-grid-link   { height: 4.5rem; }
+.vp-sponsor-grid.mini .vp-sponsor-grid-image  { max-width: 6rem; max-height: 1.5rem }
 
-.vp-sponsor-grid.small .vp-sponsor-grid-link   { height: 96px; }
-.vp-sponsor-grid.small .vp-sponsor-grid-image  { max-width: 96px; max-height: 24px }
+.vp-sponsor-grid.small .vp-sponsor-grid-link   { height: 6rem; }
+.vp-sponsor-grid.small .vp-sponsor-grid-image  { max-width: 6rem; max-height: 1.5rem }
 
-.vp-sponsor-grid.medium .vp-sponsor-grid-link  { height: 112px; }
-.vp-sponsor-grid.medium .vp-sponsor-grid-image { max-width: 120px; max-height: 36px }
+.vp-sponsor-grid.medium .vp-sponsor-grid-link  { height: 7rem; }
+.vp-sponsor-grid.medium .vp-sponsor-grid-image { max-width: 7.5rem; max-height: 2.25rem }
 
-.vp-sponsor-grid.big .vp-sponsor-grid-link     { height: 184px; }
-.vp-sponsor-grid.big .vp-sponsor-grid-image    { max-width: 192px; max-height: 56px }
+.vp-sponsor-grid.big .vp-sponsor-grid-link     { height: 11.5rem; }
+.vp-sponsor-grid.big .vp-sponsor-grid-image    { max-width: 12rem; max-height: 3.5rem }
 
 .vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item {
-  width: calc((100% - 4px) / 2);
+  width: calc((100% - .25rem) / 2);
 }
 
 .vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item {
-  width: calc((100% - 4px * 2) / 3);
+  width: calc((100% - .25rem * 2) / 3);
 }
 
 .vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item {
-  width: calc((100% - 4px * 3) / 4);
+  width: calc((100% - .25rem * 3) / 4);
 }
 
 .vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item {
-  width: calc((100% - 4px * 4) / 5);
+  width: calc((100% - .25rem * 4) / 5);
 }
 
 .vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item {
-  width: calc((100% - 4px * 5) / 6);
+  width: calc((100% - .25rem * 5) / 6);
 }
 
 .vp-sponsor-grid-item {
diff --git a/src/client/theme-default/styles/utils.css b/src/client/theme-default/styles/utils.css
index 65c7e55e..18d931f1 100644
--- a/src/client/theme-default/styles/utils.css
+++ b/src/client/theme-default/styles/utils.css
@@ -1,7 +1,7 @@
 .visually-hidden {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  width: .0625rem;
+  height: .0625rem;
   white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index ee03cfd1..0eacf3b6 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -156,11 +156,11 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
-  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
-  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
-  --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
-  --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+  --vp-shadow-1: 0 .0625rem .125rem rgba(0, 0, 0, 0.04), 0 .0625rem .125rem rgba(0, 0, 0, 0.06);
+  --vp-shadow-2: 0 .1875rem .75rem rgba(0, 0, 0, 0.07), 0 .0625rem .25rem rgba(0, 0, 0, 0.07);
+  --vp-shadow-3: 0 .75rem 2rem rgba(0, 0, 0, 0.1), 0 .125rem .375rem rgba(0, 0, 0, 0.08);
+  --vp-shadow-4: 0 .875rem 2.75rem rgba(0, 0, 0, 0.12), 0 .1875rem .5625rem rgba(0, 0, 0, 0.12);
+  --vp-shadow-5: 0 1.125rem 3.5rem rgba(0, 0, 0, 0.16), 0 .25rem .75rem rgba(0, 0, 0, 0.16);
 }
 
 /**
@@ -180,7 +180,7 @@
  * -------------------------------------------------------------------------- */
 
  :root {
-  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
+  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20px' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
   --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
 }
 
@@ -189,7 +189,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-layout-max-width: 1440px;
+  --vp-layout-max-width: 90rem;
 }
 
 /**
@@ -280,7 +280,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-custom-block-code-font-size: 13px;
+  --vp-custom-block-code-font-size: .8125rem;
 
   --vp-custom-block-info-border: var(--vp-c-divider-light);
   --vp-custom-block-info-text: var(--vp-c-text-2);
@@ -329,8 +329,8 @@
 
 :root {
   --vp-nav-height: var(--vp-nav-height-mobile);
-  --vp-nav-height-mobile: 56px;
-  --vp-nav-height-desktop: 72px;
+  --vp-nav-height-mobile: 3.5rem;
+  --vp-nav-height-desktop: 4.5rem;
 }
 
 @media (min-width: 960px) {