From 2a91caa78e62227764e8714574b8367e0610e8ee Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Mon, 10 Aug 2026 07:11:49 +0800 Subject: [PATCH] feat(theme): use relative length units (#5323) Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> --- .../node/plugins/localSearchPlugin.test.ts | 6 +- docs/.vitepress/config.ts | 14 +- docs/.vitepress/theme/styles.css | 6 +- docs/components/ModalDemo.vue | 12 +- docs/ru/components/ModalDemo.vue | 12 +- src/client/theme-default/NotFound.vue | 34 ++-- .../theme-default/components/VPBackdrop.vue | 2 +- .../theme-default/components/VPBadge.vue | 26 +-- .../theme-default/components/VPButton.vue | 16 +- .../theme-default/components/VPCarbonAds.vue | 28 +-- .../theme-default/components/VPContent.vue | 4 +- src/client/theme-default/components/VPDoc.vue | 50 ++--- .../theme-default/components/VPDocAside.vue | 4 +- .../components/VPDocAsideOutline.vue | 12 +- .../theme-default/components/VPDocFooter.vue | 34 ++-- .../components/VPDocFooterLastUpdated.vue | 10 +- .../components/VPDocOutlineItem.vue | 10 +- .../theme-default/components/VPFeature.vue | 34 ++-- .../theme-default/components/VPFeatures.vue | 22 +-- .../theme-default/components/VPFlyout.vue | 14 +- .../theme-default/components/VPFooter.vue | 12 +- .../theme-default/components/VPHero.vue | 132 ++++++------- .../theme-default/components/VPHome.vue | 6 +- .../components/VPHomeContent.vue | 12 +- .../components/VPHomeSponsors.vue | 34 ++-- .../theme-default/components/VPLocalNav.vue | 33 ++-- .../components/VPLocalNavOutlineDropdown.vue | 40 ++-- .../components/VPLocalSearchBox.vue | 102 +++++----- .../theme-default/components/VPMenu.vue | 22 +-- .../theme-default/components/VPMenuGroup.vue | 12 +- .../theme-default/components/VPMenuLink.vue | 12 +- src/client/theme-default/components/VPNav.vue | 2 +- .../theme-default/components/VPNavBar.vue | 52 ++--- .../components/VPNavBarAppearance.vue | 2 +- .../components/VPNavBarAskAiButton.vue | 12 +- .../components/VPNavBarExtra.vue | 20 +- .../components/VPNavBarHamburger.vue | 28 +-- .../theme-default/components/VPNavBarMenu.vue | 2 +- .../components/VPNavBarMenuLink.vue | 4 +- .../components/VPNavBarSearch.vue | 10 +- .../components/VPNavBarSearchButton.vue | 24 +-- .../components/VPNavBarSocialLinks.vue | 2 +- .../components/VPNavBarTitle.vue | 6 +- .../components/VPNavBarTranslations.vue | 8 +- .../theme-default/components/VPNavScreen.vue | 16 +- .../components/VPNavScreenAppearance.vue | 8 +- .../components/VPNavScreenMenuGroup.vue | 14 +- .../components/VPNavScreenMenuGroupLink.vue | 6 +- .../VPNavScreenMenuGroupSection.vue | 4 +- .../components/VPNavScreenMenuLink.vue | 6 +- .../components/VPNavScreenTranslations.vue | 16 +- .../theme-default/components/VPSidebar.vue | 20 +- .../components/VPSidebarGroup.vue | 8 +- .../components/VPSidebarItem.vue | 26 +-- .../theme-default/components/VPSkipLink.vue | 16 +- .../theme-default/components/VPSocialLink.vue | 8 +- .../theme-default/components/VPSwitch.vue | 22 +-- .../components/VPSwitchAppearance.vue | 2 +- .../components/VPTeamMembers.vue | 22 +-- .../components/VPTeamMembersItem.vue | 70 +++---- .../theme-default/components/VPTeamPage.vue | 28 +-- .../components/VPTeamPageSection.vue | 30 +-- .../components/VPTeamPageTitle.vue | 40 ++-- src/client/theme-default/composables/aside.ts | 21 -- .../theme-default/composables/layout.ts | 20 +- .../theme-default/composables/outline.ts | 18 +- .../theme-default/composables/sponsor-grid.ts | 29 ++- src/client/theme-default/styles/base.css | 11 +- .../styles/components/custom-block.css | 16 +- .../styles/components/vp-code-group.css | 24 +-- .../styles/components/vp-doc.css | 180 +++++++++--------- .../styles/components/vp-sponsor.css | 64 +++---- src/client/theme-default/styles/docsearch.css | 39 ++-- src/client/theme-default/styles/vars.css | 16 +- src/node/plugin.ts | 11 +- template/.vitepress/theme/style.css | 4 +- 76 files changed, 874 insertions(+), 880 deletions(-) delete mode 100644 src/client/theme-default/composables/aside.ts diff --git a/__tests__/unit/node/plugins/localSearchPlugin.test.ts b/__tests__/unit/node/plugins/localSearchPlugin.test.ts index ffbf3e46..86242ce9 100644 --- a/__tests__/unit/node/plugins/localSearchPlugin.test.ts +++ b/__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\n' ) await writeFile( - path.join(configDir, 'config.ts'), + path.join(configDir, 'config.mjs'), "export default { themeConfig: { search: { provider: 'local' } } }" ) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 1be8a317..fd8c91df 100644 --- a/docs/.vitepress/config.ts +++ b/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 faMarkdown } from '../fa/config' -import { markdown as jaMarkdown } from '../ja/config' -import { markdown as koMarkdown } from '../ko/config' -import { markdown as ptMarkdown } from '../pt/config' -import { markdown as ruMarkdown } from '../ru/config' -import { markdown as zhMarkdown } from '../zh/config' +import { markdown as esMarkdown } from '../es/config.js' +import { markdown as faMarkdown } from '../fa/config.js' +import { markdown as jaMarkdown } from '../ja/config.js' +import { markdown as koMarkdown } from '../ko/config.js' +import { markdown as ptMarkdown } from '../pt/config.js' +import { markdown as ruMarkdown } from '../ru/config.js' +import { markdown as zhMarkdown } from '../zh/config.js' const prod = !!process.env.NETLIFY const siteUrl = 'https://vitepress.dev' diff --git a/docs/.vitepress/theme/styles.css b/docs/.vitepress/theme/styles.css index 54c5d424..ccd0853b 100644 --- a/docs/.vitepress/theme/styles.css +++ b/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 { diff --git a/docs/components/ModalDemo.vue b/docs/components/ModalDemo.vue index 93dbab8f..e5ba2e39 100644 --- a/docs/components/ModalDemo.vue +++ b/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; - border-radius: 4px; + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; border-color: var(--vp-button-alt-border); color: var(--vp-button-alt-text); background-color: var(--vp-button-alt-bg); diff --git a/docs/ru/components/ModalDemo.vue b/docs/ru/components/ModalDemo.vue index 85c9dec1..ea9f7848 100644 --- a/docs/ru/components/ModalDemo.vue +++ b/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; - border-radius: 4px; + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; border-color: var(--vp-button-alt-border); color: var(--vp-button-alt-text); background-color: var(--vp-button-alt-bg); diff --git a/src/client/theme-default/NotFound.vue b/src/client/theme-default/NotFound.vue index f65d3a6d..07d278b5 100644 --- a/src/client/theme-default/NotFound.vue +++ b/src/client/theme-default/NotFound.vue @@ -33,55 +33,55 @@ const { currentLang } = useLangs() diff --git a/src/client/theme-default/components/VPDocAside.vue b/src/client/theme-default/components/VPDocAside.vue index 0267cbfd..54ffa71e 100644 --- a/src/client/theme-default/components/VPDocAside.vue +++ b/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; } diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue index 168099d8..42207e1b 100644 --- a/src/client/theme-default/components/VPDocAsideOutline.vue +++ b/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; - font-size: 13px; + padding-left: 1rem; + 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; - font-size: 14px; + line-height: 2.2857143; + font-size: 0.875rem; font-weight: 600; } diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue index 45c6e32a..9b74fc38 100644 --- a/src/client/theme-default/components/VPDocFooter.vue +++ b/src/client/theme-default/components/VPDocFooter.vue @@ -84,19 +84,19 @@ const showFooter = computed( diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue index e0e49b18..a35fe9ee 100644 --- a/src/client/theme-default/components/VPFeature.vue +++ b/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; - border-radius: 6px; + margin-bottom: 1.25rem; + border-radius: 0.375rem; background-color: var(--vp-c-default-soft); - width: 48px; - height: 48px; - font-size: 24px; + width: 3rem; + height: 3rem; + font-size: 1.5rem; transition: background-color 0.25s; } .title { - line-height: 24px; - font-size: 16px; + line-height: 1.5; + font-size: 1rem; font-weight: 600; } .details { flex-grow: 1; - padding-top: 8px; - line-height: 24px; - font-size: 14px; + padding-top: 0.5rem; + line-height: 1.7142857; + 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; } diff --git a/src/client/theme-default/components/VPFeatures.vue b/src/client/theme-default/components/VPFeatures.vue index eae47d2a..880d2059 100644 --- a/src/client/theme-default/components/VPFeatures.vue +++ b/src/client/theme-default/components/VPFeatures.vue @@ -62,38 +62,38 @@ const grid = computed(() => { diff --git a/src/client/theme-default/components/VPHome.vue b/src/client/theme-default/components/VPHome.vue index 78b1ae53..4e39a385 100644 --- a/src/client/theme-default/components/VPHome.vue +++ b/src/client/theme-default/components/VPHome.vue @@ -37,12 +37,12 @@ const { frontmatter, theme } = useData() diff --git a/src/client/theme-default/components/VPHomeContent.vue b/src/client/theme-default/components/VPHomeContent.vue index 010b95fb..2754f429 100644 --- a/src/client/theme-default/components/VPHomeContent.vue +++ b/src/client/theme-default/components/VPHomeContent.vue @@ -21,20 +21,20 @@ const { width: vw } = useWindowSize({ .container { margin: auto; width: 100%; - max-width: 1280px; - padding: 0 24px; + max-width: 80rem; + 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; } } diff --git a/src/client/theme-default/components/VPHomeSponsors.vue b/src/client/theme-default/components/VPHomeSponsors.vue index d4eaacd2..dfab32a1 100644 --- a/src/client/theme-default/components/VPHomeSponsors.vue +++ b/src/client/theme-default/components/VPHomeSponsors.vue @@ -49,44 +49,44 @@ withDefaults(defineProps(), { diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue index f80bb361..2d38ea62 100644 --- a/src/client/theme-default/components/VPLocalNav.vue +++ b/src/client/theme-default/components/VPLocalNav.vue @@ -20,11 +20,14 @@ const { y } = useWindowScroll() const navHeight = ref(0) onMounted(() => { - navHeight.value = parseInt( - getComputedStyle(document.documentElement).getPropertyValue( - '--vp-nav-height' - ) - ) + // getComputedStyle returns custom properties as their raw token ("4rem"), + // so resolve the height by measuring instead of parsing + 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; - font-size: 12px; + line-height: 2; + 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; - font-size: 14px; + margin-right: 0.5rem; + 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; } } diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue index 7aded0f9..1197ea10 100644 --- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue +++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue @@ -95,9 +95,9 @@ function scrollToTop() { diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue index fa6af65e..2efbe158 100644 --- a/src/client/theme-default/components/VPLocalSearchBox.vue +++ b/src/client/theme-default/components/VPLocalSearchBox.vue @@ -641,19 +641,19 @@ function onMouseMove(e: MouseEvent) { .shell { position: relative; - padding: 12px; - margin: 64px auto; + padding: 0.75rem; + 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); - border-radius: 6px; + max-height: min(100vh - 8rem, 56.25rem); + 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; - width: 18px; - height: 18px; + margin: 0.5rem; + width: 1.125rem; + 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; - line-height: 14px; + gap: 1rem; + 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; - padding: 3px 6px; - min-width: 24px; + border-radius: 0.25rem; + padding: 0.1875rem 0.375rem; + 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; - border-radius: 4px; + gap: 0.5rem; + 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; - padding: 0 2px; + border-radius: 0.125rem; + 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 { diff --git a/src/client/theme-default/components/VPMenu.vue b/src/client/theme-default/components/VPMenu.vue index bea61988..99b9683d 100644 --- a/src/client/theme-default/components/VPMenu.vue +++ b/src/client/theme-default/components/VPMenu.vue @@ -28,9 +28,9 @@ defineProps<{ diff --git a/src/client/theme-default/components/VPMenuGroup.vue b/src/client/theme-default/components/VPMenuGroup.vue index 7d12eb75..e95ad5e9 100644 --- a/src/client/theme-default/components/VPMenuGroup.vue +++ b/src/client/theme-default/components/VPMenuGroup.vue @@ -20,9 +20,9 @@ defineProps<{ diff --git a/src/client/theme-default/components/VPNavBarHamburger.vue b/src/client/theme-default/components/VPNavBarHamburger.vue index 89a27247..dcb47365 100644 --- a/src/client/theme-default/components/VPNavBarHamburger.vue +++ b/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; - height: 14px; + width: 1rem; + height: 0.875rem; overflow: hidden; } -.VPNavBarHamburger:hover .top { top: 0; left: 0; transform: translateX(4px); } -.VPNavBarHamburger:hover .middle { top: 6px; left: 0; transform: translateX(0); } -.VPNavBarHamburger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); } +.VPNavBarHamburger:hover .top { top: 0; left: 0; transform: translateX(0.25rem); } +.VPNavBarHamburger:hover .middle { top: 0.375rem; left: 0; transform: translateX(0); } +.VPNavBarHamburger:hover .bottom { top: 0.75rem; left: 0; transform: translateX(0.5rem); } -.VPNavBarHamburger.active .top { top: 6px; transform: translateX(0) rotate(225deg); } -.VPNavBarHamburger.active .middle { top: 6px; transform: translateX(16px); } -.VPNavBarHamburger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); } +.VPNavBarHamburger.active .top { top: 0.375rem; transform: translateX(0) rotate(225deg); } +.VPNavBarHamburger.active .middle { top: 0.375rem; transform: translateX(1rem); } +.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; - height: 2px; + width: 1rem; + 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); } -.bottom { top: 12px; left: 0; transform: translateX(4px); } +.middle { top: 0.375rem; left: 0; transform: translateX(0.5rem); } +.bottom { top: 0.75rem; left: 0; transform: translateX(0.25rem); } diff --git a/src/client/theme-default/components/VPNavBarMenu.vue b/src/client/theme-default/components/VPNavBarMenu.vue index 05663c1f..cab2a133 100644 --- a/src/client/theme-default/components/VPNavBarMenu.vue +++ b/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; } diff --git a/src/client/theme-default/components/VPNavBarMenuLink.vue b/src/client/theme-default/components/VPNavBarMenuLink.vue index 62d5dcf2..c7a9982a 100644 --- a/src/client/theme-default/components/VPNavBarMenuLink.vue +++ b/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; diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue index e23d5cef..c6e3af71 100644 --- a/src/client/theme-default/components/VPNavBarSearch.vue +++ b/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; } } diff --git a/src/client/theme-default/components/VPNavBarSearchButton.vue b/src/client/theme-default/components/VPNavBarSearchButton.vue index 7169390b..a9f7e42c 100644 --- a/src/client/theme-default/components/VPNavBarSearchButton.vue +++ b/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; - font-size: 20px; + padding: 0.5rem 0.875rem; + 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; - font-size: 14px; + border-radius: 0.5rem; + 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; - padding: 4px 6px; + gap: 0.25rem; + padding: 0.25rem 0.375rem; border: 1px solid var(--vp-c-divider); - border-radius: 4px; - font-size: 12px; + border-radius: 0.25rem; + font-size: 0.75rem; } } diff --git a/src/client/theme-default/components/VPNavBarSocialLinks.vue b/src/client/theme-default/components/VPNavBarSocialLinks.vue index 1adc8037..4209e2b0 100644 --- a/src/client/theme-default/components/VPNavBarSocialLinks.vue +++ b/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; diff --git a/src/client/theme-default/components/VPNavBarTitle.vue b/src/client/theme-default/components/VPNavBarTitle.vue index 9679f8a5..d27cf7ee 100644 --- a/src/client/theme-default/components/VPNavBarTitle.vue +++ b/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); } diff --git a/src/client/theme-default/components/VPNavBarTranslations.vue b/src/client/theme-default/components/VPNavBarTranslations.vue index ef334c37..e71b8318 100644 --- a/src/client/theme-default/components/VPNavBarTranslations.vue +++ b/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; - line-height: 32px; - font-size: 14px; + padding: 0 1.5rem 0 0.75rem; + line-height: 2.2857143; + font-size: 0.875rem; font-weight: 700; color: var(--vp-c-text-1); } diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue index 7256d66d..55be5be6 100644 --- a/src/client/theme-default/components/VPNavScreen.vue +++ b/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; - max-width: 288px; + padding: 1.5rem 0 6rem; + max-width: 18rem; } .menu + .translations, .menu + .appearance, .translations + .appearance { - margin-top: 24px; + margin-top: 1.5rem; } .menu + .social-links { - margin-top: 16px; + margin-top: 1rem; } .appearance + .social-links { - margin-top: 16px; + margin-top: 1rem; } diff --git a/src/client/theme-default/components/VPNavScreenAppearance.vue b/src/client/theme-default/components/VPNavScreenAppearance.vue index 4f7d2640..76c68bdb 100644 --- a/src/client/theme-default/components/VPNavScreenAppearance.vue +++ b/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; - padding: 12px 14px 12px 16px; + border-radius: 0.5rem; + padding: 0.75rem 0.875rem 0.75rem 1rem; background-color: var(--vp-c-bg-soft); } .text { - line-height: 24px; - font-size: 12px; + line-height: 2; + font-size: 0.75rem; font-weight: 500; color: var(--vp-c-text-2); } diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue index 78baed24..0a29618e 100644 --- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue +++ b/src/client/theme-default/components/VPNavScreenMenuGroup.vue @@ -52,7 +52,7 @@ function toggle() { diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue index 53932dff..4d7acb70 100644 --- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue +++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue @@ -46,9 +46,9 @@ const { closeScreen } = inject(navInjectionKey)! diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue index 7e6e2528..9dbb802e 100644 --- a/src/client/theme-default/components/VPSidebar.vue +++ b/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; - width: calc(100vw - 64px); - max-width: 320px; + padding: 2rem 2rem 6rem; + width: calc(100vw - 4rem); + 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)); - width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px); + padding-left: max(2rem, calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2)); + 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-left: -32px; + margin-right: -2rem; + margin-left: -2rem; height: var(--vp-nav-height); background-color: var(--vp-sidebar-bg-color); } diff --git a/src/client/theme-default/components/VPSidebarGroup.vue b/src/client/theme-default/components/VPSidebarGroup.vue index 0c200174..b3221c9a 100644 --- a/src/client/theme-default/components/VPSidebarGroup.vue +++ b/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; - width: calc(var(--vp-sidebar-width) - 64px); + padding-top: 0.625rem; + width: calc(var(--vp-sidebar-width) - 4rem); } } diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue index e4c63f2b..6dad9f58 100644 --- a/src/client/theme-default/components/VPSidebarItem.vue +++ b/src/client/theme-default/components/VPSidebarItem.vue @@ -109,11 +109,11 @@ function onCaretClick() { diff --git a/src/client/theme-default/components/VPSocialLink.vue b/src/client/theme-default/components/VPSocialLink.vue index bed90fed..837c211e 100644 --- a/src/client/theme-default/components/VPSocialLink.vue +++ b/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; - height: 36px; + width: 2.25rem; + 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; - height: 20px; + width: 1.25rem; + height: 1.25rem; fill: currentColor; } diff --git a/src/client/theme-default/components/VPSwitch.vue b/src/client/theme-default/components/VPSwitch.vue index 36af1cba..01a2b43b 100644 --- a/src/client/theme-default/components/VPSwitch.vue +++ b/src/client/theme-default/components/VPSwitch.vue @@ -11,10 +11,10 @@ diff --git a/src/client/theme-default/components/VPTeamMembers.vue b/src/client/theme-default/components/VPTeamMembers.vue index 6b83e4a6..9d38d641 100644 --- a/src/client/theme-default/components/VPTeamMembers.vue +++ b/src/client/theme-default/components/VPTeamMembers.vue @@ -27,41 +27,41 @@ const classes = computed(() => [props.size, `count-${props.members.length}`]) diff --git a/src/client/theme-default/components/VPTeamPage.vue b/src/client/theme-default/components/VPTeamPage.vue index 71d9bdb5..5ba4faff 100644 --- a/src/client/theme-default/components/VPTeamPage.vue +++ b/src/client/theme-default/components/VPTeamPage.vue @@ -6,53 +6,53 @@ diff --git a/src/client/theme-default/components/VPTeamPageSection.vue b/src/client/theme-default/components/VPTeamPageSection.vue index 2bb52ab9..bccc5b1d 100644 --- a/src/client/theme-default/components/VPTeamPageSection.vue +++ b/src/client/theme-default/components/VPTeamPageSection.vue @@ -17,32 +17,32 @@ diff --git a/src/client/theme-default/components/VPTeamPageTitle.vue b/src/client/theme-default/components/VPTeamPageTitle.vue index 9751a188..81718725 100644 --- a/src/client/theme-default/components/VPTeamPageTitle.vue +++ b/src/client/theme-default/components/VPTeamPageTitle.vue @@ -11,53 +11,53 @@ diff --git a/src/client/theme-default/composables/aside.ts b/src/client/theme-default/composables/aside.ts deleted file mode 100644 index 50f20626..00000000 --- a/src/client/theme-default/composables/aside.ts +++ /dev/null @@ -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 - } -} diff --git a/src/client/theme-default/composables/layout.ts b/src/client/theme-default/composables/layout.ts index d6efb7ec..2e232be8 100644 --- a/src/client/theme-default/composables/layout.ts +++ b/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([]) const sidebar = shallowRef([]) -const is960 = shallowRef(false) +const isDesktop = useMediaQuery('(min-width: 60rem)') export function useLayout(): ReturnType { const { frontmatter, theme } = useData() @@ -33,7 +34,7 @@ export function useLayout(): ReturnType { ) }) - 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) } diff --git a/src/client/theme-default/composables/outline.ts b/src/client/theme-default/composables/outline.ts index 067b2b1a..21fa0078 100644 --- a/src/client/theme-default/composables/outline.ts +++ b/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, marker: Ref ): 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' } } diff --git a/src/client/theme-default/composables/sponsor-grid.ts b/src/client/theme-default/composables/sponsor-grid.ts index 3a6f7e3b..624e15ba 100644 --- a/src/client/theme-default/composables/sponsor-grid.ts +++ b/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 - * set 5 columns when screen size is bigger or equal to 768px. + * It sets grid size on matching screen size. For example, `[48, 5]` will + * 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], - [768, 5], - [640, 4], - [480, 3], + [57.5, 6], + [48, 5], + [40, 4], + [30, 3], [0, 2] ], medium: [ - [960, 5], - [832, 4], - [640, 3], - [480, 2] + [60, 5], + [52, 4], + [40, 3], + [30, 2] ], big: [ - [832, 3], - [640, 2] + [52, 3], + [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 } diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css index ca379eb1..89fa8039 100644 --- a/src/client/theme-default/styles/base.css +++ b/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; diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css index f3445a81..b80b434c 100644 --- a/src/client/theme-default/styles/components/custom-block.css +++ b/src/client/theme-default/styles/components/custom-block.css @@ -1,15 +1,15 @@ .custom-block { border: 1px solid transparent; - border-radius: 8px; - padding: 8px 16px; - line-height: 24px; + border-radius: 0.5rem; + padding: 0.5rem 1rem; + 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; } diff --git a/src/client/theme-default/styles/components/vp-code-group.css b/src/client/theme-default/styles/components/vp-code-group.css index 4f23a416..430e835e 100644 --- a/src/client/theme-default/styles/components/vp-code-group.css +++ b/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-left: -24px; - padding: 0 12px; + margin-right: -1.5rem; + margin-left: -1.5rem; + 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; - line-height: 48px; - font-size: 14px; + padding: 0 0.75rem; + line-height: 3.4285714; + 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; } diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css index 6250685e..62e00ff4 100644 --- a/src/client/theme-default/styles/components/vp-doc.css +++ b/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) + - var(--vp-extra-scroll-margin, 24px) + 2.9375rem + var(--vp-layout-top-height, 0px) + + 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-extra-scroll-margin, 24px) + var(--vp-nav-height) + 2.9375rem + var(--vp-layout-top-height, 0px) + + 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; - font-size: 28px; + line-height: 1.4285714; + 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; - font-size: 24px; - /* since it already has a top padding of 24px, we don't need extra scroll margin */ + line-height: 1.3333333; + font-size: 1.5rem; + /* 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; - font-size: 20px; + line-height: 1.4; + font-size: 1.25rem; } .vp-doc h4 { - margin: 24px 0 0; + margin: 1.5rem 0 0; letter-spacing: -0.01em; - line-height: 24px; - font-size: 18px; + line-height: 1.3333333; + 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; - font-size: 32px; + line-height: 1.25; + 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; - line-height: 24px; + margin: 0.5rem 0; + 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; - border-radius: 8px; + margin: 0.5rem 0 !important; + 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; - padding: 3px 6px; + border-radius: 0.25rem; + 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; - margin: 16px 0; + border-radius: 0.5rem; + 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; - padding: 0 24px; - width: calc(100% + 2 * 24px); + margin: 0 -1.5rem; + padding: 0 1.5rem; + 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; - padding: 0 24px; - width: calc(100% + 2 * 24px); + margin: 0 -1.5rem; + padding: 0 1.5rem; + 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; - width: 32px; + padding-top: 1.25rem; + 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; - width: 40px; - height: 40px; + border-radius: 0.25rem; + width: 2.5rem; + 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; - padding: 0 10px; + border-radius: 0.25rem 0 0 0.25rem; + 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; - padding-left: 11px; + margin-left: 0.25rem; + 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; - mask-size: 11px 11px; + -webkit-mask-size: 0.6875rem 0.6875rem; + 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 { diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css index 79de6b73..fc437ef0 100644 --- a/src/client/theme-default/styles/components/vp-sponsor.css +++ b/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; - line-height: 24px; + letter-spacing: 0.0625rem !important; + 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; - font-size: 14px; + padding: 0.8125rem 0 0.6875rem; + font-size: 0.875rem; } .vp-sponsor.aside .vp-sponsor-tier { - padding: 9px 0 7px; - font-size: 12px; + padding: 0.5625rem 0 0.4375rem; + 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-height: 22px; + max-width: 4rem; + 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-height: 24px; + max-width: 6rem; + 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-height: 24px; + max-width: 6rem; + 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-height: 36px; + max-width: 7.5rem; + 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-height: 56px; + max-width: 12rem; + max-height: 3.5rem; } .vp-sponsor-grid[data-vp-grid='2'] .vp-sponsor-grid-item { - width: calc((100% - 4px) / 2); + width: calc((100% - 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 { diff --git a/src/client/theme-default/styles/docsearch.css b/src/client/theme-default/styles/docsearch.css index df9e8e64..f011a408 100644 --- a/src/client/theme-default/styles/docsearch.css +++ b/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; - height: 16px; + width: 1rem; + 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; - padding: 6px; + margin-top: -0.25rem; + 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 { diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css index fe13ebf5..7c618c88 100644 --- a/src/client/theme-default/styles/vars.css +++ b/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-code-font-size: 13px; + --vp-custom-block-font-size: 0.875rem; + --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); } diff --git a/src/node/plugin.ts b/src/node/plugin.ts index 00003729..0e652738 100644 --- a/src/node/plugin.ts +++ b/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(/\(min-width:\s*769px\)/g, '(min-width: 768px)') + .replaceAll( + /@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)') } } }, diff --git a/template/.vitepress/theme/style.css b/template/.vitepress/theme/style.css index f0339617..fc2972f1 100644 --- a/template/.vitepress/theme/style.css +++ b/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); }