diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 02cbcfc..c3e5e7d 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -16,7 +16,7 @@ --vp-code-tab-hover-text-color: #f3f5ff; --vp-code-tab-active-text-color: #f3f5ff; --vp-nav-height: 72px; - --vp-layout-top-height: 32px; + --vp-layout-top-height: 0px; } .dark { @@ -38,28 +38,60 @@ body { letter-spacing: -0.008em; } -.triplex-prerelease { - position: fixed; - top: 0; - left: 0; - z-index: var(--vp-z-index-layout-top); - box-sizing: border-box; +.worldvm-incubation { width: 100%; - height: var(--vp-layout-top-height); - border-bottom: 1px solid color-mix(in srgb, var(--vp-c-warning-1) 28%, var(--vp-c-divider)); - background: color-mix(in srgb, #eab308 15%, var(--vp-c-bg)); - color: var(--vp-c-text-1); - padding: 7px 16px; - overflow: hidden; + padding: 10px 16px; + border-bottom: 1px solid #e7e5e4; + background: #f5f5f4; + color: #44403c; + font-family: + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + sans-serif; font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: normal; text-align: center; - text-overflow: ellipsis; - white-space: nowrap; } -.triplex-prerelease a { - color: var(--vp-c-warning-1); +.worldvm-incubation p { + margin: 0; +} + +.worldvm-incubation a { + color: inherit; font-weight: 600; + text-decoration: underline; + text-underline-offset: 3px; +} + +.worldvm-incubation a:focus-visible { + outline: 2px solid currentColor; + outline-offset: 3px; +} + +/* Let the homepage banner scroll away without overlapping the navigation. */ +.triplex-index .VPNav { + position: sticky; + top: 0; +} + +.triplex-index .VPNavBar .content-body { + margin-right: 0; + padding-right: 0; +} + +.triplex-index .VPContent { + padding-top: 0; +} + +/* The mobile menu fills the viewport beneath its navigation controls. */ +.triplex-index .VPNav:has(.screen-open) { + position: fixed; } .VPNavBar { diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index e50490d..e22329e 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,8 +1,8 @@ import "@fontsource-variable/ibm-plex-sans"; import "@fontsource/ibm-plex-mono/400.css"; -import type { Theme } from "vitepress"; +import { type Theme, useData } from "vitepress"; import DefaultTheme from "vitepress/theme-without-fonts"; -import { h } from "vue"; +import { defineComponent, h } from "vue"; import "./custom.css"; import Playground from "./Playground.vue"; @@ -10,14 +10,24 @@ import TriplexExplorer from "./TriplexExplorer.vue"; export default { extends: DefaultTheme, - Layout: () => - h(DefaultTheme.Layout, null, { - "layout-top": () => - h("div", { class: "triplex-prerelease", role: "status" }, [ - "Pre-1.0 · seven public packages available on npm · ", - h("a", { href: "/current-state" }, "current state"), - ]), - }), + Layout: defineComponent({ + setup() { + const { frontmatter } = useData(); + return () => + h(DefaultTheme.Layout, null, { + "layout-top": () => + frontmatter.value.pageClass === "triplex-index" + ? h("div", { class: "worldvm-incubation" }, [ + h("p", null, [ + "Triplex is an incubation project within ", + h("a", { href: "https://worldvm.com/" }, "WorldVM"), + ".", + ]), + ]) + : null, + }); + }, + }), enhanceApp({ app }) { app.component("TriplexPlayground", Playground); app.component("TriplexExplorer", TriplexExplorer); diff --git a/e2e/docs-home.spec.ts-snapshots/home-dark.png b/e2e/docs-home.spec.ts-snapshots/home-dark.png index 13f40a3..40117e5 100644 Binary files a/e2e/docs-home.spec.ts-snapshots/home-dark.png and b/e2e/docs-home.spec.ts-snapshots/home-dark.png differ diff --git a/e2e/docs-home.spec.ts-snapshots/home-light.png b/e2e/docs-home.spec.ts-snapshots/home-light.png index 8ef3c88..c937857 100644 Binary files a/e2e/docs-home.spec.ts-snapshots/home-light.png and b/e2e/docs-home.spec.ts-snapshots/home-light.png differ