UI redesign: SandBase-branded docs theme - #21
Merged
Merged
Conversation
Match the sandbase /docs reference design and copy the sandbase.ai main-site header and footer: - Adopt the SandBase palette (canvas/ink/violet-lime accent), Clash Grotesk typeface, hairline borders, near-square radii, and monospace uppercase micro-labels, all mapped onto VitePress core tokens. - Header: Clash Grotesk wordmark, ink nav links with accent hover, and a solid 'Start building' CTA button; add a Pricing link to the main site. - Footer: brand + tagline, Store/Solutions/Build/Learn columns, social row, and a bottom rule with copyright and service status (mirrors sandbase.ai). - Render code on the signature dark 'panel' surface in both appearances (pin syntax theme to github-dark) with a monospace language label. - Add pixel-square accent list bullets for prose.
The previous pass only restyled VitePress's own nav. Make the chrome a true replica of the main site instead: - Add SiteHeader.vue: exact port of sandbase-fe site-header (logo + wordmark, Explore and Solutions mega-menus, Agents/Docs/Pricing, GitHub, Sign in, Start building CTA, mobile drawer). Rendered fixed via the layout-top slot. - Add SiteFooter.vue: exact port of sandbase-fe site-footer (brand + tagline, Store/Solutions/Build/Learn columns, text socials, copyright, status) plus an inline colour-theme switch (the appearance toggle moved off the nav). - Hide the default .VPNav (kept mounted so its search hotkey and the mobile sidebar plumbing still work); content is already offset by --vp-nav-height, which the fixed header fills. VPLocalNav keeps the mobile docs sidebar. - Add --color-* aliases mapping to the --sb-* tokens so the ported main-site stylesheets apply verbatim. Render both in layout-top/layout-bottom. - Remove the now-unused ContactFooter.vue.
Moving the footer into the layout-bottom slot made it span the full width at the bottom of the layout, where the persistent fixed left sidebar covered its left (brand) column and made it look missing. From >=960px, inset the footer content past the sidebar so it aligns with the content column and is fully visible.
Instead of insetting the footer to the right of the fixed sidebar, keep it full-width (margin-inline: page-inset, like the main site) and raise its z-index above the desktop sidebar (25) so it paints edge-to-edge over the sidebar's lower portion at the bottom of the page. Stays below the mobile sidebar drawer/backdrop.
Bring the left docs sidebar in line with the sandbase /docs design: - Add a 'Search docs' button (with a magnifying-glass icon and a Cmd/Ctrl+K hint) at the top of the sidebar via the sidebar-nav-before slot. It fires Cmd/Ctrl+K, which VitePress's still-mounted local-search listener catches and opens the local search modal (teleported to <body>, so the hidden nav does not affect it). - Restyle sidebar links as the reference's vertical hairline rail: uppercase monospace group titles, a left hairline per link, an accent segment when active, and a stronger segment on hover — no pills or radius. Groups are separated by space rather than dividers.
Per the reference screenshot: - Sidebar links are plain text (ink-muted, ink on hover, ink + medium when active); remove the left hairline rail, the accent bar, pills, and radius. - Remove the divider between sidebar and content. - Search box is a filled, borderless, slightly-rounded box (surface-alt, 8px) rather than a bordered one.
Per the reference comparison: - Restore the single subtle vertical rail beside each menu link list (border on the .items container), with the active link showing an accent segment. - Remove all horizontal lines in the sidebar (no group dividers, no top/bottom borders) and the sidebar/content divider. - Search box uses the muted surface fill (not the brighter surface-alt).
The reference 'Search docs' control is a squared box with a subtle 1px border (border-line) on the surface fill, not a rounded borderless box. Restore the border + square corners; brighten the border on hover.
The reference docs sidebar shows always-expanded section labels with no collapse carets. Remove the collapsed property from the docs sidebar groups so VitePress renders them as static sections, matching the reference.
The horizontal lines between sidebar sections came from VitePress's scoped
'.group + .group { border-top }' rule (each top-level section is wrapped in a
.group div), not from the VPSidebarItem elements I had been overriding. Zero
that border so sections are separated by space only, matching the reference
(which has just the subtle vertical rail on links and no horizontal lines).
…utters - Remove the header bottom border, the 'On this page' aside left divider, and the footer top border (the reference has none of these lines). - Give the docs layout a fluid page-inset so the sidebar and the outline keep balanced left/right gutters at every width, instead of the sidebar sitting flush against the window edge with a large empty gutter on the right.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Restyles the docs UI to match the SandBase brand/reference design.
SiteHeaderandSiteFooterDocsSearch.vue)ContactFooter.vueFiles
.vitepress/theme/SiteHeader.vue,SiteFooter.vue,DocsSearch.vue(new).vitepress/theme/custom.css,index.ts,config.ts,sidebar.tspublic/ClashGrotesk-Variable.woff2(new).vitepress/theme/ContactFooter.vueTesting
Verified locally via the dev server (localhost:5199), e.g.
/docs/getting-started/first-call.