mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-27 09:19:53 +00:00
zooqueen
b605993234
The docs estate declared its typeface in 30 root layouts and one linked stylesheet, each pulling a third-party family off a hosted font CDN on the critical path of every route. Two of those surfaces also self-hosted the faces, so the same bytes were vendored by hand in the repo. @hanzo/font 1.8.8 is where Zen is authored. It is now mounted the way this repo already mounts every other package stylesheet — `@import '@hanzo/font/css'` at the top of the app's own sheet — which declares the @font-face rules and publishes --font-zen-sans / --font-zen-mono. A single :root block per app binds those to --font-sans / --font-mono, the pair every rule and every font-* utility already read, so the variable contract is untouched and the next face swap is two lines rather than a sweep. Genuine system fallbacks stay. Mounting through the sheet rather than a JS side-effect import also drops the untyped bare subpath TypeScript could not resolve, so no per-app declaration shim is needed. public/reference/ is static HTML with no bundler, so it keeps its own @font-face; scripts/sync-reference-fonts.ts copies the two variable faces out of the installed package on each build and the directory is ignored, the same rule public/openapi/ already follows. The hand-vendored faces are deleted. Also corrects the brand typography table, which still named a face Hanzo does not ship, and the three sample configs and two skill pages that repeated it.
141 lines
3.4 KiB
CSS
141 lines
3.4 KiB
CSS
/**
|
|
* Proposals Documentation Theme
|
|
* Base styles for improvement proposals sites (LPs, HIPs, ZIPs)
|
|
*/
|
|
|
|
@import '@hanzo/font/css';
|
|
@import "tailwindcss";
|
|
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* Zen is the family. The import above declares the faces and publishes
|
|
--font-zen-sans / --font-zen-mono; they are spelled HERE and nowhere else,
|
|
bound to the --font-sans / --font-mono pair every rule and every font-*
|
|
utility already reads. This theme is `inline`, so the values land in the
|
|
utilities directly and a later :root would not reach them — bind in place. */
|
|
@theme inline {
|
|
--font-sans: var(--font-zen-sans), ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: var(--font-zen-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
/* Search dialog animations */
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes zoom-in-95 {
|
|
from { transform: translate(-50%, 0) scale(0.95); }
|
|
to { transform: translate(-50%, 0) scale(1); }
|
|
}
|
|
|
|
.animate-in {
|
|
animation: fade-in 0.15s ease-out, zoom-in-95 0.15s ease-out;
|
|
}
|
|
|
|
.fade-in-0 {
|
|
animation: fade-in 0.15s ease-out;
|
|
}
|
|
|
|
.zoom-in-95 {
|
|
animation: zoom-in-95 0.15s ease-out;
|
|
}
|
|
|
|
/* Typography improvements */
|
|
main article h1 {
|
|
font-size: 2.25rem !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: -0.03em !important;
|
|
line-height: 1.15 !important;
|
|
margin-bottom: 1.25rem !important;
|
|
}
|
|
|
|
main article h2 {
|
|
font-size: 1.625rem !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: -0.025em !important;
|
|
line-height: 1.25 !important;
|
|
margin-top: 3rem !important;
|
|
margin-bottom: 1rem !important;
|
|
padding-bottom: 0.75rem !important;
|
|
border-bottom: 1px solid hsl(var(--fd-border) / 0.4) !important;
|
|
}
|
|
|
|
main article h3 {
|
|
font-size: 1.25rem !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: -0.02em !important;
|
|
margin-top: 2.25rem !important;
|
|
margin-bottom: 0.75rem !important;
|
|
}
|
|
|
|
main article p {
|
|
line-height: 1.8 !important;
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
|
|
main article ul,
|
|
main article ol {
|
|
margin-bottom: 1.5rem !important;
|
|
padding-left: 1.75rem !important;
|
|
}
|
|
|
|
main article li {
|
|
line-height: 1.75 !important;
|
|
margin-bottom: 0.625rem !important;
|
|
}
|
|
|
|
/* Code blocks */
|
|
main article pre {
|
|
border-radius: 0.75rem !important;
|
|
padding: 1.25rem 1.5rem !important;
|
|
margin: 1.75rem 0 !important;
|
|
font-size: 0.875rem !important;
|
|
line-height: 1.65 !important;
|
|
overflow-x: auto !important;
|
|
}
|
|
|
|
main article :not(pre) > code {
|
|
font-size: 0.875em !important;
|
|
padding: 0.2em 0.45em !important;
|
|
border-radius: 0.375rem !important;
|
|
background: hsl(var(--fd-muted)) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* Tables */
|
|
main article table {
|
|
width: 100% !important;
|
|
margin: 2rem 0 !important;
|
|
border-collapse: collapse !important;
|
|
font-size: 0.9rem !important;
|
|
}
|
|
|
|
main article th,
|
|
main article td {
|
|
padding: 0.875rem 1.125rem !important;
|
|
border: 1px solid hsl(var(--fd-border) / 0.6) !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
main article th {
|
|
background: hsl(var(--fd-muted) / 0.4) !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* Blockquotes */
|
|
main article blockquote {
|
|
border-left: 3px solid hsl(var(--fd-primary) / 0.3) !important;
|
|
padding: 0.75rem 1.5rem !important;
|
|
margin: 1.75rem 0 !important;
|
|
background: hsl(var(--fd-muted) / 0.3) !important;
|
|
border-radius: 0 0.5rem 0.5rem 0 !important;
|
|
}
|
|
|
|
main article blockquote p {
|
|
margin-bottom: 0 !important;
|
|
}
|