site/themes/zz-docs/static/docs/css/site.css
zzmq.dev@gmail.com/zz / site / themes / zz-docs / static / docs / css / site.css
@ 59cb1b7e
Download
Ladder Summary
- file The **site.css** file defines the entire visual style for the ZZ‑Docs documentation site: it sets a dark‑mode color palette with CSS custom properties, applies global resets, and styles the layout components (header, footer, sidebar, main content, hero sections, tables, code blocks, navigation links, and responsive grid behavior). All component styles are expressed purely with CSS selectors (e.g., `.site-header`, `.layout`, `.prose`, `factor`), so the file does not export any JavaScript functions or classes.
/* Same palette/tokens as the web app's WEB_CSS (app/worker/src/webApp.ts)
-- always dark, no light-mode variant, to match the product exactly
rather than drift into a separate "docs site" look. */
:root {
--bg: #1A0F2E; --panel: #241433; --surface: #2D1B4E; --border: #4A2F73; --muted: #B4A3D6; --fg: #F3EFFF;
--pink: #FF2E92; --cyan: #2EE6FF;
--code-bg: #140B24;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden], [hidden="true"] { display: none !important; }
html, body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--sans);
line-height: 1.6;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--pink); }
code, pre {
font-family: var(--mono);
background: var(--code-bg);
border-radius: 4px;
}
code { padding: 0.1em 0.35em; font-size: 0.9em; color: var(--cyan); }
pre { padding: 1rem; overflow-x: auto; border: 1px solid var(--border); }
pre code { padding: 0; background: none; color: var(--fg); }
table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
th, td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; font-size: 0.95em; }
th { background: var(--code-bg); color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.5rem;
background: var(--panel);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
}
.brand { font-weight: 800; font-size: 1.3rem; color: var(--pink); letter-spacing: -0.02em; }
.brand-dim { color: var(--muted); font-weight: 400; }
.topnav { display: flex; gap: 0; }
.topnav a { margin-left: 1.25rem; color: var(--muted); font-size: 0.92rem; }
.topnav a:hover { color: var(--pink); }
.site-footer {
border-top: 1px solid var(--border);
padding: 1.5rem;
color: var(--muted);
font-size: 0.85rem;
text-align: center;
}
.footer-links { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--pink); }
.site-footer p { margin: 0; }
.layout {
display: flex;
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1.5rem;
gap: 2.5rem;
align-items: flex-start;
}
.sidebar { flex: 0 0 200px; position: sticky; top: 1.5rem; }
.sidenav { display: flex; flex-direction: column; gap: 0.4rem; }
.navlink {
color: var(--muted);
font-size: 0.92rem;
padding: 0.25rem 0;
}
.navlink.active, .navlink:hover { color: var(--pink); }
.sidenav-archive { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.sidenav-archive .navlink { font-size: 0.85rem; }
.navgroup { color: var(--muted); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.content { flex: 1 1 auto; min-width: 0; }
.prose { max-width: 680px; }
.prose h1 { font-size: 1.8rem; margin-top: 0; color: var(--fg); }
.prose h2 { font-size: 1.3rem; margin-top: 2.2rem; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.prose h3 { font-size: 1.05rem; }
.heading-anchor {
display: inline-flex;
align-items: center;
margin-left: 0.5em;
color: var(--muted);
opacity: 0;
vertical-align: middle;
transition: opacity 0.1s ease;
}
.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.prose h4:hover .heading-anchor,
.prose h5:hover .heading-anchor,
.prose h6:hover .heading-anchor,
.heading-anchor:focus {
opacity: 1;
}
.heading-anchor:hover { color: var(--pink); }
.heading-anchor svg { display: block; }
.heading-anchor.copied::after {
content: "Copied!";
margin-left: 0.4em;
font-size: 0.75rem;
color: var(--muted);
}
.prose ul, .prose ol { padding-left: 1.3rem; }
.hero {
max-width: 760px;
margin: 0 auto;
padding: 4rem 1.5rem 3rem;
text-align: left;
}
.hero h1 { font-size: 2.6rem; margin-bottom: 0.5rem; letter-spacing: -0.02em; color: var(--fg); }
/* page-body is the home page's whole markdown body (tagline, nav-links,
factor blocks, closing line) rendered as one flow. It's a real CSS grid
so the factor elements (no wrapper div around them) land two-per-row by
plain grid auto-placement; every other child spans both columns so it
reads as full-width prose instead of getting caught in the grid. */
.page-body {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 1.75rem;
}
.page-body > p,
.page-body > nav-links {
grid-column: 1 / -1;
}
.page-body > p:first-child { color: var(--muted); font-size: 1.1rem; max-width: 560px; }
.page-body > p:last-child { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); }
nav-links ul {
list-style: none;
margin: 2.5rem 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.75rem;
}
nav-links li a {
display: block;
padding: 0.9rem 1.1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--fg);
font-size: 0.95rem;
}
nav-links li a:hover { border-color: var(--pink); text-decoration: none; }
factor {
display: block;
margin-top: 1.75rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.25rem 1.4rem;
}
factor h3 { font-size: 0.85rem; margin: 0 0 0.6rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
factor p { font-size: 0.9rem; color: var(--fg); margin: 0; line-height: 1.5; }
@media (max-width: 520px) {
.page-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.layout { flex-direction: column; }
.sidebar { position: static; width: 100%; }
.hero h1 { font-size: 2rem; }
}