feat(theme): use relative length units (#5323)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

__tests__/unit/node/plugins/localSearchPlugin.test.ts

@@ -46,7 +46,7 @@ describe('node/plugins/localSearchPlugin', () => {
       '# Chinese home\n\nlocaleonlytoken\n'
     )
     await writeFile(
-      path.join(configDir, 'config.ts'),
+      path.join(configDir, 'config.mjs'),
       [
         'export default {',
         '  rewrites: {',
@@ -120,7 +120,7 @@ describe('node/plugins/localSearchPlugin', () => {
       `# Chinese home\n\n${content}`
     )
     await writeFile(
-      path.join(configDir, 'config.ts'),
+      path.join(configDir, 'config.mjs'),
       [
         'export default {',
         '  locales: {',
@@ -195,7 +195,7 @@ describe('node/plugins/localSearchPlugin', () => {
       '# Broken\n\n<!-- @include: ./missing.md -->\n'
     )
     await writeFile(
-      path.join(configDir, 'config.ts'),
+      path.join(configDir, 'config.mjs'),
       "export default { themeConfig: { search: { provider: 'local' } } }"
     )
 

docs/.vitepress/config.ts

@@ -9,13 +9,13 @@ import {
   localIconLoader
 } from 'vitepress-plugin-group-icons'
 import llmstxt from 'vitepress-plugin-llms'
-import { markdown as esMarkdown } from '../es/config'
+import { markdown as esMarkdown } from '../es/config.js'
-import { markdown as faMarkdown } from '../fa/config'
+import { markdown as faMarkdown } from '../fa/config.js'
-import { markdown as jaMarkdown } from '../ja/config'
+import { markdown as jaMarkdown } from '../ja/config.js'
-import { markdown as koMarkdown } from '../ko/config'
+import { markdown as koMarkdown } from '../ko/config.js'
-import { markdown as ptMarkdown } from '../pt/config'
+import { markdown as ptMarkdown } from '../pt/config.js'
-import { markdown as ruMarkdown } from '../ru/config'
+import { markdown as ruMarkdown } from '../ru/config.js'
-import { markdown as zhMarkdown } from '../zh/config'
+import { markdown as zhMarkdown } from '../zh/config.js'
 
 const prod = !!process.env.NETLIFY
 const siteUrl = 'https://vitepress.dev'

docs/.vitepress/theme/styles.css

@@ -40,13 +40,13 @@
   --vp-home-hero-image-filter: blur(44px);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   :root {
     --vp-home-hero-image-filter: blur(56px);
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   :root {
     --vp-home-hero-image-filter: blur(68px);
   }
@@ -54,7 +54,7 @@
 
 .VPHero .VPImage {
   filter: drop-shadow(-2px 4px 6px rgba(0, 0, 0, 0.2));
-  padding: 18px;
+  padding: 1.125rem;
 }
 
 .VPFeature .icon span {

docs/components/ModalDemo.vue

@@ -38,23 +38,23 @@ const showModal = ref(false)
 }
 
 .modal-container {
-  width: 300px;
+  width: 18.75rem;
   margin: auto;
-  padding: 20px 30px;
+  padding: 1.25rem 1.875rem;
   background-color: var(--vp-c-bg);
-  border-radius: 2px;
+  border-radius: 0.125rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
   transition: all 0.3s ease;
 }
 
 .model-footer {
-  margin-top: 8px;
+  margin-top: 0.5rem;
   text-align: right;
 }
 
 .modal-button {
-  padding: 4px 8px;
+  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   border-color: var(--vp-button-alt-border);
   color: var(--vp-button-alt-text);
   background-color: var(--vp-button-alt-bg);

docs/ru/components/ModalDemo.vue

@@ -40,23 +40,23 @@ const showModal = ref(false)
 }
 
 .modal-container {
-  width: 300px;
+  width: 18.75rem;
   margin: auto;
-  padding: 20px 30px;
+  padding: 1.25rem 1.875rem;
   background-color: var(--vp-c-bg);
-  border-radius: 2px;
+  border-radius: 0.125rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
   transition: all 0.3s ease;
 }
 
 .model-footer {
-  margin-top: 8px;
+  margin-top: 0.5rem;
   text-align: right;
 }
 
 .modal-button {
-  padding: 4px 8px;
+  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   border-color: var(--vp-button-alt-border);
   color: var(--vp-button-alt-text);
   background-color: var(--vp-button-alt-bg);

src/client/theme-default/NotFound.vue

@@ -33,55 +33,55 @@ const { currentLang } = useLangs()
 
 <style scoped>
 .NotFound {
-  padding: 64px 24px 96px;
+  padding: 4rem 1.5rem 6rem;
   text-align: center;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .NotFound {
-    padding: 96px 32px 168px;
+    padding: 6rem 2rem 10.5rem;
   }
 }
 
 .code {
-  line-height: 64px;
+  line-height: 1;
-  font-size: 64px;
+  font-size: 4rem;
   font-weight: 600;
 }
 
 .title {
-  padding-top: 12px;
+  padding-top: 0.75rem;
-  letter-spacing: 2px;
+  letter-spacing: 0.1em;
-  line-height: 20px;
+  line-height: 1;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: 700;
 }
 
 .divider {
-  margin: 24px auto 18px;
+  margin: 1.5rem auto 1.125rem;
-  width: 64px;
+  width: 4rem;
   height: 1px;
   background-color: var(--vp-c-divider);
 }
 
 .quote {
   margin: 0 auto;
-  max-width: 256px;
+  max-width: 16rem;
-  font-size: 14px;
+  font-size: 0.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-1);
-  border-radius: 16px;
+  border-radius: 1rem;
-  padding: 3px 16px;
+  padding: 0.1875rem 1rem;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-brand-1);
   transition:

src/client/theme-default/components/VPBackdrop.vue

@@ -33,7 +33,7 @@ defineProps<{
   transition-duration: .25s;
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPBackdrop {
     display: none;
   }

src/client/theme-default/components/VPBadge.vue

@@ -17,22 +17,22 @@ withDefaults(defineProps<Props>(), {
 <style>
 .VPBadge {
   display: inline-block;
-  margin-left: 2px;
+  margin-left: 0.125rem;
   border: 1px solid transparent;
-  border-radius: 12px;
+  border-radius: 0.75rem;
-  padding: 0 10px;
+  padding: 0 0.625rem;
-  line-height: 22px;
+  line-height: 1.8333333;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   white-space: nowrap;
-  transform: translateY(-2px);
+  transform: translateY(-0.125rem);
 }
 
 .VPBadge.small {
-  padding: 0 6px;
+  padding: 0 0.375rem;
-  line-height: 18px;
+  line-height: 1.8;
-  font-size: 10px;
+  font-size: 0.625rem;
-  transform: translateY(-8px);
+  transform: translateY(-0.5rem);
 }
 
 .VPDocFooter .VPBadge {
@@ -41,12 +41,12 @@ withDefaults(defineProps<Props>(), {
 
 .vp-doc h1 > .VPBadge,
 .vp-doc h2 > .VPBadge {
-  margin: 0 0 0 2px;
+  margin: 0 0 0 0.125rem;
   vertical-align: middle;
 }
 
 .vp-doc h2 > .VPBadge {
-  padding: 0 8px;
+  padding: 0 0.5rem;
 }
 
 .vp-doc h3 > .VPBadge {
@@ -57,7 +57,7 @@ withDefaults(defineProps<Props>(), {
 .vp-doc h5 > .VPBadge,
 .vp-doc h6 > .VPBadge {
   vertical-align: middle;
-  line-height: 18px;
+  line-height: 1.5;
 }
 
 .VPBadge.info {

src/client/theme-default/components/VPButton.vue

@@ -54,17 +54,17 @@ const component = computed(() => {
 }
 
 .VPButton.medium {
-  border-radius: 20px;
+  border-radius: 1.25rem;
-  padding: 0 20px;
+  padding: 0 1.25rem;
-  line-height: 38px;
+  line-height: 2.7142857;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .VPButton.big {
-  border-radius: 24px;
+  border-radius: 1.5rem;
-  padding: 0 24px;
+  padding: 0 1.5rem;
-  line-height: 46px;
+  line-height: 2.875;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .VPButton.brand {

src/client/theme-default/components/VPCarbonAds.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
 import { useRoute } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
 import { onMounted, ref, watch } from 'vue'
-import { useAside } from '../composables/aside'
 
 const route = useRoute()
 const props = defineProps<{
@@ -11,7 +11,7 @@ const props = defineProps<{
 
 const carbonOptions = props.carbonAds
 
-const { isAsideEnabled } = useAside()
+const isAsideVisible = useMediaQuery('(min-width: 80rem)')
 const container = ref()
 
 let isInitialized = false
@@ -33,7 +33,7 @@ function init() {
 }
 
 watch(() => route.data.relativePath, () => {
-  if (isInitialized && isAsideEnabled.value) {
+  if (isInitialized && isAsideVisible.value) {
     ;(window as any)._carbonads?.refresh()
   }
 })
@@ -45,10 +45,10 @@ if (carbonOptions) {
     // if the page is loaded when aside is active, load carbon directly.
     // otherwise, only load it if the page resizes to wide enough. this avoids
     // loading carbon at all on mobile where it's never shown
-    if (isAsideEnabled.value) {
+    if (isAsideVisible.value) {
       init()
     } else {
-      watch(isAsideEnabled, (wide) => wide && init())
+      watch(isAsideVisible, (visible) => visible && init())
     }
   })
 }
@@ -63,25 +63,25 @@ if (carbonOptions) {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 24px;
+  padding: 1.5rem;
-  border-radius: 12px;
+  border-radius: 0.75rem;
-  min-height: 256px;
+  min-height: 16rem;
   text-align: center;
-  line-height: 18px;
+  line-height: 1.5;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   background-color: var(--vp-carbon-ads-bg-color);
 }
 
 .VPCarbonAds :deep(img) {
   margin: 0 auto;
-  border-radius: 6px;
+  border-radius: 0.375rem;
 }
 
 .VPCarbonAds :deep(.carbon-text) {
   display: block;
   margin: 0 auto;
-  padding-top: 12px;
+  padding-top: 0.75rem;
   color: var(--vp-carbon-ads-text-color);
   transition: color 0.25s;
 }
@@ -92,8 +92,8 @@ if (carbonOptions) {
 
 .VPCarbonAds :deep(.carbon-poweredby) {
   display: block;
-  padding-top: 6px;
+  padding-top: 0.375rem;
-  font-size: 11px;
+  font-size: 0.6875rem;
   font-weight: 500;
   color: var(--vp-carbon-ads-poweredby-color);
   text-transform: uppercase;

src/client/theme-default/components/VPContent.vue

@@ -78,7 +78,7 @@ function isRegistered(component: string): boolean {
   margin: 0;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPContent {
     padding-top: var(--vp-nav-height);
   }
@@ -89,7 +89,7 @@ function isRegistered(component: string): boolean {
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 90rem) {
   .VPContent.has-sidebar {
     padding-right: calc((100% - var(--vp-layout-max-width)) / 2);
     padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));

src/client/theme-default/components/VPDoc.vue

@@ -63,33 +63,33 @@ const pageName = computed(() =>
 
 <style scoped>
 .VPDoc {
-  padding: 32px 24px 96px;
+  padding: 2rem 1.5rem 6rem;
   width: 100%;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPDoc {
-    padding: 48px 32px 128px;
+    padding: 3rem 2rem 8rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPDoc {
-    padding: 48px 32px 0;
+    padding: 3rem 2rem 0;
   }
 
   .VPDoc:not(.has-sidebar) .container {
     display: flex;
     justify-content: center;
-    max-width: 992px;
+    max-width: 62rem;
   }
 
   .VPDoc:not(.has-sidebar) .content {
-    max-width: 752px;
+    max-width: 47rem;
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPDoc .container {
     display: flex;
     justify-content: center;
@@ -100,13 +100,13 @@ const pageName = computed(() =>
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 90rem) {
   .VPDoc:not(.has-sidebar) .content {
-    max-width: 784px;
+    max-width: 49rem;
   }
 
   .VPDoc:not(.has-sidebar) .container {
-    max-width: 1104px;
+    max-width: 69rem;
   }
 }
 
@@ -120,22 +120,22 @@ const pageName = computed(() =>
   display: none;
   order: 2;
   flex-grow: 1;
-  padding-left: 32px;
+  padding-left: 2rem;
   width: 100%;
-  max-width: 256px;
+  max-width: 16rem;
 }
 
 .left-aside {
   order: 1;
   padding-left: unset;
-  padding-right: 32px;
+  padding-right: 2rem;
 }
 
 .aside-container {
   position: fixed;
   top: 0;
-  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
+  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 3rem);
-  width: 224px;
+  width: 14rem;
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -150,8 +150,8 @@ const pageName = computed(() =>
   position: fixed;
   bottom: 0;
   z-index: 10;
-  width: 224px;
+  width: 14rem;
-  height: 32px;
+  height: 2rem;
   background: linear-gradient(transparent, var(--vp-c-bg) 70%);
   pointer-events: none;
 }
@@ -159,8 +159,8 @@ const pageName = computed(() =>
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
+  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 3rem));
-  padding-bottom: 32px;
+  padding-bottom: 2rem;
 }
 
 .content {
@@ -169,17 +169,17 @@ const pageName = computed(() =>
   width: 100%;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .content {
-    padding: 0 32px 128px;
+    padding: 0 2rem 8rem;
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .content {
     order: 1;
     margin: 0;
-    min-width: 640px;
+    min-width: 40rem;
   }
 }
 
@@ -188,6 +188,6 @@ const pageName = computed(() =>
 }
 
 .VPDoc.has-aside .content-container {
-  max-width: 688px;
+  max-width: 43rem;
 }
 </style>

src/client/theme-default/components/VPDocAside.vue

@@ -37,10 +37,10 @@ const { 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>

src/client/theme-default/components/VPDocAsideOutline.vue

@@ -51,20 +51,20 @@ useActiveAnchor(container, marker)
 .content {
   position: relative;
   border-left: 1px solid var(--vp-c-divider);
-  padding-left: 16px;
+  padding-left: 1rem;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 500;
 }
 
 .outline-marker {
   position: absolute;
-  top: 32px;
+  top: 2rem;
   left: -1px;
   z-index: 0;
   opacity: 0;
   width: 2px;
   border-radius: 2px;
-  height: 18px;
+  height: 1.125rem;
   background-color: var(--vp-c-brand-1);
   transition:
     top 0.25s cubic-bezier(0, 1, 0.5, 1),
@@ -73,8 +73,8 @@ useActiveAnchor(container, marker)
 }
 
 .outline-title {
-  line-height: 32px;
+  line-height: 2.2857143;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
 }
 </style>

src/client/theme-default/components/VPDocFooter.vue

@@ -84,19 +84,19 @@ const showFooter = computed(
 
 <style scoped>
 .VPDocFooter {
-  margin-top: 64px;
+  margin-top: 4rem;
 }
 
 .edit-info {
-  padding-bottom: 18px;
+  padding-bottom: 1.125rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .edit-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 14px;
+    padding-bottom: 0.875rem;
   }
 }
 
@@ -104,8 +104,8 @@ const showFooter = computed(
   display: flex;
   align-items: center;
   border: 0;
-  line-height: 32px;
+  line-height: 2.2857143;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-brand-1);
   transition: color 0.25s;
@@ -116,28 +116,28 @@ const showFooter = computed(
 }
 
 .edit-link-icon {
-  margin-right: 8px;
+  margin-right: 0.5rem;
 }
 
 .prev-next {
   border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
+  padding-top: 1.5rem;
   display: grid;
-  grid-row-gap: 8px;
+  grid-row-gap: 0.5rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .prev-next {
     grid-template-columns: repeat(2, 1fr);
-    grid-column-gap: 16px;
+    grid-column-gap: 1rem;
   }
 }
 
 .pager-link {
   display: block;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 0.5rem;
-  padding: 11px 16px 13px;
+  padding: 0.6875rem 1rem 0.8125rem;
   width: 100%;
   height: 100%;
   transition: border-color 0.25s;
@@ -154,16 +154,16 @@ const showFooter = computed(
 
 .desc {
   display: block;
-  line-height: 20px;
+  line-height: 1.6666667;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .title {
   display: block;
-  line-height: 20px;
+  line-height: 1.4285714;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-brand-1);
   transition: color 0.25s;

src/client/theme-default/components/VPDocFooterLastUpdated.vue

@@ -46,16 +46,16 @@ onMounted(() => {
 
 <style scoped>
 .VPLastUpdated {
-  line-height: 24px;
+  line-height: 1.7142857;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .VPLastUpdated {
-    line-height: 32px;
+    line-height: 2.2857143;
-    font-size: 14px;
+    font-size: 0.875rem;
     font-weight: 500;
   }
 }

src/client/theme-default/components/VPDocOutlineItem.vue

@@ -27,14 +27,14 @@ defineProps<{
 }
 
 .nested {
-  padding-right: 16px;
+  padding-right: 1rem;
-  padding-left: 16px;
+  padding-left: 1rem;
 }
 
 .outline-link {
   display: block;
-  line-height: 32px;
+  line-height: 2.2857143;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 400;
   color: var(--vp-c-text-2);
   white-space: nowrap;
@@ -50,6 +50,6 @@ defineProps<{
 }
 
 .outline-link.nested {
-  padding-left: 13px;
+  padding-left: 0.8125rem;
 }
 </style>

src/client/theme-default/components/VPFeature.vue

@@ -58,7 +58,7 @@ defineProps<{
 .VPFeature {
   display: block;
   border: 1px solid var(--vp-c-bg-soft);
-  border-radius: 12px;
+  border-radius: 0.75rem;
   height: 100%;
   background-color: var(--vp-c-bg-soft);
   transition: border-color 0.25s, background-color 0.25s;
@@ -71,60 +71,60 @@ defineProps<{
 .box {
   display: flex;
   flex-direction: column;
-  padding: 24px;
+  padding: 1.5rem;
   height: 100%;
 }
 
 .box > :deep(.VPImage) {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .icon {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
-  border-radius: 6px;
+  border-radius: 0.375rem;
   background-color: var(--vp-c-default-soft);
-  width: 48px;
+  width: 3rem;
-  height: 48px;
+  height: 3rem;
-  font-size: 24px;
+  font-size: 1.5rem;
   transition: background-color 0.25s;
 }
 
 .title {
-  line-height: 24px;
+  line-height: 1.5;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 600;
 }
 
 .details {
   flex-grow: 1;
-  padding-top: 8px;
+  padding-top: 0.5rem;
-  line-height: 24px;
+  line-height: 1.7142857;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 ul.details {
   list-style-type: disc;
-  padding-left: 14px;
+  padding-left: 0.875rem;
 }
 
 .link-text {
-  padding-top: 8px;
+  padding-top: 0.5rem;
 }
 
 .link-text-value {
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-brand-1);
 }
 
 .link-text-icon {
-  margin-left: 6px;
+  margin-left: 0.375rem;
 }
 </style>

src/client/theme-default/components/VPFeatures.vue

@@ -62,38 +62,38 @@ const grid = computed(() => {
 <style scoped>
 .VPFeatures {
   position: relative;
-  padding: 0 24px;
+  padding: 0 1.5rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .VPFeatures {
-    padding: 0 48px;
+    padding: 0 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPFeatures {
-    padding: 0 64px;
+    padding: 0 4rem;
   }
 }
 
 .container {
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 72rem;
 }
 
 .items {
   display: flex;
   flex-wrap: wrap;
-  margin: -8px;
+  margin: -0.5rem;
 }
 
 .item {
-  padding: 8px;
+  padding: 0.5rem;
   width: 100%;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .item.grid-2,
   .item.grid-4,
   .item.grid-6 {
@@ -101,7 +101,7 @@ const grid = computed(() => {
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .item.grid-2,
   .item.grid-4 {
     width: calc(100% / 2);
@@ -113,7 +113,7 @@ const grid = computed(() => {
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .item.grid-4 {
     width: calc(100% / 4);
   }

src/client/theme-default/components/VPFlyout.vue

@@ -95,7 +95,7 @@ function onBlur() {
 .button {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 0.75rem;
   height: var(--vp-nav-height);
   color: var(--vp-c-text-1);
   transition: color 0.5s;
@@ -105,7 +105,7 @@ function onBlur() {
   display: flex;
   align-items: center;
   line-height: var(--vp-nav-height);
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
@@ -113,22 +113,22 @@ function onBlur() {
 
 .option-icon {
   margin-right: 0px;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .text-icon {
-  margin-left: 4px;
+  margin-left: 0.25rem;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .icon {
-  font-size: 20px;
+  font-size: 1.25rem;
   transition: fill 0.25s;
 }
 
 .menu {
   position: absolute;
-  top: calc(var(--vp-nav-height) / 2 + 20px);
+  top: calc(var(--vp-nav-height) / 2 + 1.25rem);
   right: 0;
   opacity: 0;
   visibility: hidden;

src/client/theme-default/components/VPFooter.vue

@@ -20,7 +20,7 @@ const { hasSidebar } = useLayout()
   position: relative;
   z-index: var(--vp-z-index-footer);
   border-top: 1px solid var(--vp-c-gutter);
-  padding: 32px 24px;
+  padding: 2rem 1.5rem;
   background-color: var(--vp-c-bg);
 }
 
@@ -30,7 +30,7 @@ const { hasSidebar } = useLayout()
 
 .VPFooter :deep(a) {
   text-decoration-line: underline;
-  text-underline-offset: 2px;
+  text-underline-offset: 0.125rem;
   transition: color 0.25s;
 }
 
@@ -38,9 +38,9 @@ const { hasSidebar } = useLayout()
   color: var(--vp-c-text-1);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPFooter {
-    padding: 32px;
+    padding: 2rem;
   }
 }
 
@@ -52,8 +52,8 @@ const { hasSidebar } = useLayout()
 
 .message,
 .copyright {
-  line-height: 24px;
+  line-height: 1.7142857;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }

src/client/theme-default/components/VPHero.vue

@@ -73,18 +73,18 @@ const { heroImageSlotExists } = inject(
 <style scoped>
 .VPHero {
   margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
-  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 3rem) 1.5rem 3rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 5rem) 3rem 4rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 5rem) 4rem 4rem;
   }
 }
 
@@ -92,10 +92,10 @@ const { heroImageSlotExists } = inject(
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 72rem;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .container {
     flex-direction: row;
   }
@@ -113,20 +113,20 @@ const { heroImageSlotExists } = inject(
   text-align: center;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPHero.has-image .container {
     text-align: left;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .main {
     order: 1;
     width: calc((100% / 3) * 2);
   }
 
   .VPHero.has-image .main {
-    max-width: 592px;
+    max-width: 37rem;
   }
 }
 
@@ -138,10 +138,10 @@ const { heroImageSlotExists } = inject(
 .name,
 .text {
   width: fit-content;
-  max-width: 392px;
+  max-width: 24.5rem;
-  letter-spacing: -0.4px;
+  letter-spacing: -0.025rem;
-  line-height: 40px;
+  line-height: 1.25;
-  font-size: 32px;
+  font-size: 2rem;
   font-weight: 700;
   white-space: pre-wrap;
 
@@ -167,20 +167,20 @@ const { heroImageSlotExists } = inject(
   -webkit-text-fill-color: var(--vp-home-hero-name-color);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .name,
   .text {
-    max-width: 576px;
+    max-width: 36rem;
-    line-height: 56px;
+    line-height: 1.1666667;
-    font-size: 48px;
+    font-size: 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .name,
   .text {
-    line-height: 64px;
+    line-height: 1.1428571;
-    font-size: 56px;
+    font-size: 3.5rem;
   }
 
   .VPHero.has-image .name,
@@ -190,10 +190,10 @@ const { heroImageSlotExists } = inject(
 }
 
 .tagline {
-  padding-top: 8px;
+  padding-top: 0.5rem;
-  max-width: 392px;
+  max-width: 24.5rem;
-  line-height: 28px;
+  line-height: 1.5555556;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 500;
   white-space: pre-wrap;
   color: var(--vp-c-text-2);
@@ -203,19 +203,19 @@ const { heroImageSlotExists } = inject(
   margin: 0 auto;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .tagline {
-    padding-top: 12px;
+    padding-top: 0.75rem;
-    max-width: 576px;
+    max-width: 36rem;
-    line-height: 32px;
+    line-height: 1.6;
-    font-size: 20px;
+    font-size: 1.25rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .tagline {
-    line-height: 36px;
+    line-height: 1.5;
-    font-size: 24px;
+    font-size: 1.5rem;
   }
 
   .VPHero.has-image .tagline {
@@ -226,21 +226,21 @@ const { heroImageSlotExists } = inject(
 .actions {
   display: flex;
   flex-wrap: wrap;
-  margin: -6px;
+  margin: -0.375rem;
-  padding-top: 24px;
+  padding-top: 1.5rem;
 }
 
 .VPHero.has-image .actions {
   justify-content: center;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .actions {
-    padding-top: 32px;
+    padding-top: 2rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPHero.has-image .actions {
     justify-content: flex-start;
   }
@@ -248,21 +248,21 @@ const { heroImageSlotExists } = inject(
 
 .action {
   flex-shrink: 0;
-  padding: 6px;
+  padding: 0.375rem;
 }
 
 .image {
   order: 1;
-  margin: -76px -24px -48px;
+  margin: -4.75rem -1.5rem -3rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .image {
-    margin: -108px -24px -48px;
+    margin: -6.75rem -1.5rem -3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .image {
     flex-grow: 1;
     order: 2;
@@ -274,18 +274,18 @@ const { heroImageSlotExists } = inject(
 .image-container {
   position: relative;
   margin: 0 auto;
-  width: 320px;
+  width: 20rem;
-  height: 320px;
+  height: 20rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .image-container {
-    width: 392px;
+    width: 24.5rem;
-    height: 392px;
+    height: 24.5rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .image-container {
     display: flex;
     justify-content: center;
@@ -293,7 +293,7 @@ const { heroImageSlotExists } = inject(
     width: 100%;
     height: 100%;
     /*rtl:ignore*/
-    transform: translate(-32px, -32px);
+    transform: translate(-2rem, -2rem);
   }
 }
 
@@ -303,25 +303,25 @@ const { heroImageSlotExists } = inject(
   /*rtl:ignore*/
   left: 50%;
   border-radius: 50%;
-  width: 192px;
+  width: 12rem;
-  height: 192px;
+  height: 12rem;
   background-image: var(--vp-home-hero-image-background-image);
   filter: var(--vp-home-hero-image-filter);
   /*rtl:ignore*/
   transform: translate(-50%, -50%);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .image-bg {
-    width: 256px;
+    width: 16rem;
-    height: 256px;
+    height: 16rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .image-bg {
-    width: 320px;
+    width: 20rem;
-    height: 320px;
+    height: 20rem;
   }
 }
 
@@ -330,8 +330,8 @@ const { heroImageSlotExists } = inject(
   top: 50%;
   /*rtl:ignore*/
   left: 50%;
-  max-width: 192px;
+  max-width: 12rem;
-  max-height: 192px;
+  max-height: 12rem;
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -339,17 +339,17 @@ const { heroImageSlotExists } = inject(
   transform: translate(-50%, -50%);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   :deep(.image-src) {
-    max-width: 256px;
+    max-width: 16rem;
-    max-height: 256px;
+    max-height: 16rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   :deep(.image-src) {
-    max-width: 320px;
+    max-width: 20rem;
-    max-height: 320px;
+    max-height: 20rem;
   }
 }
 </style>

src/client/theme-default/components/VPHome.vue

@@ -37,12 +37,12 @@ const { frontmatter, theme } = useData()
 
 <style scoped>
 .VPHome {
-  margin-bottom: 96px;
+  margin-bottom: 6rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPHome {
-    margin-bottom: 128px;
+    margin-bottom: 8rem;
   }
 }
 </style>

src/client/theme-default/components/VPHomeContent.vue

@@ -21,20 +21,20 @@ const { width: vw } = useWindowSize({
 .container {
   margin: auto;
   width: 100%;
-  max-width: 1280px;
+  max-width: 80rem;
-  padding: 0 24px;
+  padding: 0 1.5rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .container {
-    padding: 0 48px;
+    padding: 0 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .container {
     width: 100%;
-    padding: 0 64px;
+    padding: 0 4rem;
   }
 }
 

src/client/theme-default/components/VPHomeSponsors.vue

@@ -49,44 +49,44 @@ withDefaults(defineProps<Props>(), {
 <style scoped>
 .VPHomeSponsors {
   border-top: 1px solid var(--vp-c-gutter);
-  padding-top: 88px !important;
+  padding-top: 5.5rem !important;
 }
 
 .VPHomeSponsors {
-  margin: 96px 0;
+  margin: 6rem 0;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPHomeSponsors {
-    margin: 128px 0;
+    margin: 8rem 0;
   }
 }
 
 .VPHomeSponsors {
-  padding: 0 24px;
+  padding: 0 1.5rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPHomeSponsors {
-    padding: 0 48px;
+    padding: 0 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPHomeSponsors {
-    padding: 0 64px;
+    padding: 0 4rem;
   }
 }
 
 .container {
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 72rem;
 }
 
 .love {
   margin: 0 auto;
   width: fit-content;
-  font-size: 28px;
+  font-size: 1.75rem;
   color: var(--vp-c-text-3);
 }
 
@@ -96,21 +96,21 @@ withDefaults(defineProps<Props>(), {
 
 .message {
   margin: 0 auto;
-  padding-top: 10px;
+  padding-top: 0.625rem;
-  max-width: 320px;
+  max-width: 20rem;
   text-align: center;
-  line-height: 24px;
+  line-height: 1.5;
-  font-size: 16px;
+  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>

src/client/theme-default/components/VPLocalNav.vue

@@ -20,11 +20,14 @@ const { y } = useWindowScroll()
 const navHeight = ref(0)
 
 onMounted(() => {
-  navHeight.value = parseInt(
+  // getComputedStyle returns custom properties as their raw token ("4rem"),
-    getComputedStyle(document.documentElement).getPropertyValue(
+  // so resolve the height by measuring instead of parsing
-      '--vp-nav-height'
+  const probe = document.createElement('div')
-    )
+  probe.style.cssText =
-  )
+    'position: absolute; visibility: hidden; height: var(--vp-nav-height)'
+  document.body.appendChild(probe)
+  navHeight.value = probe.offsetHeight
+  probe.remove()
 })
 
 const classes = computed(() => {
@@ -78,7 +81,7 @@ const classes = computed(() => {
   position: fixed;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPLocalNav {
     top: var(--vp-nav-height);
   }
@@ -92,7 +95,7 @@ const classes = computed(() => {
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPLocalNav {
     display: none;
   }
@@ -107,8 +110,8 @@ const classes = computed(() => {
 .menu {
   display: flex;
   align-items: center;
-  line-height: 24px;
+  line-height: 2;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
@@ -119,26 +122,26 @@ const classes = computed(() => {
   transition: color 0.25s;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .menu {
     display: none;
   }
 }
 
 .menu-icon {
-  margin-right: 8px;
+  margin-right: 0.5rem;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .menu,
 :deep(.VPLocalNavOutlineDropdown > button) {
-  padding: 12px 24px 11px;
+  padding: 0.75rem 1.5rem 0.6875rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .menu,
   :deep(.VPLocalNavOutlineDropdown > button) {
-    padding: 12px 32px 11px;
+    padding: 0.75rem 2rem 0.6875rem;
   }
 }
 </style>

src/client/theme-default/components/VPLocalNavOutlineDropdown.vue

@@ -95,9 +95,9 @@ function scrollToTop() {
 <style scoped>
 .VPLocalNavOutlineDropdown button {
   display: block;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
-  line-height: 24px;
+  line-height: 2;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
   position: relative;
@@ -115,19 +115,19 @@ function scrollToTop() {
 .icon {
   display: inline-block;
   vertical-align: middle;
-  margin-left: 2px;
+  margin-left: 0.125rem;
-  font-size: 14px;
+  font-size: 0.875rem;
   transform: rotate(0) /*rtl:rotate(180deg)*/;
   transition: transform 0.25s;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPLocalNavOutlineDropdown button {
-    font-size: 14px;
+    font-size: 0.875rem;
   }
 
   .icon {
-    font-size: 16px;
+    font-size: 1rem;
   }
 }
 
@@ -138,24 +138,24 @@ function scrollToTop() {
 
 .items {
   position: absolute;
-  top: 40px;
+  top: 2.5rem;
-  right: 16px;
+  right: 1rem;
-  left: 16px;
+  left: 1rem;
   display: grid;
   gap: 1px;
   border: 1px solid var(--vp-c-border);
-  border-radius: 8px;
+  border-radius: 0.5rem;
   background-color: var(--vp-c-gutter);
-  max-height: calc(var(--vp-vh, 100vh) - 86px);
+  max-height: calc(var(--vp-vh, 100vh) - 5.375rem);
   overflow: hidden auto;
   box-shadow: var(--vp-shadow-3);
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .items {
     right: auto;
-    left: calc(var(--vp-sidebar-width) + 32px);
+    left: calc(var(--vp-sidebar-width) + 2rem);
-    width: 320px;
+    width: 20rem;
   }
 }
 
@@ -165,15 +165,15 @@ function scrollToTop() {
 
 .top-link {
   display: block;
-  padding: 0 16px;
+  padding: 0 1rem;
-  line-height: 48px;
+  line-height: 3.4285714;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-brand-1);
 }
 
 .outline {
-  padding: 8px 0;
+  padding: 0.5rem 0;
   background-color: var(--vp-c-bg-soft);
 }
 
@@ -188,6 +188,6 @@ function scrollToTop() {
 .flyout-enter-from,
 .flyout-leave-to {
   opacity: 0;
-  transform: translateY(-16px);
+  transform: translateY(-1rem);
 }
 </style>

src/client/theme-default/components/VPLocalSearchBox.vue

@@ -641,19 +641,19 @@ function onMouseMove(e: MouseEvent) {
 
 .shell {
   position: relative;
-  padding: 12px;
+  padding: 0.75rem;
-  margin: 64px auto;
+  margin: 4rem auto;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 1rem;
   background: var(--vp-local-search-bg);
-  width: min(100vw - 60px, 900px);
+  width: min(100vw - 3.75rem, 56.25rem);
   height: min-content;
-  max-height: min(100vh - 128px, 900px);
+  max-height: min(100vh - 8rem, 56.25rem);
-  border-radius: 6px;
+  border-radius: 0.375rem;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .shell {
     margin: 0;
     width: 100vw;
@@ -665,16 +665,16 @@ function onMouseMove(e: MouseEvent) {
 
 .search-bar {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
+  border-radius: 0.25rem;
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 0.75rem;
   cursor: text;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .search-bar {
-    padding: 0 8px;
+    padding: 0 0.5rem;
   }
 }
 
@@ -684,26 +684,26 @@ function onMouseMove(e: MouseEvent) {
 
 .local-search-icon {
   display: block;
-  font-size: 18px;
+  font-size: 1.125rem;
 }
 
 .navigate-icon {
   display: block;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .search-icon {
-  margin: 8px;
+  margin: 0.5rem;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .search-icon {
     display: none;
   }
 }
 
 .search-input {
-  padding: 6px 12px;
+  padding: 0.375rem 0.75rem;
   font-size: inherit;
   width: 100%;
 }
@@ -712,31 +712,31 @@ function onMouseMove(e: MouseEvent) {
   display: none;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .search-input {
-    padding: 6px 4px;
+    padding: 0.375rem 0.25rem;
   }
 }
 
 .search-actions {
   display: flex;
-  gap: 4px;
+  gap: 0.25rem;
 }
 
 @media (any-pointer: coarse) {
   .search-actions {
-    gap: 8px;
+    gap: 0.5rem;
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .search-actions.before {
     display: none;
   }
 }
 
 .search-actions button {
-  padding: 8px;
+  padding: 0.5rem;
 }
 
 .search-actions button:not([disabled]):hover,
@@ -750,9 +750,9 @@ function onMouseMove(e: MouseEvent) {
 
 .search-loading {
   visibility: hidden;
-  margin: 8px;
+  margin: 0.5rem;
-  width: 18px;
+  width: 1.125rem;
-  height: 18px;
+  height: 1.125rem;
   flex: none;
   border: 2px solid var(--vp-c-divider);
   border-top-color: var(--vp-c-brand-1);
@@ -781,17 +781,17 @@ function onMouseMove(e: MouseEvent) {
   opacity: 75%;
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 1rem;
-  line-height: 14px;
+  line-height: 1.09375;
 }
 
 .search-keyboard-shortcuts span {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 0.25rem;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .search-keyboard-shortcuts {
     display: none;
   }
@@ -799,9 +799,9 @@ function onMouseMove(e: MouseEvent) {
 
 .search-keyboard-shortcuts kbd {
   background: rgba(128, 128, 128, 0.1);
-  border-radius: 4px;
+  border-radius: 0.25rem;
-  padding: 3px 6px;
+  padding: 0.1875rem 0.375rem;
-  min-width: 24px;
+  min-width: 1.5rem;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
@@ -812,7 +812,7 @@ function onMouseMove(e: MouseEvent) {
 .results {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 0.375rem;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -821,39 +821,39 @@ function onMouseMove(e: MouseEvent) {
 .result {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   transition: none;
-  line-height: 1rem;
+  line-height: 1;
   border: solid 2px var(--vp-local-search-result-border);
   outline: none;
 }
 
 .result > div {
-  margin: 12px;
+  margin: 0.75rem;
   width: 100%;
   overflow: hidden;
 }
 
-@media (max-width: 767px) {
+@media not all and (min-width: 48rem) {
   .result > div {
-    margin: 8px;
+    margin: 0.5rem;
   }
 }
 
 .titles {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 0.25rem;
   position: relative;
   z-index: 1001;
-  padding: 2px 0;
+  padding: 0.125rem 0;
 }
 
 .title {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 0.25rem;
 }
 
 .title.main {
@@ -882,10 +882,10 @@ function onMouseMove(e: MouseEvent) {
 .excerpt {
   opacity: 50%;
   pointer-events: none;
-  max-height: 140px;
+  max-height: 8.75rem;
   overflow: hidden;
   position: relative;
-  margin-top: 4px;
+  margin-top: 0.25rem;
 }
 
 .result.selected .excerpt {
@@ -894,15 +894,15 @@ function onMouseMove(e: MouseEvent) {
 
 .excerpt :deep(*) {
   font-size: 0.8rem !important;
-  line-height: 130% !important;
+  line-height: 1.3 !important;
 }
 
 .titles :deep(mark),
 .excerpt :deep(mark) {
   background-color: var(--vp-local-search-highlight-bg);
   color: var(--vp-local-search-highlight-text);
-  border-radius: 2px;
+  border-radius: 0.125rem;
-  padding: 0 2px;
+  padding: 0 0.125rem;
 }
 
 .excerpt :deep(.vp-code-group) .tabs {
@@ -910,7 +910,7 @@ function onMouseMove(e: MouseEvent) {
 }
 
 .excerpt :deep(.vp-code-group) div[class*='language-'] {
-  border-radius: 8px !important;
+  border-radius: 0.5rem !important;
 }
 
 .excerpt-gradient-bottom {
@@ -918,7 +918,7 @@ function onMouseMove(e: MouseEvent) {
   bottom: -1px;
   left: 0;
   width: 100%;
-  height: 8px;
+  height: 0.5rem;
   background: linear-gradient(transparent, var(--vp-local-search-result-bg));
   z-index: 1000;
 }
@@ -928,7 +928,7 @@ function onMouseMove(e: MouseEvent) {
   top: -1px;
   left: 0;
   width: 100%;
-  height: 8px;
+  height: 0.5rem;
   background: linear-gradient(var(--vp-local-search-result-bg), transparent);
   z-index: 1000;
 }
@@ -941,7 +941,7 @@ function onMouseMove(e: MouseEvent) {
 .no-results {
   font-size: 0.9rem;
   text-align: center;
-  padding: 12px;
+  padding: 0.75rem;
 }
 
 svg {

src/client/theme-default/components/VPMenu.vue

@@ -28,9 +28,9 @@ defineProps<{
 
 <style scoped>
 .VPMenu {
-  border-radius: 12px;
+  border-radius: 0.75rem;
-  padding: 12px;
+  padding: 0.75rem;
-  min-width: 128px;
+  min-width: 8rem;
   border: 1px solid var(--vp-c-divider);
   background-color: var(--vp-c-bg-elv);
   box-shadow: var(--vp-shadow-3);
@@ -40,13 +40,13 @@ defineProps<{
 }
 
 .VPMenu :deep(.group) {
-  margin: 0 -12px;
+  margin: 0 -0.75rem;
-  padding: 0 12px 12px;
+  padding: 0 0.75rem 0.75rem;
 }
 
 .VPMenu :deep(.group + .group) {
   border-top: 1px solid var(--vp-c-divider);
-  padding: 11px 12px 12px;
+  padding: 0.6875rem 0.75rem 0.75rem;
 }
 
 .VPMenu :deep(.group:last-child) {
@@ -55,24 +55,24 @@ defineProps<{
 
 .VPMenu :deep(.group + .item) {
   border-top: 1px solid var(--vp-c-divider);
-  padding: 11px 16px 0;
+  padding: 0.6875rem 1rem 0;
 }
 
 .VPMenu :deep(.item) {
-  padding: 0 16px;
+  padding: 0 1rem;
   white-space: nowrap;
 }
 
 .VPMenu :deep(.label) {
   flex-grow: 1;
-  line-height: 28px;
+  line-height: 2.3333333;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
 }
 
 .VPMenu :deep(.action) {
-  padding-left: 24px;
+  padding-left: 1.5rem;
 }
 </style>

src/client/theme-default/components/VPMenuGroup.vue

@@ -20,9 +20,9 @@ defineProps<{
 
 <style scoped>
 .VPMenuGroup {
-  margin: 12px -12px 0;
+  margin: 0.75rem -0.75rem 0;
   border-top: 1px solid var(--vp-c-divider);
-  padding: 12px 12px 0;
+  padding: 0.75rem 0.75rem 0;
 }
 
 .VPMenuGroup:first-child {
@@ -32,14 +32,14 @@ defineProps<{
 }
 
 .VPMenuGroup + .VPMenuGroup {
-  margin-top: 12px;
+  margin-top: 0.75rem;
   border-top: 1px solid var(--vp-c-divider);
 }
 
 .title {
-  padding: 0 12px;
+  padding: 0 0.75rem;
-  line-height: 32px;
+  line-height: 2.2857143;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
   white-space: nowrap;

src/client/theme-default/components/VPMenuLink.vue

@@ -47,17 +47,17 @@ defineOptions({ inheritAttrs: false })
 
 <style scoped>
 .VPMenuGroup + .VPMenuLink {
-  margin: 12px -12px 0;
+  margin: 0.75rem -0.75rem 0;
   border-top: 1px solid var(--vp-c-divider);
-  padding: 12px 12px 0;
+  padding: 0.75rem 0.75rem 0;
 }
 
 .link {
   display: block;
-  border-radius: 6px;
+  border-radius: 0.375rem;
-  padding: 0 12px;
+  padding: 0 0.75rem;
-  line-height: 32px;
+  line-height: 2.2857143;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   text-align: left;

src/client/theme-default/components/VPNav.vue

@@ -49,7 +49,7 @@ watchEffect(() => {
   transition: background-color 0.5s;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNav {
     position: fixed;
   }

src/client/theme-default/components/VPNavBar.vue

@@ -86,7 +86,7 @@ const { isHome, hasSidebar } = useLayout()
   background-color: var(--vp-nav-bg-color);
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBar:not(.home) {
     background-color: transparent;
   }
@@ -97,16 +97,16 @@ const { isHome, hasSidebar } = useLayout()
 }
 
 .wrapper {
-  padding: 0 8px 0 24px;
+  padding: 0 0.5rem 0 1.5rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .wrapper {
-    padding: 0 32px;
+    padding: 0 2rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBar.has-sidebar .wrapper {
     padding: 0;
   }
@@ -116,7 +116,7 @@ const { isHome, hasSidebar } = useLayout()
   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);
   height: var(--vp-nav-height);
   pointer-events: none;
 }
@@ -130,7 +130,7 @@ const { isHome, hasSidebar } = useLayout()
   pointer-events: auto;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBar.has-sidebar .container {
     max-width: 100%;
   }
@@ -142,23 +142,23 @@ const { isHome, hasSidebar } = useLayout()
   transition: background-color 0.5s;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBar.has-sidebar .title {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 2;
-    padding: 0 32px;
+    padding: 0 2rem;
     width: var(--vp-sidebar-width);
     height: var(--vp-nav-height);
     background-color: transparent;
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 90rem) {
   .VPNavBar.has-sidebar .title {
-    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+    padding-left: max(2rem, calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2));
-    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    width: calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2 + var(--vp-sidebar-width) - 2rem);
   }
 }
 
@@ -166,19 +166,19 @@ const { isHome, hasSidebar } = useLayout()
   flex-grow: 1;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBar.has-sidebar .content {
     position: relative;
     z-index: 1;
     padding-left: var(--vp-sidebar-width);
-    padding-right: 32px;
+    padding-right: 2rem;
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 90rem) {
   .VPNavBar.has-sidebar .content {
     padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
-    padding-right: calc((100% - var(--vp-layout-max-width)) / 2 + 32px);
+    padding-right: calc((100% - var(--vp-layout-max-width)) / 2 + 2rem);
   }
 }
 
@@ -190,7 +190,7 @@ const { isHome, hasSidebar } = useLayout()
   transition: background-color 0.5s;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBar:not(.home.top) .content-body {
     position: relative;
     background-color: var(--vp-nav-bg-color);
@@ -211,25 +211,25 @@ const { isHome, hasSidebar } = useLayout()
 .menu + .social-links::before,
 .translations + .appearance::before,
 .appearance + .social-links::before {
-  margin-right: 8px;
+  margin-right: 0.5rem;
-  margin-left: 8px;
+  margin-left: 0.5rem;
   width: 1px;
-  height: 24px;
+  height: 1.5rem;
   background-color: var(--vp-c-divider);
   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;
 }
 
 .divider {
@@ -237,13 +237,13 @@ const { isHome, hasSidebar } = useLayout()
   height: 1px;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBar.has-sidebar .divider {
     padding-left: var(--vp-sidebar-width);
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 90rem) {
   .VPNavBar.has-sidebar .divider {
     padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
@@ -259,7 +259,7 @@ const { isHome, hasSidebar } = useLayout()
   background-color: var(--vp-c-gutter);
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBar:not(.home.top) .divider-line {
     background-color: var(--vp-c-gutter);
   }

src/client/theme-default/components/VPNavBarAppearance.vue

@@ -23,7 +23,7 @@ const { site } = useData()
   display: none;
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPNavBarAppearance {
     display: flex;
     align-items: center;

src/client/theme-default/components/VPNavBarAskAiButton.vue

@@ -9,18 +9,18 @@
   display: flex;
   align-items: center;
   height: var(--vp-nav-height);
-  padding: 8px 14px;
+  padding: 0.5rem 0.875rem;
-  font-size: 20px;
+  font-size: 1.25rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavBarAskAiButton {
     height: auto;
-    padding: 11.5px;
+    padding: 0.71875rem;
     transition: color 0.3s ease;
     background-color: var(--vp-c-bg-alt);
-    border-radius: 8px;
+    border-radius: 0.5rem;
-    font-size: 15px;
+    font-size: 0.9375rem;
     color: var(--vp-c-text-2);
   }
 

src/client/theme-default/components/VPNavBarExtra.vue

@@ -74,25 +74,25 @@ const hasExtraContent = computed(
 <style scoped>
 .VPNavBarExtra {
   display: none;
-  margin-right: -12px;
+  margin-right: -0.75rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavBarExtra {
     display: block;
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPNavBarExtra {
     display: none;
   }
 }
 
 .trans-title {
-  padding: 0 24px 0 12px;
+  padding: 0 1.5rem 0 0.75rem;
-  line-height: 32px;
+  line-height: 2.2857143;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 700;
   color: var(--vp-c-text-1);
 }
@@ -101,18 +101,18 @@ const hasExtraContent = computed(
 .item.social-links {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 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>

src/client/theme-default/components/VPNavBarHamburger.vue

@@ -31,11 +31,11 @@ defineEmits<{
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 48px;
+  width: 3rem;
   height: var(--vp-nav-height);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavBarHamburger {
     display: none;
   }
@@ -43,18 +43,18 @@ defineEmits<{
 
 .container {
   position: relative;
-  width: 16px;
+  width: 1rem;
-  height: 14px;
+  height: 0.875rem;
   overflow: hidden;
 }
 
-.VPNavBarHamburger:hover .top    { top: 0; left: 0; transform: translateX(4px); }
+.VPNavBarHamburger:hover .top    { top: 0; left: 0; transform: translateX(0.25rem); }
-.VPNavBarHamburger:hover .middle { top: 6px; left: 0; transform: translateX(0); }
+.VPNavBarHamburger:hover .middle { top: 0.375rem; left: 0; transform: translateX(0); }
-.VPNavBarHamburger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
+.VPNavBarHamburger:hover .bottom { top: 0.75rem; left: 0; transform: translateX(0.5rem); }
 
-.VPNavBarHamburger.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
+.VPNavBarHamburger.active .top    { top: 0.375rem; transform: translateX(0) rotate(225deg); }
-.VPNavBarHamburger.active .middle { top: 6px; transform: translateX(16px); }
+.VPNavBarHamburger.active .middle { top: 0.375rem; transform: translateX(1rem); }
-.VPNavBarHamburger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
+.VPNavBarHamburger.active .bottom { top: 0.375rem; transform: translateX(0) rotate(135deg); }
 
 .VPNavBarHamburger.active:hover .top,
 .VPNavBarHamburger.active:hover .middle,
@@ -67,13 +67,13 @@ defineEmits<{
 .middle,
 .bottom {
   position: absolute;
-  width: 16px;
+  width: 1rem;
-  height: 2px;
+  height: 0.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); }
+.middle { top: 0.375rem; left: 0; transform: translateX(0.5rem); }
-.bottom { top: 12px; left: 0; transform: translateX(4px); }
+.bottom { top: 0.75rem; left: 0; transform: translateX(0.25rem); }
 </style>

src/client/theme-default/components/VPNavBarMenu.vue

@@ -38,7 +38,7 @@ const { theme } = useData()
   display: flex;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavBarMenu {
     display: block;
   }

src/client/theme-default/components/VPNavBarMenuLink.vue

@@ -44,9 +44,9 @@ const isActiveLink = computed(() => {
 .VPNavBarMenuLink {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 0.75rem;
   line-height: var(--vp-nav-height);
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;

src/client/theme-default/components/VPNavBarSearch.vue

@@ -200,17 +200,17 @@ function isEditingContent(event: KeyboardEvent): boolean {
   align-items: center;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavBarSearch {
-    gap: 8px;
+    gap: 0.5rem;
     flex-grow: 1;
-    padding-left: 24px;
+    padding-left: 1.5rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBarSearch {
-    padding-left: 32px;
+    padding-left: 2rem;
   }
 }
 </style>

src/client/theme-default/components/VPNavBarSearchButton.vue

@@ -20,10 +20,10 @@ defineProps<{
 .VPNavBarSearchButton {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
   height: var(--vp-nav-height);
-  padding: 8px 14px;
+  padding: 0.5rem 0.875rem;
-  font-size: 20px;
+  font-size: 1.25rem;
 }
 
 .text,
@@ -38,30 +38,30 @@ kbd {
   font-weight: 500;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavBarSearchButton {
     height: auto;
-    padding: 8px 12px;
+    padding: 0.5rem 0.75rem;
     background-color: var(--vp-c-bg-alt);
-    border-radius: 8px;
+    border-radius: 0.5rem;
-    font-size: 14px;
+    font-size: 0.875rem;
     line-height: 1;
     color: var(--vp-c-text-2);
   }
 
   .text {
     display: inline;
-    font-size: 13px;
+    font-size: 0.8125rem;
   }
 
   .keys {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 0.25rem;
-    padding: 4px 6px;
+    padding: 0.25rem 0.375rem;
     border: 1px solid var(--vp-c-divider);
-    border-radius: 4px;
+    border-radius: 0.25rem;
-    font-size: 12px;
+    font-size: 0.75rem;
   }
 }
 </style>

src/client/theme-default/components/VPNavBarSocialLinks.vue

@@ -18,7 +18,7 @@ const { theme } = useData()
   display: none;
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPNavBarSocialLinks {
     display: flex;
     align-items: center;

src/client/theme-default/components/VPNavBarTitle.vue

@@ -53,13 +53,13 @@ const target = computed(() =>
   border-bottom: 1px solid transparent;
   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;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .title {
     flex-shrink: 0;
   }
@@ -70,7 +70,7 @@ const target = computed(() =>
 }
 
 :deep(.logo) {
-  margin-right: 8px;
+  margin-right: 0.5rem;
   height: var(--vp-nav-logo-height);
 }
 </style>

src/client/theme-default/components/VPNavBarTranslations.vue

@@ -40,7 +40,7 @@ const { localeLinks, currentLang } = useLangs({
   display: none;
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPNavBarTranslations {
     display: flex;
     align-items: center;
@@ -48,9 +48,9 @@ const { localeLinks, currentLang } = useLangs({
 }
 
 .title {
-  padding: 0 24px 0 12px;
+  padding: 0 1.5rem 0 0.75rem;
-  line-height: 32px;
+  line-height: 2.2857143;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 700;
   color: var(--vp-c-text-1);
 }

src/client/theme-default/components/VPNavScreen.vue

@@ -41,7 +41,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
   bottom: 0;
   /*rtl:ignore*/
   left: 0;
-  padding: 0 32px;
+  padding: 0 2rem;
   width: 100%;
   background-color: var(--vp-nav-screen-bg-color);
   overflow-y: auto;
@@ -66,10 +66,10 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 
 .VPNavScreen.fade-enter-from .container,
 .VPNavScreen.fade-leave-to .container {
-  transform: translateY(-8px);
+  transform: translateY(-0.5rem);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavScreen {
     display: none;
   }
@@ -77,21 +77,21 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 
 .container {
   margin: 0 auto;
-  padding: 24px 0 96px;
+  padding: 1.5rem 0 6rem;
-  max-width: 288px;
+  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>

src/client/theme-default/components/VPNavScreenAppearance.vue

@@ -26,14 +26,14 @@ const { site, theme } = useData()
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-radius: 8px;
+  border-radius: 0.5rem;
-  padding: 12px 14px 12px 16px;
+  padding: 0.75rem 0.875rem 0.75rem 1rem;
   background-color: var(--vp-c-bg-soft);
 }
 
 .text {
-  line-height: 24px;
+  line-height: 2;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }

src/client/theme-default/components/VPNavScreenMenuGroup.vue

@@ -52,7 +52,7 @@ function toggle() {
 <style scoped>
 .VPNavScreenMenuGroup {
   border-bottom: 1px solid var(--vp-c-divider);
-  height: 48px;
+  height: 3rem;
   overflow: hidden;
   transition: border-color 0.5s;
 }
@@ -66,12 +66,12 @@ function toggle() {
 }
 
 .VPNavScreenMenuGroup.open {
-  padding-bottom: 10px;
+  padding-bottom: 0.625rem;
   height: auto;
 }
 
 .VPNavScreenMenuGroup.open .button {
-  padding-bottom: 6px;
+  padding-bottom: 0.375rem;
   color: var(--vp-c-brand-1);
 }
 
@@ -84,10 +84,10 @@ function toggle() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 4px 11px 0;
+  padding: 0.75rem 0.25rem 0.6875rem 0;
   width: 100%;
-  line-height: 24px;
+  line-height: 1.7142857;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
@@ -107,6 +107,6 @@ function toggle() {
 
 .group + .group,
 .group + .item {
-  padding-top: 4px;
+  padding-top: 0.25rem;
 }
 </style>

src/client/theme-default/components/VPNavScreenMenuGroupLink.vue

@@ -46,9 +46,9 @@ const { closeScreen } = inject(navInjectionKey)!
 <style scoped>
 .VPNavScreenMenuGroupLink {
   display: block;
-  margin-left: 12px;
+  margin-left: 0.75rem;
-  line-height: 32px;
+  line-height: 2.2857143;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 400;
   color: var(--vp-c-text-1);
   transition: color 0.25s;

src/client/theme-default/components/VPNavScreenMenuGroupSection.vue

@@ -25,8 +25,8 @@ defineProps<{
 }
 
 .title {
-  line-height: 32px;
+  line-height: 2.4615385;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 700;
   color: var(--vp-c-text-2);
   transition: color 0.25s;

src/client/theme-default/components/VPNavScreenMenuLink.vue

@@ -47,9 +47,9 @@ const { closeScreen } = inject(navInjectionKey)!
 .VPNavScreenMenuLink {
   display: block;
   border-bottom: 1px solid var(--vp-c-divider);
-  padding: 12px 0 11px;
+  padding: 0.75rem 0 0.6875rem;
-  line-height: 24px;
+  line-height: 1.7142857;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition:

src/client/theme-default/components/VPNavScreenTranslations.vue

@@ -46,7 +46,7 @@ function toggle() {
 
 <style scoped>
 .VPNavScreenTranslations {
-  height: 24px;
+  height: 1.5rem;
   overflow: hidden;
 }
 
@@ -57,30 +57,30 @@ function toggle() {
 .title {
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
 }
 
 .icon {
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .icon.lang {
-  margin-right: 8px;
+  margin-right: 0.5rem;
 }
 
 .icon.chevron {
-  margin-left: 4px;
+  margin-left: 0.25rem;
 }
 
 .list {
-  padding: 4px 0 0 24px;
+  padding: 0.25rem 0 0 1.5rem;
 }
 
 .link {
-  line-height: 32px;
+  line-height: 2.4615385;
-  font-size: 13px;
+  font-size: 0.8125rem;
   color: var(--vp-c-text-1);
 }
 </style>

src/client/theme-default/components/VPSidebar.vue

@@ -71,9 +71,9 @@ watch(
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);
-  padding: 32px 32px 96px;
+  padding: 2rem 2rem 6rem;
-  width: calc(100vw - 64px);
+  width: calc(100vw - 4rem);
-  max-width: 320px;
+  max-width: 20rem;
   background-color: var(--vp-sidebar-bg-color);
   opacity: 0;
   box-shadow: var(--vp-c-shadow-3);
@@ -96,7 +96,7 @@ watch(
   box-shadow: var(--vp-shadow-1);
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPSidebar {
     padding-top: var(--vp-nav-height);
     width: var(--vp-sidebar-width);
@@ -109,22 +109,22 @@ watch(
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 90rem) {
   .VPSidebar {
-    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+    padding-left: max(2rem, calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2));
-    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    width: calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2 + var(--vp-sidebar-width) - 2rem);
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .curtain {
     position: sticky;
     top: calc(var(--vp-nav-height) * -1);
     left: 0;
     z-index: 1;
     margin-top: calc(var(--vp-nav-height) * -1);
-    margin-right: -32px;
+    margin-right: -2rem;
-    margin-left: -32px;
+    margin-left: -2rem;
     height: var(--vp-nav-height);
     background-color: var(--vp-sidebar-bg-color);
   }

src/client/theme-default/components/VPSidebarGroup.vue

@@ -44,13 +44,13 @@ onBeforeUnmount(() => {
 
 .group + .group {
   border-top: 1px solid var(--vp-c-divider);
-  padding-top: 10px;
+  padding-top: 0.625rem;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .group {
-    padding-top: 10px;
+    padding-top: 0.625rem;
-    width: calc(var(--vp-sidebar-width) - 64px);
+    width: calc(var(--vp-sidebar-width) - 4rem);
   }
 }
 </style>

src/client/theme-default/components/VPSidebarItem.vue

@@ -109,11 +109,11 @@ function onCaretClick() {
 
 <style scoped>
 .VPSidebarItem.level-0 {
-  padding-bottom: 24px;
+  padding-bottom: 1.5rem;
 }
 
 .VPSidebarItem.collapsed.level-0 {
-  padding-bottom: 10px;
+  padding-bottom: 0.625rem;
 }
 
 .item {
@@ -128,9 +128,9 @@ function onCaretClick() {
 
 .indicator {
   position: absolute;
-  top: 6px;
+  top: 0.375rem;
-  bottom: 6px;
+  bottom: 0.375rem;
-  left: -17px;
+  left: calc(-1rem - 1px);
   width: 2px;
   border-radius: 2px;
   transition: background-color 0.25s;
@@ -151,9 +151,9 @@ function onCaretClick() {
 
 .text {
   flex-grow: 1;
-  padding: 4px 0;
+  padding: 0.25rem 0;
-  line-height: 24px;
+  line-height: 1.7142857;
-  font-size: 14px;
+  font-size: 0.875rem;
   transition: color 0.25s;
 }
 
@@ -208,9 +208,9 @@ function onCaretClick() {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: -7px;
+  margin-right: -0.4375rem;
-  width: 32px;
+  width: 2rem;
-  height: 32px;
+  height: 2rem;
   color: var(--vp-c-text-3);
   cursor: pointer;
   transition: color 0.25s;
@@ -226,7 +226,7 @@ function onCaretClick() {
 }
 
 .caret-icon {
-  font-size: 18px;
+  font-size: 1.125rem;
   /*rtl:ignore*/
   transform: rotate(90deg);
   transition: transform 0.25s;
@@ -242,7 +242,7 @@ function onCaretClick() {
 .VPSidebarItem.level-4 .items,
 .VPSidebarItem.level-5 .items {
   border-left: 1px solid var(--vp-c-divider);
-  padding-left: 16px;
+  padding-left: 1rem;
 }
 
 .VPSidebarItem.collapsed .items {

src/client/theme-default/components/VPSkipLink.vue

@@ -20,12 +20,12 @@ watch(() => route.path, () => backToTop.value.focus())
 <style scoped>
 .VPSkipLink {
   position: fixed;
-  top: 8px;
+  top: 0.5rem;
-  left: 8px;
+  left: 0.5rem;
-  padding: 8px 16px;
+  padding: 0.5rem 1rem;
   z-index: 999;
-  border-radius: 8px;
+  border-radius: 0.5rem;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: bold;
   text-decoration: none;
   color: var(--vp-c-brand-1);
@@ -40,10 +40,10 @@ watch(() => route.path, () => backToTop.value.focus())
   clip-path: none;
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 80rem) {
   .VPSkipLink {
-    top: 14px;
+    top: 0.875rem;
-    left: 16px;
+    left: 1rem;
   }
 }
 </style>

src/client/theme-default/components/VPSocialLink.vue

@@ -57,8 +57,8 @@ if (import.meta.env.SSR) {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 36px;
+  width: 2.25rem;
-  height: 36px;
+  height: 2.25rem;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
 }
@@ -70,8 +70,8 @@ if (import.meta.env.SSR) {
 
 .VPSocialLink > :deep(svg),
 .VPSocialLink > :deep([class^="vpi-social-"]) {
-  width: 20px;
+  width: 1.25rem;
-  height: 20px;
+  height: 1.25rem;
   fill: currentColor;
 }
 </style>

src/client/theme-default/components/VPSwitch.vue

@@ -11,10 +11,10 @@
 <style scoped>
 .VPSwitch {
   position: relative;
-  border-radius: 11px;
+  border-radius: 0.6875rem;
   display: block;
-  width: 40px;
+  width: 2.5rem;
-  height: 22px;
+  height: 1.375rem;
   flex-shrink: 0;
   border: 1px solid var(--vp-input-border-color);
   background-color: var(--vp-input-switch-bg-color);
@@ -30,8 +30,8 @@
   top: 1px;
   /*rtl:ignore*/
   left: 1px;
-  width: 18px;
+  width: 1.125rem;
-  height: 18px;
+  height: 1.125rem;
   border-radius: 50%;
   background-color: var(--vp-c-neutral-inverse);
   box-shadow: var(--vp-shadow-1);
@@ -41,18 +41,18 @@
 .icon {
   position: relative;
   display: block;
-  width: 18px;
+  width: 1.125rem;
-  height: 18px;
+  height: 1.125rem;
   border-radius: 50%;
   overflow: hidden;
 }
 
 .icon :deep([class^='vpi-']) {
   position: absolute;
-  top: 3px;
+  top: 0.1875rem;
-  left: 3px;
+  left: 0.1875rem;
-  width: 12px;
+  width: 0.75rem;
-  height: 12px;
+  height: 0.75rem;
   color: var(--vp-c-text-2);
 }
 

src/client/theme-default/components/VPSwitchAppearance.vue

@@ -49,6 +49,6 @@ watchPostEffect(() => {
 
 .dark .VPSwitchAppearance :deep(.check) {
   /*rtl:ignore*/
-  transform: translateX(18px);
+  transform: translateX(1.125rem);
 }
 </style>

src/client/theme-default/components/VPTeamMembers.vue

@@ -27,41 +27,41 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
 
 <style scoped>
 .VPTeamMembers.small .container {
-  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
 }
 
 .VPTeamMembers.small.count-1 .container {
-  max-width: 276px;
+  max-width: 17.25rem;
 }
 .VPTeamMembers.small.count-2 .container {
-  max-width: calc(276px * 2 + 24px);
+  max-width: calc(17.25rem * 2 + 1.5rem);
 }
 .VPTeamMembers.small.count-3 .container {
-  max-width: calc(276px * 3 + 24px * 2);
+  max-width: calc(17.25rem * 3 + 1.5rem * 2);
 }
 
 .VPTeamMembers.medium .container {
-  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
 }
 
-@media (min-width: 375px) {
+@media (min-width: 23.4375rem) {
   .VPTeamMembers.medium .container {
-    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
   }
 }
 
 .VPTeamMembers.medium.count-1 .container {
-  max-width: 368px;
+  max-width: 23rem;
 }
 .VPTeamMembers.medium.count-2 .container {
-  max-width: calc(368px * 2 + 24px);
+  max-width: calc(23rem * 2 + 1.5rem);
 }
 
 .container {
   display: grid;
-  gap: 24px;
+  gap: 1.5rem;
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 72rem;
 }
 
 /* Reset styles from vp-doc if used in markdown */

src/client/theme-default/components/VPTeamMembersItem.vue

@@ -56,82 +56,82 @@ withDefaults(defineProps<Props>(), {
 .VPTeamMembersItem {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 0.125rem;
-  border-radius: 12px;
+  border-radius: 0.75rem;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
 
 .VPTeamMembersItem.small .profile {
-  padding: 32px;
+  padding: 2rem;
 }
 
 .VPTeamMembersItem.small .data {
-  padding-top: 20px;
+  padding-top: 1.25rem;
 }
 
 .VPTeamMembersItem.small .avatar {
-  width: 64px;
+  width: 4rem;
-  height: 64px;
+  height: 4rem;
 }
 
 .VPTeamMembersItem.small .name {
-  line-height: 24px;
+  line-height: 1.5;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .VPTeamMembersItem.small .affiliation {
-  padding-top: 4px;
+  padding-top: 0.25rem;
-  line-height: 20px;
+  line-height: 1.4285714;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .VPTeamMembersItem.small .desc {
-  padding-top: 12px;
+  padding-top: 0.75rem;
-  line-height: 20px;
+  line-height: 1.4285714;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .VPTeamMembersItem.small .links {
-  margin: 0 -16px -20px;
+  margin: 0 -1rem -1.25rem;
-  padding: 10px 0 0;
+  padding: 0.625rem 0 0;
 }
 
 .VPTeamMembersItem.medium .profile {
-  padding: 48px 32px;
+  padding: 3rem 2rem;
 }
 
 .VPTeamMembersItem.medium .data {
-  padding-top: 24px;
+  padding-top: 1.5rem;
   text-align: center;
 }
 
 .VPTeamMembersItem.medium .avatar {
-  width: 96px;
+  width: 6rem;
-  height: 96px;
+  height: 6rem;
 }
 
 .VPTeamMembersItem.medium .name {
-  letter-spacing: 0.15px;
+  letter-spacing: 0.0075em;
-  line-height: 28px;
+  line-height: 1.4;
-  font-size: 20px;
+  font-size: 1.25rem;
 }
 
 .VPTeamMembersItem.medium .affiliation {
-  padding-top: 4px;
+  padding-top: 0.25rem;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .VPTeamMembersItem.medium .desc {
-  padding-top: 16px;
+  padding-top: 1rem;
-  max-width: 288px;
+  max-width: 18rem;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .VPTeamMembersItem.medium .links {
-  margin: 0 -16px -12px;
+  margin: 0 -1rem -0.75rem;
-  padding: 16px 12px 0;
+  padding: 1rem 0.75rem 0;
 }
 
 .profile {
@@ -193,7 +193,7 @@ withDefaults(defineProps<Props>(), {
 .links {
   display: flex;
   justify-content: center;
-  height: 56px;
+  height: 3.5rem;
 }
 
 .sp-link {
@@ -201,8 +201,8 @@ withDefaults(defineProps<Props>(), {
   justify-content: center;
   align-items: center;
   text-align: center;
-  padding: 16px;
+  padding: 1rem;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-sponsor);
   background-color: var(--vp-c-bg-soft);
@@ -217,7 +217,7 @@ withDefaults(defineProps<Props>(), {
 }
 
 .sp-icon {
-  margin-right: 8px;
+  margin-right: 0.5rem;
-  font-size: 16px;
+  font-size: 1rem;
 }
 </style>

src/client/theme-default/components/VPTeamPage.vue

@@ -6,53 +6,53 @@
 
 <style scoped>
 .VPTeamPage {
-  margin: 96px 0;
+  margin: 6rem 0;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPTeamPage {
-    margin: 128px 0;
+    margin: 8rem 0;
   }
 }
 
 .VPHome :slotted(.VPTeamPageTitle) {
   border-top: 1px solid var(--vp-c-gutter);
-  padding-top: 88px !important;
+  padding-top: 5.5rem !important;
 }
 
 :slotted(.VPTeamPageSection + .VPTeamPageSection),
 :slotted(.VPTeamMembers + .VPTeamPageSection) {
-  margin-top: 64px;
+  margin-top: 4rem;
 }
 
 :slotted(.VPTeamMembers + .VPTeamMembers) {
-  margin-top: 24px;
+  margin-top: 1.5rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   :slotted(.VPTeamPageTitle + .VPTeamPageSection) {
-    margin-top: 16px;
+    margin-top: 1rem;
   }
 
   :slotted(.VPTeamPageSection + .VPTeamPageSection),
   :slotted(.VPTeamMembers + .VPTeamPageSection) {
-    margin-top: 96px;
+    margin-top: 6rem;
   }
 }
 
 :slotted(.VPTeamMembers) {
-  padding: 0 24px;
+  padding: 0 1.5rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   :slotted(.VPTeamMembers) {
-    padding: 0 48px;
+    padding: 0 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   :slotted(.VPTeamMembers) {
-    padding: 0 64px;
+    padding: 0 4rem;
   }
 }
 </style>

src/client/theme-default/components/VPTeamPageSection.vue

@@ -17,32 +17,32 @@
 
 <style scoped>
 .VPTeamPageSection {
-  padding: 0 32px;
+  padding: 0 2rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPTeamPageSection {
-    padding: 0 48px;
+    padding: 0 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPTeamPageSection {
-    padding: 0 64px;
+    padding: 0 4rem;
   }
 }
 
 .title {
   position: relative;
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 72rem;
   text-align: center;
   color: var(--vp-c-text-2);
 }
 
 .title-line {
   position: absolute;
-  top: 16px;
+  top: 1rem;
   left: 0;
   width: 100%;
   height: 1px;
@@ -52,26 +52,26 @@
 .title-text {
   position: relative;
   display: inline-block;
-  padding: 0 24px;
+  padding: 0 1.5rem;
   letter-spacing: 0;
-  line-height: 32px;
+  line-height: 1.6;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: 500;
   background-color: var(--vp-c-bg);
 }
 
 .lead {
   margin: 0 auto;
-  max-width: 480px;
+  max-width: 30rem;
-  padding-top: 12px;
+  padding-top: 0.75rem;
   text-align: center;
-  line-height: 24px;
+  line-height: 1.5;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .members {
-  padding-top: 40px;
+  padding-top: 2.5rem;
 }
 </style>

src/client/theme-default/components/VPTeamPageTitle.vue

@@ -11,53 +11,53 @@
 
 <style scoped>
 .VPTeamPageTitle {
-  padding: 48px 32px;
+  padding: 3rem 2rem;
   text-align: center;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPTeamPageTitle {
-    padding: 64px 48px 48px;
+    padding: 4rem 3rem 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPTeamPageTitle {
-    padding: 80px 64px 48px;
+    padding: 5rem 4rem 3rem;
   }
 }
 
 .title {
   letter-spacing: 0;
-  line-height: 44px;
+  line-height: 1.2222222;
-  font-size: 36px;
+  font-size: 2.25rem;
   font-weight: 500;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .title {
-    letter-spacing: -0.5px;
+    letter-spacing: -0.0104167em;
-    line-height: 56px;
+    line-height: 1.1666667;
-    font-size: 48px;
+    font-size: 3rem;
   }
 }
 
 .lead {
   margin: 0 auto;
-  max-width: 512px;
+  max-width: 32rem;
-  padding-top: 12px;
+  padding-top: 0.75rem;
-  line-height: 24px;
+  line-height: 1.5;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .lead {
-    max-width: 592px;
+    max-width: 37rem;
-    letter-spacing: 0.15px;
+    letter-spacing: 0.0075em;
-    line-height: 28px;
+    line-height: 1.4;
-    font-size: 20px;
+    font-size: 1.25rem;
   }
 }
 </style>

src/client/theme-default/composables/aside.ts

@@ -1,21 +0,0 @@
-import { useMediaQuery } from '@vueuse/core'
-import { computed } from 'vue'
-import { useLayout } from './layout'
-
-export function useAside() {
-  const { hasSidebar } = useLayout()
-  const is960 = useMediaQuery('(min-width: 960px)')
-  const is1280 = useMediaQuery('(min-width: 1280px)')
-
-  const isAsideEnabled = computed(() => {
-    if (!is1280.value && !is960.value) {
-      return false
-    }
-
-    return hasSidebar.value ? is1280.value : is960.value
-  })
-
-  return {
-    isAsideEnabled
-  }
-}

src/client/theme-default/composables/layout.ts

@@ -1,4 +1,5 @@
-import { inBrowser, onContentUpdated, useRoute } from 'vitepress'
+import { useMediaQuery } from '@vueuse/core'
+import { onContentUpdated, useRoute } from 'vitepress'
 import type { DefaultTheme, useLayout as expected } from 'vitepress/theme'
 import {
   computed,
@@ -16,7 +17,7 @@ import { useCloseSidebarOnEscape } from './sidebar'
 const headers = shallowRef<DefaultTheme.OutlineItem[]>([])
 const sidebar = shallowRef<DefaultTheme.SidebarItem[]>([])
 
-const is960 = shallowRef(false)
+const isDesktop = useMediaQuery('(min-width: 60rem)')
 
 export function useLayout(): ReturnType<typeof expected> {
   const { frontmatter, theme } = useData()
@@ -33,7 +34,7 @@ export function useLayout(): ReturnType<typeof expected> {
     )
   })
 
-  const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
+  const isSidebarEnabled = computed(() => hasSidebar.value && isDesktop.value)
 
   const sidebarGroups = computed(() => {
     return hasSidebar.value ? getSidebarGroups(sidebar.value) : []
@@ -93,21 +94,10 @@ export function registerWatchers({ closeSidebar }: RegisterWatchersOptions) {
     headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
   })
 
-  if (inBrowser) {
-    is960.value = window.innerWidth >= 960
-    window.addEventListener(
-      'resize',
-      () => {
-        is960.value = window.innerWidth >= 960
-      },
-      { passive: true }
-    )
-  }
-
   const route = useRoute()
   watch(() => route.path, closeSidebar)
 
-  watch(is960, closeSidebar)
+  watch(isDesktop, closeSidebar)
   useCloseSidebarOnEscape(closeSidebar)
 }
 

src/client/theme-default/composables/outline.ts

@@ -1,7 +1,7 @@
+import { useMediaQuery } from '@vueuse/core'
 import type { DefaultTheme } from 'vitepress/theme'
 import { onMounted, onUnmounted, onUpdated, type Ref } from 'vue'
 import { throttleAndDebounce } from '../support/utils'
-import { useAside } from './aside'
 
 const ignoreRE = /\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/
 
@@ -79,7 +79,7 @@ export function useActiveAnchor(
   container: Ref<HTMLElement>,
   marker: Ref<HTMLElement>
 ): void {
-  const { isAsideEnabled } = useAside()
+  const isAsideVisible = useMediaQuery('(min-width: 80rem)')
 
   const onScroll = throttleAndDebounce(setActiveLink, 100)
 
@@ -102,7 +102,7 @@ export function useActiveAnchor(
   })
 
   function onClick(e: MouseEvent) {
-    if (!isAsideEnabled.value) {
+    if (!isAsideVisible.value) {
       return
     }
 
@@ -116,7 +116,7 @@ export function useActiveAnchor(
   }
 
   function setActiveLink() {
-    if (!isAsideEnabled.value) {
+    if (!isAsideVisible.value) {
       return
     }
 
@@ -187,10 +187,16 @@ export function useActiveAnchor(
 
     if (activeLink) {
       activeLink.classList.add('active')
-      marker.value.style.top = activeLink.offsetTop + 39 + 'px'
+      // the links' offsetParent (.root) sits below the outline title while the
+      // marker is offset from .content, so re-align their origins
+      marker.value.style.top =
+        activeLink.offsetTop +
+        ((activeLink.offsetParent as HTMLElement)?.offsetTop ?? 0) +
+        (activeLink.offsetHeight - marker.value.offsetHeight) / 2 +
+        'px'
       marker.value.style.opacity = '1'
     } else {
-      marker.value.style.top = '33px'
+      marker.value.style.top = ''
       marker.value.style.opacity = '0'
     }
   }

src/client/theme-default/composables/sponsor-grid.ts

@@ -15,10 +15,10 @@ export interface UseSponsorsGridOptions {
 /**
  * Defines grid configuration for each sponsor size in tuple.
  *
- * [Screen width, Column size]
+ * [Screen width (rem), Column size]
  *
- * It sets grid size on matching screen size. For example, `[768, 5]` will
+ * It sets grid size on matching screen size. For example, `[48, 5]` will
- * set 5 columns when screen size is bigger or equal to 768px.
+ * set 5 columns when the screen is at least 48rem wide.
  *
  * Column will set only when item size is bigger than the column size. For
  * example, even we define 5 columns, if we only have 1 sponsor yet, we would
@@ -28,21 +28,21 @@ const GridSettings: GridSetting = {
   xmini: [[0, 2]],
   mini: [],
   small: [
-    [920, 6],
+    [57.5, 6],
-    [768, 5],
+    [48, 5],
-    [640, 4],
+    [40, 4],
-    [480, 3],
+    [30, 3],
     [0, 2]
   ],
   medium: [
-    [960, 5],
+    [60, 5],
-    [832, 4],
+    [52, 4],
-    [640, 3],
+    [40, 3],
-    [480, 2]
+    [30, 2]
   ],
   big: [
-    [832, 3],
+    [52, 3],
-    [640, 2]
+    [40, 2]
   ]
 }
 
@@ -77,12 +77,11 @@ function adjustSlots(el: HTMLElement, size: GridSize) {
 
 function setGrid(el: HTMLElement, size: GridSize, items: number) {
   const settings = GridSettings[size]
-  const screen = window.innerWidth
 
   let grid = 1
 
   settings.some(([breakpoint, value]) => {
-    if (screen >= breakpoint) {
+    if (window.matchMedia(`(min-width: ${breakpoint}rem)`).matches) {
       grid = items < value ? items : value
       return true
     }

src/client/theme-default/styles/base.css

@@ -150,11 +150,11 @@
   }
 
   :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
+    padding-inline-start: 1.25rem;
   }
 
   ::file-selector-button {
-    margin-inline-end: 4px;
+    margin-inline-end: 0.25rem;
   }
 
   ::placeholder {
@@ -244,10 +244,6 @@
   }
 
   :root {
-    /* FIXME: pins rem-sized bits while the theme is px-based - remove when
-       moving to relative units (#570) */
-    font-size: 16px;
-
     &:is(.dark) {
       color-scheme: dark;
     }
@@ -257,9 +253,6 @@
   }
 
   body {
-    /* FIXME: unlike html's unitless 1.5, this is inherited as-is by elements
-       with other font sizes - make unitless with #570 */
-    line-height: 24px;
     color: var(--vp-c-text-1);
     background-color: var(--vp-c-bg);
     text-rendering: optimizeLegibility;

src/client/theme-default/styles/components/custom-block.css

@@ -1,15 +1,15 @@
 .custom-block {
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: 0.5rem;
-  padding: 8px 16px;
+  padding: 0.5rem 1rem;
-  line-height: 24px;
+  line-height: 1.7142857;
   font-size: var(--vp-custom-block-font-size);
   color: var(--vp-c-text-2);
 }
 
 /* containers rendered with `{no-title}` keep the reduced padding */
 .custom-block:has(> .custom-block-title, > summary) {
-  padding-top: 16px;
+  padding-top: 1rem;
 }
 
 .custom-block.info {
@@ -176,25 +176,25 @@
 }
 
 .custom-block p + p {
-  margin: 8px 0;
+  margin: 0.5rem 0;
 }
 
 .custom-block.details summary {
-  margin: 0 0 8px;
+  margin: 0 0 0.5rem;
   font-weight: 700;
   cursor: pointer;
   user-select: none;
 }
 
 .custom-block.details summary + p {
-  margin: 8px 0;
+  margin: 0.5rem 0;
 }
 
 .custom-block a {
   color: inherit;
   font-weight: 600;
   text-decoration: underline;
-  text-underline-offset: 2px;
+  text-underline-offset: 0.125rem;
   transition: opacity 0.25s;
 }
 

src/client/theme-default/styles/components/vp-code-group.css

@@ -1,24 +1,24 @@
 .vp-code-group {
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 
 .vp-code-group .tabs {
   position: relative;
   display: flex;
-  margin-right: -24px;
+  margin-right: -1.5rem;
-  margin-left: -24px;
+  margin-left: -1.5rem;
-  padding: 0 12px;
+  padding: 0 0.75rem;
   background-color: var(--vp-code-tab-bg);
   overflow-x: auto;
   overflow-y: hidden;
   box-shadow: inset 0 -1px var(--vp-code-tab-divider);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .vp-code-group .tabs {
     margin-right: 0;
     margin-left: 0;
-    border-radius: 8px 8px 0 0;
+    border-radius: 0.5rem 0.5rem 0 0;
   }
 }
 
@@ -32,9 +32,9 @@
   position: relative;
   display: inline-block;
   border-bottom: 1px solid transparent;
-  padding: 0 12px;
+  padding: 0 0.75rem;
-  line-height: 48px;
+  line-height: 3.4285714;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-code-tab-text-color);
   white-space: nowrap;
@@ -44,9 +44,9 @@
 
 .vp-code-group .tabs label::after {
   position: absolute;
-  right: 8px;
+  right: 0.5rem;
   bottom: -1px;
-  left: 8px;
+  left: 0.5rem;
   z-index: 1;
   height: 2px;
   border-radius: 2px;
@@ -81,5 +81,5 @@
 }
 
 .vp-block {
-  padding: 20px 24px;
+  padding: 1.25rem 1.5rem;
 }

src/client/theme-default/styles/components/vp-doc.css

@@ -4,21 +4,21 @@
 
 .vp-doc [id] {
   scroll-margin-top: calc(
-    47px + var(--vp-layout-top-height, 0px) +
+    2.9375rem + var(--vp-layout-top-height, 0px) +
-      var(--vp-extra-scroll-margin, 24px)
+      var(--vp-extra-scroll-margin, 1.5rem)
   );
 
-  @media (min-width: 960px) {
+  @media (min-width: 60rem) {
     scroll-margin-top: calc(
-      var(--vp-nav-height) + 47px + var(--vp-layout-top-height, 0px) +
+      var(--vp-nav-height) + 2.9375rem + var(--vp-layout-top-height, 0px) +
-        var(--vp-extra-scroll-margin, 24px)
+        var(--vp-extra-scroll-margin, 1.5rem)
     );
   }
 
-  @media (min-width: 1280px) {
+  @media (min-width: 80rem) {
     scroll-margin-top: calc(
       var(--vp-nav-height) + var(--vp-layout-top-height, 0px) +
-        var(--vp-extra-scroll-margin, 24px)
+        var(--vp-extra-scroll-margin, 1.5rem)
     );
   }
 }
@@ -40,33 +40,33 @@
 
 .vp-doc h1 {
   letter-spacing: -0.02em;
-  line-height: 40px;
+  line-height: 1.4285714;
-  font-size: 28px;
+  font-size: 1.75rem;
 }
 
 .vp-doc h2 {
-  margin: 48px 0 16px;
+  margin: 3rem 0 1rem;
   border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
+  padding-top: 1.5rem;
   letter-spacing: -0.02em;
-  line-height: 32px;
+  line-height: 1.3333333;
-  font-size: 24px;
+  font-size: 1.5rem;
-  /* since it already has a top padding of 24px, we don't need extra scroll margin */
+  /* since it already has a top padding of 1.5rem, we don't need extra scroll margin */
   --vp-extra-scroll-margin: 0px;
 }
 
 .vp-doc h3 {
-  margin: 32px 0 0;
+  margin: 2rem 0 0;
   letter-spacing: -0.01em;
-  line-height: 28px;
+  line-height: 1.4;
-  font-size: 20px;
+  font-size: 1.25rem;
 }
 
 .vp-doc h4 {
-  margin: 24px 0 0;
+  margin: 1.5rem 0 0;
   letter-spacing: -0.01em;
-  line-height: 24px;
+  line-height: 1.3333333;
-  font-size: 18px;
+  font-size: 1.125rem;
 }
 
 .vp-doc .header-anchor {
@@ -102,16 +102,16 @@
   opacity: 1;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .vp-doc h1 {
     letter-spacing: -0.02em;
-    line-height: 40px;
+    line-height: 1.25;
-    font-size: 32px;
+    font-size: 2rem;
   }
 }
 
 .vp-doc h2 .header-anchor {
-  top: 24px;
+  top: 1.5rem;
 }
 
 /**
@@ -121,24 +121,24 @@
 .vp-doc p,
 .vp-doc img,
 .vp-doc summary {
-  margin: 16px 0;
+  margin: 1rem 0;
 }
 
 .vp-doc p {
-  line-height: 28px;
+  line-height: 1.75;
 }
 
 .vp-doc blockquote {
-  margin: 16px 0;
+  margin: 1rem 0;
   border-left: 2px solid var(--vp-c-divider);
-  padding-left: 16px;
+  padding-left: 1rem;
   transition: border-color 0.5s;
   color: var(--vp-c-text-2);
 }
 
 .vp-doc blockquote > p {
   margin: 0;
-  font-size: 16px;
+  font-size: 1rem;
   transition: color 0.5s;
 }
 
@@ -146,7 +146,7 @@
   font-weight: 500;
   color: var(--vp-c-brand-1);
   text-decoration: underline;
-  text-underline-offset: 2px;
+  text-underline-offset: 0.125rem;
   transition:
     color 0.25s,
     opacity 0.25s;
@@ -167,7 +167,7 @@
 .vp-doc ul,
 .vp-doc ol {
   padding-left: 1.25rem;
-  margin: 16px 0;
+  margin: 1rem 0;
 }
 
 .vp-doc ul {
@@ -179,12 +179,12 @@
 }
 
 .vp-doc li + li {
-  margin-top: 8px;
+  margin-top: 0.5rem;
 }
 
 .vp-doc li > ol,
 .vp-doc li > ul {
-  margin: 8px 0 0;
+  margin: 0.5rem 0 0;
 }
 
 .vp-doc li > p:first-child {
@@ -200,7 +200,7 @@
 }
 
 .vp-doc .task-list-item-checkbox {
-  margin: 0 4px 2px -1.25rem;
+  margin: 0 0.25rem 0.125rem -1.25rem;
   vertical-align: middle;
   accent-color: var(--vp-c-brand-1);
 }
@@ -215,7 +215,7 @@
 }
 
 .vp-doc .footnotes {
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 /**
@@ -225,7 +225,7 @@
 .vp-doc table {
   display: block;
   border-collapse: collapse;
-  margin: 20px 0;
+  margin: 1.25rem 0;
   overflow-x: auto;
 }
 
@@ -242,19 +242,19 @@
 .vp-doc th,
 .vp-doc td {
   border: 1px solid var(--vp-c-divider);
-  padding: 8px 16px;
+  padding: 0.5rem 1rem;
 }
 
 .vp-doc th {
   text-align: left;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
   background-color: var(--vp-c-bg-soft);
 }
 
 .vp-doc td {
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 /**
@@ -262,7 +262,7 @@
  * -------------------------------------------------------------------------- */
 
 .vp-doc hr {
-  margin: 16px 0;
+  margin: 1rem 0;
   border: none;
   border-top: 1px solid var(--vp-c-divider);
 }
@@ -272,12 +272,12 @@
  * -------------------------------------------------------------------------- */
 
 .vp-doc .custom-block {
-  margin: 16px 0;
+  margin: 1rem 0;
 }
 
 .vp-doc .custom-block p {
-  margin: 8px 0;
+  margin: 0.5rem 0;
-  line-height: 24px;
+  line-height: 1.7142857;
 }
 
 .vp-doc .custom-block p:first-child {
@@ -285,8 +285,8 @@
 }
 
 .vp-doc .custom-block div[class*='language-'] {
-  margin: 8px 0 !important;
+  margin: 0.5rem 0 !important;
-  border-radius: 8px;
+  border-radius: 0.5rem;
 }
 
 .vp-doc .custom-block div[class*='language-'] code {
@@ -296,12 +296,12 @@
 
 .vp-doc .custom-block .vp-code-group,
 .vp-doc .custom-block [class*='vp-code-block'] {
-  margin-top: 8px;
+  margin-top: 0.5rem;
 }
 
 .vp-doc .custom-block .vp-code-group .tabs {
   margin: 0;
-  border-radius: 8px 8px 0 0;
+  border-radius: 0.5rem 0.5rem 0 0;
 }
 
 .vp-doc .custom-block .vp-code-group div[class*='language-'],
@@ -320,8 +320,8 @@
 }
 
 .vp-doc :not(pre) > code {
-  border-radius: 4px;
+  border-radius: 0.25rem;
-  padding: 3px 6px;
+  padding: 0.1875rem 0.375rem;
   background-color: var(--vp-code-bg);
   transition:
     color 0.25s,
@@ -346,30 +346,30 @@
 .vp-doc div[class*='language-'],
 .vp-block {
   position: relative;
-  margin: 16px -24px;
+  margin: 1rem -1.5rem;
   background-color: var(--vp-code-block-bg);
   overflow-x: auto;
   transition: background-color 0.5s;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .vp-doc div[class*='language-'],
   .vp-block {
-    border-radius: 8px;
+    border-radius: 0.5rem;
-    margin: 16px 0;
+    margin: 1rem 0;
   }
 }
 
-@media (max-width: 639px) {
+@media not all and (min-width: 40rem) {
   .vp-doc li div[class*='language-'] {
-    border-radius: 8px 0 0 8px;
+    border-radius: 0.5rem 0 0 0.5rem;
   }
 }
 
 .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,
@@ -383,7 +383,7 @@
   position: relative;
   z-index: 1;
   margin: 0;
-  padding: 20px 0;
+  padding: 1.25rem 0;
   background: transparent;
   overflow-x: auto;
   /*rtl:ignore*/
@@ -392,7 +392,7 @@
 
 .vp-doc [class*='language-'] code {
   display: block;
-  padding: 0 24px;
+  padding: 0 1.5rem;
   width: fit-content;
   min-width: 100%;
   line-height: var(--vp-code-line-height);
@@ -404,9 +404,9 @@
 .vp-doc [class*='language-'] code .highlighted {
   background-color: var(--vp-code-line-highlight-color);
   transition: background-color 0.5s;
-  margin: 0 -24px;
+  margin: 0 -1.5rem;
-  padding: 0 24px;
+  padding: 0 1.5rem;
-  width: calc(100% + 2 * 24px);
+  width: calc(100% + 2 * 1.5rem);
   display: inline-block;
 }
 
@@ -420,15 +420,15 @@
 
 .vp-doc [class*='language-'] code .diff {
   transition: background-color 0.5s;
-  margin: 0 -24px;
+  margin: 0 -1.5rem;
-  padding: 0 24px;
+  padding: 0 1.5rem;
-  width: calc(100% + 2 * 24px);
+  width: calc(100% + 2 * 1.5rem);
   display: inline-block;
 }
 
 .vp-doc [class*='language-'] code .diff::before {
   position: absolute;
-  left: 10px;
+  left: 0.625rem;
 }
 
 .vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
@@ -472,7 +472,7 @@
 
 .vp-doc div[class*='language-'].line-numbers-mode {
   /*rtl:ignore*/
-  padding-left: 32px;
+  padding-left: 2rem;
 }
 
 .vp-doc .line-numbers-wrapper {
@@ -484,8 +484,8 @@
   z-index: 3;
   /*rtl:ignore*/
   border-right: 1px solid var(--vp-code-block-divider-color);
-  padding-top: 20px;
+  padding-top: 1.25rem;
-  width: 32px;
+  width: 2rem;
   text-align: center;
   font-family: var(--vp-font-family-mono);
   line-height: var(--vp-code-line-height);
@@ -500,20 +500,20 @@
   /*rtl:ignore*/
   direction: ltr;
   position: absolute;
-  top: 12px;
+  top: 0.75rem;
   /*rtl:ignore*/
-  right: 12px;
+  right: 0.75rem;
   z-index: 3;
   border: 1px solid var(--vp-code-copy-code-border-color);
-  border-radius: 4px;
+  border-radius: 0.25rem;
-  width: 40px;
+  width: 2.5rem;
-  height: 40px;
+  height: 2.5rem;
   background-color: var(--vp-code-copy-code-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:
     border-color 0.25s,
@@ -535,7 +535,7 @@
 .vp-doc [class*='language-'] > button.copy.copied,
 .vp-doc [class*='language-'] > button.copy:hover.copied {
   /*rtl:ignore*/
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 0.25rem 0.25rem 0;
   background-color: var(--vp-code-copy-code-hover-bg);
   background-image: var(--vp-icon-copied);
 }
@@ -553,12 +553,12 @@
   /*rtl:ignore*/
   border-right: 0;
   /*rtl:ignore*/
-  border-radius: 4px 0 0 4px;
+  border-radius: 0.25rem 0 0 0.25rem;
-  padding: 0 10px;
+  padding: 0 0.625rem;
   width: fit-content;
-  height: 40px;
+  height: 2.5rem;
   text-align: center;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--vp-code-copy-code-active-text);
   background-color: var(--vp-code-copy-code-hover-bg);
@@ -568,11 +568,11 @@
 
 .vp-doc [class*='language-'] > span.lang {
   position: absolute;
-  top: 2px;
+  top: 0.125rem;
   /*rtl:ignore*/
-  right: 8px;
+  right: 0.5rem;
   z-index: 2;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   user-select: none;
   color: var(--vp-code-lang-color);
@@ -591,12 +591,12 @@
  * -------------------------------------------------------------------------- */
 
 .vp-doc .VPTeamMembers {
-  margin-top: 24px;
+  margin-top: 1.5rem;
 }
 
 .vp-doc .VPTeamMembers.small.count-1 .container {
   margin: 0 !important;
-  max-width: calc((100% - 24px) / 2) !important;
+  max-width: calc((100% - 1.5rem) / 2) !important;
 }
 
 .vp-doc .VPTeamMembers.small.count-2 .container,
@@ -606,7 +606,7 @@
 
 .vp-doc .VPTeamMembers.medium.count-1 .container {
   margin: 0 !important;
-  max-width: calc((100% - 24px) / 2) !important;
+  max-width: calc((100% - 1.5rem) / 2) !important;
 }
 
 /**
@@ -616,8 +616,8 @@
 /* prettier-ignore */
 :is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
   display: inline;
-  margin-left: 4px;
+  margin-left: 0.25rem;
-  padding-left: 11px;
+  padding-left: 0.6875rem;
   background: currentColor;
   color: var(--vp-c-text-3);
   flex-shrink: 0;
@@ -628,11 +628,11 @@
   mask-position: center;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
-  -webkit-mask-size: 11px 11px;
+  -webkit-mask-size: 0.6875rem 0.6875rem;
-  mask-size: 11px 11px;
+  mask-size: 0.6875rem 0.6875rem;
   /*rtl:raw:transform: scaleX(-1);*/
   vertical-align: bottom;
-  font-size: 10px;
+  font-size: 0.625rem;
 }
 
 .vp-external-link-icon::after {

src/client/theme-default/styles/components/vp-sponsor.css

@@ -3,23 +3,23 @@
  * allied in onMounted` hook and we can't use scoped style.
  */
 .vp-sponsor {
-  border-radius: 16px;
+  border-radius: 1rem;
   overflow: hidden;
 }
 
 .vp-sponsor.aside {
-  border-radius: 12px;
+  border-radius: 0.75rem;
 }
 
 .vp-sponsor-section + .vp-sponsor-section {
-  margin-top: 4px;
+  margin-top: 0.25rem;
 }
 
 .vp-sponsor-tier {
-  margin: 0 0 4px !important;
+  margin: 0 0 0.25rem !important;
   text-align: center;
-  letter-spacing: 1px !important;
+  letter-spacing: 0.0625rem !important;
-  line-height: 24px;
+  line-height: 1.5;
   width: 100%;
   font-weight: 600;
   color: var(--vp-c-text-2);
@@ -27,83 +27,83 @@
 }
 
 .vp-sponsor.normal .vp-sponsor-tier {
-  padding: 13px 0 11px;
+  padding: 0.8125rem 0 0.6875rem;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .vp-sponsor.aside .vp-sponsor-tier {
-  padding: 9px 0 7px;
+  padding: 0.5625rem 0 0.4375rem;
-  font-size: 12px;
+  font-size: 0.75rem;
 }
 
 .vp-sponsor-grid + .vp-sponsor-tier {
-  margin-top: 4px;
+  margin-top: 0.25rem;
 }
 
 .vp-sponsor-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 0.25rem;
 }
 
 .vp-sponsor-grid.xmini .vp-sponsor-grid-link {
-  height: 64px;
+  height: 4rem;
 }
 .vp-sponsor-grid.xmini .vp-sponsor-grid-image {
-  max-width: 64px;
+  max-width: 4rem;
-  max-height: 22px;
+  max-height: 1.375rem;
 }
 
 .vp-sponsor-grid.mini .vp-sponsor-grid-link {
-  height: 72px;
+  height: 4.5rem;
 }
 .vp-sponsor-grid.mini .vp-sponsor-grid-image {
-  max-width: 96px;
+  max-width: 6rem;
-  max-height: 24px;
+  max-height: 1.5rem;
 }
 
 .vp-sponsor-grid.small .vp-sponsor-grid-link {
-  height: 96px;
+  height: 6rem;
 }
 .vp-sponsor-grid.small .vp-sponsor-grid-image {
-  max-width: 96px;
+  max-width: 6rem;
-  max-height: 24px;
+  max-height: 1.5rem;
 }
 
 .vp-sponsor-grid.medium .vp-sponsor-grid-link {
-  height: 112px;
+  height: 7rem;
 }
 .vp-sponsor-grid.medium .vp-sponsor-grid-image {
-  max-width: 120px;
+  max-width: 7.5rem;
-  max-height: 36px;
+  max-height: 2.25rem;
 }
 
 .vp-sponsor-grid.big .vp-sponsor-grid-link {
-  height: 184px;
+  height: 11.5rem;
 }
 .vp-sponsor-grid.big .vp-sponsor-grid-image {
-  max-width: 192px;
+  max-width: 12rem;
-  max-height: 56px;
+  max-height: 3.5rem;
 }
 
 .vp-sponsor-grid[data-vp-grid='2'] .vp-sponsor-grid-item {
-  width: calc((100% - 4px) / 2);
+  width: calc((100% - 0.25rem) / 2);
 }
 
 .vp-sponsor-grid[data-vp-grid='3'] .vp-sponsor-grid-item {
-  width: calc((100% - 4px * 2) / 3);
+  width: calc((100% - 0.25rem * 2) / 3);
 }
 
 .vp-sponsor-grid[data-vp-grid='4'] .vp-sponsor-grid-item {
-  width: calc((100% - 4px * 3) / 4);
+  width: calc((100% - 0.25rem * 3) / 4);
 }
 
 .vp-sponsor-grid[data-vp-grid='5'] .vp-sponsor-grid-item {
-  width: calc((100% - 4px * 4) / 5);
+  width: calc((100% - 0.25rem * 4) / 5);
 }
 
 .vp-sponsor-grid[data-vp-grid='6'] .vp-sponsor-grid-item {
-  width: calc((100% - 4px * 5) / 6);
+  width: calc((100% - 0.25rem * 5) / 6);
 }
 
 .vp-sponsor-grid-item {

src/client/theme-default/styles/docsearch.css

@@ -11,58 +11,75 @@
   --docsearch-actions-height: auto;
   --docsearch-actions-width: auto;
   --docsearch-background-color: var(--vp-c-bg-soft);
+  --docsearch-border-radius: 0.25rem;
   --docsearch-container-background: var(--vp-backdrop-bg-color);
   --docsearch-dropdown-menu-background: var(--vp-c-bg-elv);
   --docsearch-dropdown-menu-item-hover-background: var(--vp-c-default-soft);
   --docsearch-focus-color: var(--vp-c-brand-1);
   --docsearch-footer-background: var(--vp-c-bg-alt);
+  --docsearch-footer-height: 3.25rem;
   --docsearch-highlight-color: var(--vp-c-brand-1);
   --docsearch-hit-background: var(--vp-c-bg);
   --docsearch-hit-color: var(--vp-c-text-1);
+  --docsearch-hit-height: 3.5rem;
   --docsearch-hit-highlight-color: var(--vp-c-brand-soft);
   --docsearch-icon-color: var(--vp-c-text-2);
   --docsearch-key-background: var(--vp-code-bg);
   --docsearch-modal-background: var(--vp-c-bg-soft);
+  --docsearch-modal-height: 37.5rem;
+  --docsearch-modal-width: 50rem;
   --docsearch-muted-color: var(--vp-c-text-2);
   --docsearch-primary-color: var(--vp-c-brand-1);
   --docsearch-searchbox-background: var(--vp-c-bg-alt);
   --docsearch-searchbox-focus-background: transparent;
+  --docsearch-searchbox-height: 3.5rem;
+  --docsearch-searchbox-initial-height: 3.5rem;
   --docsearch-secondary-text-color: var(--vp-c-text-2);
   --docsearch-sidepanel-accent-muted: var(--vp-c-text-3);
   --docsearch-sidepanel-text-base: var(--vp-c-text-1);
   --docsearch-soft-muted-color: var(--vp-c-default-soft);
   --docsearch-soft-primary-color: var(--vp-c-brand-soft);
+  --docsearch-spacing: 0.75rem;
   --docsearch-subtle-color: var(--vp-c-divider);
   --docsearch-success-color: var(--vp-c-brand-soft);
   --docsearch-text-color: var(--vp-c-text-1);
 }
 
+/* mirror the tightened mobile values from @docsearch/css, which the
+   higher-specificity overrides above would otherwise mask */
+@media not all and (min-width: 48rem) {
+  :root:root {
+    --docsearch-footer-height: 3rem;
+    --docsearch-spacing: 0.625rem;
+  }
+}
+
 :root.dark {
   --docsearch-modal-shadow: none;
 }
 
 .DocSearch-AskAiScreen-RelatedSources-Item-Link {
-  padding: 8px 12px 8px 10px;
+  padding: 0.5rem 0.75rem 0.5rem 0.625rem;
 }
 
 .DocSearch-AskAiScreen-RelatedSources-Item-Link svg {
-  width: 16px;
+  width: 1rem;
-  height: 16px;
+  height: 1rem;
 }
 
 .DocSearch-AskAiScreen-RelatedSources-Title {
   padding-bottom: 0;
-  font-size: 12px;
+  font-size: 0.75rem;
 }
 
 .DocSearch-Clear {
-  padding-right: 6px;
+  padding-right: 0.375rem;
 }
 
 .DocSearch-Commands-Key {
-  padding: 4px;
+  padding: 0.25rem;
   border: 1px solid var(--docsearch-subtle-color);
-  border-radius: 4px;
+  border-radius: 0.25rem;
 }
 
 .DocSearch-Hit a:focus-visible {
@@ -78,15 +95,15 @@
 }
 
 .DocSearch-Menu-content {
-  margin-top: -4px;
+  margin-top: -0.25rem;
-  padding: 6px;
+  padding: 0.375rem;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
+  border-radius: 0.375rem;
   box-shadow: var(--vp-shadow-2);
 }
 
 .DocSearch-Menu-item {
-  border-radius: 4px;
+  border-radius: 0.25rem;
 }
 
 .DocSearch-SearchBar + .DocSearch-Footer {

src/client/theme-default/styles/vars.css

@@ -308,7 +308,7 @@
   --vp-z-index-sidebar: 60;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   :root {
     --vp-z-index-sidebar: 25;
   }
@@ -319,7 +319,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-layout-max-width: 1440px;
+  --vp-layout-max-width: 90rem;
 }
 
 /**
@@ -415,8 +415,8 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-custom-block-font-size: 14px;
+  --vp-custom-block-font-size: 0.875rem;
-  --vp-custom-block-code-font-size: 13px;
+  --vp-custom-block-code-font-size: 0.8125rem;
 
   --vp-custom-block-info-border: transparent;
   --vp-custom-block-info-text: var(--vp-c-text-1);
@@ -475,10 +475,10 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-nav-height: 64px;
+  --vp-nav-height: 4rem;
   --vp-nav-bg-color: var(--vp-c-bg);
   --vp-nav-screen-bg-color: var(--vp-c-bg);
-  --vp-nav-logo-height: 24px;
+  --vp-nav-logo-height: 1.5rem;
 }
 
 .hide-nav {
@@ -486,7 +486,7 @@
 }
 
 .hide-nav .VPSidebar {
-  --vp-nav-height: 22px;
+  --vp-nav-height: 1.375rem;
 }
 
 /**
@@ -502,7 +502,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-sidebar-width: 272px;
+  --vp-sidebar-width: 17rem;
   --vp-sidebar-bg-color: var(--vp-c-bg-alt);
 }
 

src/node/plugin.ts

@@ -257,8 +257,15 @@ export async function createVitePressPlugin(
         if (docsearchRE.test(normalizePath(id))) {
           return code
             .replaceAll('[data-theme=dark]', '.dark')
-            .replaceAll(/\(max-width:\s*768px\)/g, '(max-width: 767px)')
+            .replaceAll(
-            .replaceAll(/\(min-width:\s*769px\)/g, '(min-width: 768px)')
+              /@media (?:screen and )?\(max-width:\s*768px\)/g,
+              '@media not all and (min-width: 48rem)'
+            )
+            .replaceAll(
+              /\(max-width:\s*768px\)/g,
+              'not all and (min-width: 48rem)'
+            )
+            .replaceAll(/\(min-width:\s*769px\)/g, '(min-width: 48rem)')
         }
       }
     },

template/.vitepress/theme/style.css

@@ -106,13 +106,13 @@
   --vp-home-hero-image-filter: blur(44px);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   :root {
     --vp-home-hero-image-filter: blur(56px);
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   :root {
     --vp-home-hero-image-filter: blur(68px);
   }