From fdcb648611d7d0425cc90783b0b8c92a33dca099 Mon Sep 17 00:00:00 2001 From: Akash Goenka Date: Tue, 11 Aug 2026 00:19:11 +0530 Subject: [PATCH] site: split docs into 4 pages, fix nav consistency, add notebook mock MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Addresses a friend's review pass on the marketing site: - Split the single /docs/ page (25k px, everything on one page) into /docs/ (getting started), /docs/navigation/, /docs/notebook/, and /docs/under-the-hood/, each with its own collapsed-by-default sidebar (nextjs.org-style) instead of one long list of every anchor at once. /how-it-works/* stays as-is and is cross-linked from each new page — it's genuinely different narrative content, not a duplicate. - Content trimmed nextjs-style: long paragraphs cut to 1-2 sentences, edge cases moved into flag-row tables; README/GitHub stays the source of truth for exhaustive detail. - Single accent color (frost) everywhere; removed the ember "warm" variant on command names/callouts and the arbitrary "hot" highlight tier on the supported-languages chips, both of which read as noise rather than signal. - De-boxed flag/callout UI (lighter borders, no nested boxes). - Fixed docs.css's nav rules drifting from landing.css (60px vs 64px height, different gap/z-index/mobile offsets) — the header was visibly resizing when navigating between the landing page and docs. - Fixed the docs sidebar's active group header picking up the same boxed/active styling as its active sub-link (both matched the global `.side a.active` rule), producing two stacked highlight boxes. - Reverted the npm nav link from an SVG icon back to plain text. - Terminal command blocks: fixed sibling `` lines collapsing onto one row (missing `display: block`). - Added a hand-built (not screenshotted) HTML/CSS recreation of the notebook's `kb view` UI to /how-it-works/notebook/, grounding the loop explanation in what a real note looks like. - Landing hero copy tightened; new /vs/vector-rag/ comparison page. Verified via production build + chrome-devtools screenshots (desktop and mobile) on all touched pages. Also fixed .gitignore: an unanchored `docs/` pattern meant for the repo-root internal-docs folder was silently matching and excluding site-astro/src/pages/docs/ from git entirely. Anchored it to `/docs/`. Co-Authored-By: Claude Sonnet 5 --- .gitignore | 2 +- site-astro/src/components/DocsSidebar.astro | 68 ++++ site-astro/src/components/Nav.astro | 10 +- .../why-coldstart-makes-zero-llm-calls.md | 2 +- site-astro/src/pages/docs.astro | 343 +----------------- site-astro/src/pages/docs/navigation.astro | 156 ++++++++ site-astro/src/pages/docs/notebook.astro | 276 ++++++++++++++ .../src/pages/docs/under-the-hood.astro | 175 +++++++++ site-astro/src/pages/how-it-works/index.astro | 1 + .../src/pages/how-it-works/notebook.astro | 46 +++ site-astro/src/pages/index.astro | 59 ++- site-astro/src/pages/vs/vector-rag.astro | 312 ++++++++++++++++ site-astro/src/styles/docs.css | 53 ++- site-astro/src/styles/how.css | 56 ++- site-astro/src/styles/landing.css | 42 +-- 15 files changed, 1179 insertions(+), 422 deletions(-) create mode 100644 site-astro/src/components/DocsSidebar.astro create mode 100644 site-astro/src/pages/docs/navigation.astro create mode 100644 site-astro/src/pages/docs/notebook.astro create mode 100644 site-astro/src/pages/docs/under-the-hood.astro create mode 100644 site-astro/src/pages/vs/vector-rag.astro diff --git a/.gitignore b/.gitignore index 5f07a03..f1e160b 100644 --- a/.gitignore +++ b/.gitignore @@ -6,5 +6,5 @@ scripts/probe-output/ # Internal design/research docs — kept locally, not tracked -docs/ +/docs/ .coldstart/ diff --git a/site-astro/src/components/DocsSidebar.astro b/site-astro/src/components/DocsSidebar.astro new file mode 100644 index 0000000..b00f39e --- /dev/null +++ b/site-astro/src/components/DocsSidebar.astro @@ -0,0 +1,68 @@ +--- +interface Props { active: 'getting-started' | 'navigation' | 'notebook' | 'under-the-hood' } +const { active } = Astro.props; + +const groups = [ + { + id: 'getting-started', label: 'Getting started', href: '/docs/', + anchors: [ + { href: '#overview', label: 'Overview' }, + { href: '#install', label: 'Install & setup' }, + { href: '#flow', label: 'The intended flow' }, + ], + }, + { + id: 'navigation', label: 'Navigation', href: '/docs/navigation/', + anchors: [ + { href: '#find', label: 'find', code: true }, + { href: '#gs', label: 'gs', code: true }, + ], + }, + { + id: 'notebook', label: 'Notebook', href: '/docs/notebook/', + anchors: [ + { href: '#notebook', label: 'The notebook, in depth' }, + { href: '#kb-search', label: 'kb search', code: true }, + { href: '#kb-lookup', label: 'kb lookup', code: true }, + { href: '#kb-write', label: 'kb write', code: true }, + { href: '#kb-commit', label: 'kb commit', code: true }, + { href: '#kb-view', label: 'kb view', code: true }, + { href: '#kb-maint', label: 'kb status / lint / repair / render', code: true }, + { href: '#sharing', label: 'Sharing with a team' }, + ], + }, + { + id: 'under-the-hood', label: 'Under the hood', href: '/docs/under-the-hood/', + anchors: [ + { href: '#freshness', label: 'How the index stays fresh' }, + { href: '#lifecycle', label: 'Lifecycle commands' }, + { href: '#mcp', label: 'MCP tools' }, + { href: '#semantics', label: 'Bring your own semantics' }, + { href: '#languages', label: 'Supported languages' }, + ], + }, +]; +--- + + diff --git a/site-astro/src/components/Nav.astro b/site-astro/src/components/Nav.astro index 57dd83e..f0ea25c 100644 --- a/site-astro/src/components/Nav.astro +++ b/site-astro/src/components/Nav.astro @@ -1,7 +1,6 @@ --- interface Props { variant?: 'home' | 'docs' | 'blog' | 'how' } const { variant = 'docs' } = Astro.props; -const installHref = variant === 'home' ? '#install' : '/#install'; ---
+ + + diff --git a/site-astro/src/pages/docs/notebook.astro b/site-astro/src/pages/docs/notebook.astro new file mode 100644 index 0000000..4b8865f --- /dev/null +++ b/site-astro/src/pages/docs/notebook.astro @@ -0,0 +1,276 @@ +--- +import Head from '../../layouts/Head.astro'; +import SvgDefs from '../../components/SvgDefs.astro'; +import Nav from '../../components/Nav.astro'; +import Footer from '../../components/Footer.astro'; +import DocsSidebar from '../../components/DocsSidebar.astro'; +import '../../styles/tailwind.css'; +import '../../styles/docs.css'; +import '../../styles/backdrop.css'; + +const techArticleJsonLd = { + '@context': 'https://schema.org', + '@type': 'TechArticle', + headline: 'The kb notebook — coldstart reference | coldstart', + description: 'Reference for coldstart\'s kb command family: search, lookup, write, commit, view, and sharing a notebook with a team.', + url: 'https://coldstartmcp.dev/docs/notebook/', + author: { '@type': 'Person', name: 'Akash Goenka' }, + publisher: { + '@type': 'Organization', + name: 'coldstart' + }, + about: 'Notebook and memory for AI coding agents', + proficiencyLevel: 'Beginner' +}; +--- + + + + + + diff --git a/site-astro/src/pages/docs/under-the-hood.astro b/site-astro/src/pages/docs/under-the-hood.astro new file mode 100644 index 0000000..cfce227 --- /dev/null +++ b/site-astro/src/pages/docs/under-the-hood.astro @@ -0,0 +1,175 @@ +--- +import Head from '../../layouts/Head.astro'; +import SvgDefs from '../../components/SvgDefs.astro'; +import Nav from '../../components/Nav.astro'; +import Footer from '../../components/Footer.astro'; +import DocsSidebar from '../../components/DocsSidebar.astro'; +import '../../styles/tailwind.css'; +import '../../styles/docs.css'; +import '../../styles/backdrop.css'; + +const techArticleJsonLd = { + '@context': 'https://schema.org', + '@type': 'TechArticle', + headline: 'Under the hood — index freshness & MCP tools | coldstart', + description: 'How coldstart\'s index stays fresh, lifecycle commands, MCP tool exposure, bring-your-own-semantics, and the supported-language set.', + url: 'https://coldstartmcp.dev/docs/under-the-hood/', + author: { '@type': 'Person', name: 'Akash Goenka' }, + publisher: { + '@type': 'Organization', + name: 'coldstart' + }, + about: 'Codebase memory for AI coding agents', + proficiencyLevel: 'Beginner' +}; +--- + + + + + + diff --git a/site-astro/src/pages/how-it-works/index.astro b/site-astro/src/pages/how-it-works/index.astro index faa1f2f..f594a39 100644 --- a/site-astro/src/pages/how-it-works/index.astro +++ b/site-astro/src/pages/how-it-works/index.astro @@ -203,6 +203,7 @@ const jsonLd = {
Read the docs + coldstart vs vector RAG → Engineering blog →
diff --git a/site-astro/src/pages/how-it-works/notebook.astro b/site-astro/src/pages/how-it-works/notebook.astro index d7cf94d..487fdaa 100644 --- a/site-astro/src/pages/how-it-works/notebook.astro +++ b/site-astro/src/pages/how-it-works/notebook.astro @@ -59,6 +59,52 @@ const jsonLd = { + +
+
+
+
+
Coldstart Notebookcoldstart
+
+ 80 notes + 7 links + + 50% fresh +
+
+
+
+
Search title, alias, path, symbol…
+
raw-log.ts
+
repair.ts
+
search.ts
+
tools.ts
+
cli.ts
+
index-manager.ts
+
+
+
FILE · SINGLE
+

src/server/tools.ts

+
fresh 1 anchor · 2 edits
+
+
anchors — verified code addresses
+
+ src/server/tools.ts + fresh +
+
handleGetStructurefindFileByPath
+
+
note
+

handleGetStructure builds the gs symbol page for one file. Uses findFileByPath + to look up the file: returns [fileId, IndexedFile] if found, null if not indexed — + distinguishing "not in index" from "indexed but zero symbols."

+
+
+
coldstart's own notebook — one note, opened with kb view.
+
+
+
+
diff --git a/site-astro/src/pages/index.astro b/site-astro/src/pages/index.astro index 50caad4..1dcab1f 100644 --- a/site-astro/src/pages/index.astro +++ b/site-astro/src/pages/index.astro @@ -85,19 +85,28 @@ const faqJsonLd = {
- -
- - -
-
-
-
Get started
-

Two commands to warm the repo.

-

Works best with Claude Code, Codex, and Cursor — all get the fast CLI path and the notebook capture/recall hooks, wired automatically by init.

-
-
-
your-project
-
-$ npm install -g @cstart/coldstart -$ cd your-project - -$ coldstart init # coldstart.md + client wiring + notebook + hooks - -✓ index warming in the background — your first lookup is instant. +
+
+ + + + + +
+

20+ languages via Tree-sitter — TypeScript, Python, Go, Rust, Java, Ruby, PHP, C#, C++, and more.

-
- Read the docs → - Read the blog - GitHub - npm -
-

20+ languages via Tree-sitter — TypeScript, Python, Go, Rust, Java, Ruby, PHP, C#, C++, and more.

diff --git a/site-astro/src/pages/vs/vector-rag.astro b/site-astro/src/pages/vs/vector-rag.astro new file mode 100644 index 0000000..5840f3e --- /dev/null +++ b/site-astro/src/pages/vs/vector-rag.astro @@ -0,0 +1,312 @@ +--- +import Head from '../../layouts/Head.astro'; +import SvgDefs from '../../components/SvgDefs.astro'; +import Nav from '../../components/Nav.astro'; +import Footer from '../../components/Footer.astro'; +import '../../styles/tailwind.css'; +import '../../styles/docs.css'; +import '../../styles/how.css'; +import '../../styles/backdrop.css'; + +const title = 'coldstart vs vector RAG for codebase memory | coldstart'; +const description = + 'Code already has ground truth — imports, symbol definitions, a call graph. RAG approximates that structure with embeddings and a similarity score. Here is what that approximation costs, and where it still wins.'; + +const jsonLd = { + '@context': 'https://schema.org', + '@type': 'TechArticle', + headline: 'coldstart vs vector RAG for codebase memory', + description, + url: 'https://coldstartmcp.dev/vs/vector-rag/', + author: { '@type': 'Person', name: 'Akash Goenka' }, + publisher: { '@type': 'Organization', name: 'coldstart' }, + about: 'Codebase memory for AI coding agents', + proficiencyLevel: 'Beginner', +}; +--- + + + + + + diff --git a/site-astro/src/styles/docs.css b/site-astro/src/styles/docs.css index e1995c5..959f35f 100644 --- a/site-astro/src/styles/docs.css +++ b/site-astro/src/styles/docs.css @@ -57,46 +57,42 @@ code { font-family: var(--mono); } /* ---- NAV (shared chrome — same max-width/padding as landing.css so the bar doesn't visibly resize between home, docs, and blog) ---- */ nav { - position: sticky; top: 0; z-index: 30; - background: color-mix(in srgb, var(--bg) 80%, transparent); - backdrop-filter: blur(10px); + position: sticky; top: 0; z-index: 50; + background: color-mix(in srgb, var(--bg) 78%, transparent); + backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } -.nav-in { display: flex; align-items: center; gap: 20px; height: 60px; max-width: 1120px; margin: 0 auto; padding: 0 28px; } +.nav-in { display: flex; align-items: center; gap: 28px; height: 64px; max-width: 1120px; margin: 0 auto; padding: 0 28px; } .brand { font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } -.brand .dot { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ember-bright), var(--frost)); box-shadow: 0 0 10px color-mix(in srgb, var(--frost) 50%, transparent); } +.brand .dot { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--ember), var(--frost)); box-shadow: 0 0 12px color-mix(in srgb, var(--frost) 60%, transparent); } .brand .mark { flex: none; } .mark { fill: none; } .fl { stroke-width: 2.1; stroke-linecap: round; } .s2 .fl { stroke: url(#warm); } .core { stroke: none; } .nav-spacer { flex: 1; } -.nav-links { display: flex; gap: 22px; font-size: 14px; } +.nav-links { display: flex; gap: 26px; font-size: 14px; } .nav-links a { position: relative; padding-bottom: 4px; color: var(--muted); text-decoration: none; transition: color .15s; } .nav-links a:hover { color: var(--ink); } .nav-links a.active { color: var(--frost); } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 1px; background: var(--frost); } -.nav-cta { font-family: var(--mono); font-size: 13.5px; text-decoration: none; padding: 9px 18px; border-radius: 6px; background: var(--frost); color: #04121a; font-weight: 600; transition: opacity .15s; } -.nav-cta:hover { opacity: .88; } .nav-burger { display: none; flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; } .nav-burger span { display: block; width: 15px; height: 1.5px; background: var(--ink); border-radius: 2px; } .nav-burger span + span { margin-top: 3px; } .nav-mobile { - display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px; - position: fixed; top: 60px; left: 0; right: 0; z-index: 29; - max-height: calc(100vh - 60px); overflow-y: auto; + display: none; flex-direction: column; gap: 2px; padding: 10px 28px 16px; + position: fixed; top: 64px; left: 0; right: 0; z-index: 49; + max-height: calc(100vh - 64px); overflow-y: auto; background: color-mix(in srgb, var(--bg) 96%, transparent); - backdrop-filter: blur(10px); + backdrop-filter: blur(12px); border-top: 1px solid var(--line); } .nav-mobile.open { display: flex; } .nav-mobile a { font-family: var(--mono); font-size: 14.5px; color: var(--muted); text-decoration: none; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .nav-mobile a:last-child { border-bottom: 0; } .nav-mobile a:hover { color: var(--ink); } -.nav-mobile .nav-cta { display: inline-block; margin-top: 8px; text-align: center; color: #04121a; } -.nav-mobile .nav-cta:hover { color: #04121a; } @media (max-width: 860px) { - .nav-links, .nav-in .nav-cta { display: none; } + .nav-links { display: none; } .nav-burger { display: flex; } } @@ -110,13 +106,13 @@ nav { .term-bar .tl:nth-child(1) { background: #ff5f57; } .term-bar .tl:nth-child(2) { background: #febc2e; } .term-bar .tl:nth-child(3) { background: #28c840; } -.term-bar .title { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: #5d6b83; } +.term-bar .title { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: #7a8aa3; } .term-body { padding: 20px 22px 26px; font-family: var(--mono); font-size: 13.5px; line-height: 1.75; color: var(--term-ink); overflow-x: auto; } -.term-body .ln { white-space: pre; } +.term-body .ln { white-space: pre; display: block; } .c-prompt { color: #4fd18b; } .c-cmd { color: #eef3fb; } .c-flag { color: #ffb267; } -.c-dim { color: #5d6b83; } +.c-dim { color: #7a8aa3; } .c-frost { color: #6fd3ef; } .c-ember { color: #ffb267; } .c-file { color: #c3d0e2; } @@ -134,7 +130,6 @@ nav { /* ---- LANGS ---- */ .langs { display: flex; flex-wrap: wrap; gap: 9px; } .chip { font-family: var(--mono); font-size: 12.5px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-2); } -.chip.hot { color: var(--frost); border-color: color-mix(in srgb, var(--frost) 40%, var(--line)); } .doc-sec .langs { margin-top: 20px; gap: 8px; } /* ---- pills (freshness) ---- */ @@ -165,7 +160,8 @@ nav { /* ---- FRESHNESS / feature cards ---- */ .fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 820px) { .fgrid { grid-template-columns: 1fr; } } -.fcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--surface); } +.fcard { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--surface); text-decoration: none; transition: border-color .15s, transform .15s; } +a.fcard:hover { border-color: color-mix(in srgb, var(--frost) 45%, var(--line)); transform: translateY(-2px); } .fcard .fnum { font-family: var(--mono); font-size: 12px; color: var(--frost); letter-spacing: .1em; } .fcard h4 { font-family: var(--mono); font-size: 16px; margin: 10px 0 8px; letter-spacing: -.01em; } .fcard p { font-size: 14.5px; color: var(--muted); } @@ -198,7 +194,7 @@ footer { border-top: 1px solid var(--line); padding: 48px 0; } .docs { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 236px 1fr; gap: 56px; align-items: start; } @media (max-width: 860px) { .docs { grid-template-columns: 1fr; gap: 0; } } -.side { position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); overflow-y: auto; padding: 34px 0 60px; } +.side { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; padding: 34px 0 60px; } @media (max-width: 860px) { .side { position: static; max-height: none; border-bottom: 1px solid var(--line); padding: 8px 0; } } .side-toggle { display: none; } @@ -231,6 +227,8 @@ footer { border-top: 1px solid var(--line); padding: 48px 0; } .content h1 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 5vw, 40px); letter-spacing: -.01em; line-height: 1.1; } .content h2 { font-family: var(--display); font-weight: 500; font-size: clamp(21px, 3vw, 26px); letter-spacing: -.01em; } .content > p, .doc-sec > p, .prose p { color: var(--muted); font-size: 16px; margin-top: 14px; } +.content p a, .doc-sec p a, .prose p a, .doc-sec li a { color: var(--frost); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--frost) 35%, transparent); text-underline-offset: 2px; } +.content p a:hover, .doc-sec p a:hover, .prose p a:hover, .doc-sec li a:hover { text-decoration-color: currentColor; } .prose p + p { margin-top: 12px; } .lead-p { font-size: 18px !important; color: var(--muted); margin-top: 18px; } .content b, .prose b { color: var(--ink); font-weight: 600; } @@ -240,25 +238,22 @@ p code, li code, .prose code { font-size: 13.5px; background: var(--surface-2); .cmd { margin-top: 8px; } .cmd .name { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .cmd .name .c { color: var(--frost); } -.cmd .name.warm .c { color: var(--ember); } .cmd .name .badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; align-self: center; } .cmd .sig { font-family: var(--mono); font-size: 14px; color: var(--muted); margin-top: 8px; } .cmd .desc { margin-top: 12px; color: var(--muted); font-size: 15.5px; } .cmd .desc b { color: var(--ink); } -.flags { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } -.flag-row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 14px; } -.flag-row:first-child { border-top: 0; } +.flags { margin-top: 18px; } +.flag-row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; } +.flag-row:first-child { border-top: 0; padding-top: 0; } .flag-row .fk { font-family: var(--mono); font-size: 12.5px; color: var(--frost); } .flag-row .fv { color: var(--muted); } .flag-row .fv b { color: var(--ink); } @media (max-width: 560px) { .flag-row { grid-template-columns: 1fr; gap: 4px; } } -.callout { margin-top: 20px; border: 1px solid var(--line); border-left: 3px solid var(--frost); background: var(--surface-2); border-radius: 8px; padding: 14px 18px; font-size: 14.5px; color: var(--muted); } -.callout.warm { border-left-color: var(--ember); } +.callout { margin-top: 20px; border-left: 2px solid var(--frost); padding: 2px 0 2px 16px; font-size: 14.5px; color: var(--muted); } .callout b { color: var(--ink); } .callout .ct { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--frost); display: block; margin-bottom: 6px; } -.callout.warm .ct { color: var(--ember); } .types { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 20px; } @media (max-width: 680px) { .types { grid-template-columns: 1fr; } } @@ -301,7 +296,7 @@ body.essay-page { --ink: #eef3fb; --prose: #c9d3e2; /* 12.8:1 — was #8b9ab2 at 6.9:1 */ --muted: #8b9ab2; - --faint: #6b7789; + --faint: #7a8aa3; --line: #1e2735; --line-soft: #182029; --frost: #4fbfe0; diff --git a/site-astro/src/styles/how.css b/site-astro/src/styles/how.css index a1c4e3a..b4c4e42 100644 --- a/site-astro/src/styles/how.css +++ b/site-astro/src/styles/how.css @@ -12,7 +12,7 @@ body.how-page { --paper: #e5d9bd; --paper-ink: #2a2620; --paper-line: #c7b790; - --faint: #5d6b83; + --faint: #7a8aa3; --ember-dim: #a86a35; } @@ -178,6 +178,60 @@ body.how-page { .how-aside h3 { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: -.01em; margin-bottom: 10px; } .how-aside p { color: var(--muted); font-size: 15.5px; } +/* ============================================================ + NOTEBOOK MOCK — a built (not screenshotted) recreation of `kb view` + ============================================================ */ +.nb-mock { margin: 0; } +.nb-mock figcaption { margin-top: 14px; font-size: 13.5px; color: var(--muted); text-align: center; } +.nb-mock figcaption code { color: var(--frost); } + +.nbm-top { + display: flex; align-items: center; justify-content: space-between; gap: 20px; + padding: 16px 22px; border: 1px solid var(--line); border-bottom: none; + border-radius: 14px 14px 0 0; background: var(--surface); +} +.nbm-brand { display: flex; flex-direction: column; gap: 2px; } +.nbm-kick { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } +.nbm-name { font-family: var(--display); font-size: 16px; display: flex; align-items: center; gap: 8px; } +.nbm-dot { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--ember), var(--frost)); } +.nbm-stats { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--muted); } +.nbm-stats b { color: var(--ink); font-size: 14px; } +.nbm-bar { width: 60px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; display: inline-block; } +.nbm-bar i { display: block; width: 50%; height: 100%; background: linear-gradient(90deg, var(--ok), var(--ember)); } +.nbm-fresh { color: var(--ink); } + +.nbm-body { + display: grid; grid-template-columns: 200px 1fr; + border: 1px solid var(--line); border-radius: 0 0 14px 14px; overflow: hidden; + box-shadow: 0 20px 60px -20px rgba(0,0,0,.5); +} +.nbm-side { background: var(--surface); border-right: 1px solid var(--line); padding: 14px 10px; } +.nbm-search { + font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; + padding: 7px 10px; margin-bottom: 12px; background: var(--surface-2); +} +.nbm-file { font-family: var(--mono); font-size: 12.5px; color: var(--muted); padding: 6px 10px; border-radius: 6px; } +.nbm-file.active { color: var(--frost); background: color-mix(in srgb, var(--frost) 10%, transparent); } + +.nbm-main { padding: 26px 30px 30px; background: var(--bg); } +.nbm-crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--frost); margin-bottom: 8px; } +.nbm-title { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 8px; } +.nbm-meta { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 22px; } +.nbm-pill { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 2px 9px; } +.nbm-anchors { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 22px; background: var(--surface-2); } +.nbm-anchor-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } +.nbm-anchor-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: 12px; } +.nbm-anchor-row code b { color: var(--frost); } +.nbm-syms { display: flex; gap: 8px; flex-wrap: wrap; } +.nbm-syms span { font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; } +.nbm-note-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } +.nbm-note { font-size: 14.5px; line-height: 1.65; color: var(--ink); max-width: 68ch; } + +@media (max-width: 640px) { + .nbm-side { display: none; } + .nbm-body { grid-template-columns: 1fr; } +} + /* ============================================================ SIGNATURE 2 — the temperature seam (navigation page) ============================================================ */ diff --git a/site-astro/src/styles/landing.css b/site-astro/src/styles/landing.css index 752d2a1..a2fe907 100644 --- a/site-astro/src/styles/landing.css +++ b/site-astro/src/styles/landing.css @@ -10,7 +10,7 @@ --warm-ground:#12100e; --text:#e7eef8; --muted:#8b9ab2; - --faint:#5d6b83; + --faint:#7a8aa3; --frost:#4fbfe0; --frost-dim:#2f89a8; --ember:#ef9448; @@ -67,9 +67,6 @@ nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px); .nav-links a:hover{color:var(--text);} .nav-links a.active{color:var(--frost);} .nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:1px;background:var(--frost);} -.nav-cta{font-family:var(--mono);font-size:13.5px;padding:9px 18px;border-radius:6px; - background:var(--frost);color:#04121a;font-weight:600;transition:opacity .15s;} -.nav-cta:hover{opacity:.88;} .nav-burger{display:none;flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:8px; background:transparent;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;} .nav-burger span{display:block;width:15px;height:1.5px;background:var(--text);border-radius:2px;} @@ -87,15 +84,13 @@ nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px); border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);} .nav-mobile a:last-child{border-bottom:0;} .nav-mobile a:hover{color:var(--text);} -.nav-mobile .nav-cta{display:inline-block;margin-top:8px;text-align:center;color:#04121a;} -.nav-mobile .nav-cta:hover{color:#04121a;} @media(max-width:820px){ - .nav-links,.nav-in .nav-cta{display:none;} + .nav-links{display:none;} .nav-burger{display:flex;} } /* ---------- shared section scaffold ---------- */ -section{padding:104px 0;position:relative;} +section{padding:76px 0;position:relative;} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--frost);margin-bottom:22px;} .eyebrow.warm{color:var(--ember);} @@ -111,15 +106,15 @@ h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,42px); .rise.in{opacity:1;transform:none;} /* ---------- HERO ---------- */ -.hero{padding:88px 0 72px;position:relative;overflow:hidden;text-align:center;} +.hero{padding:44px 0 64px;position:relative;overflow:hidden;text-align:center;} .hero::before{content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(70% 55% at 50% -10%,color-mix(in srgb,var(--frost) 13%,transparent),transparent 60%);} -.hero-in{max-width:760px;margin:0 auto;} +.hero-in{max-width:920px;margin:0 auto;} .kicker{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase; - color:var(--faint);margin-bottom:24px;} + color:var(--faint);margin-bottom:20px;} h1.title{font-family:var(--display);font-weight:500;margin:0 auto; - font-size:clamp(34px,5.4vw,58px);line-height:1.14;letter-spacing:-.01em;max-width:16ch;text-wrap:balance;} + font-size:clamp(28px,4.4vw,44px);line-height:1.2;letter-spacing:-.01em;max-width:36ch;} h1.title .cold{color:var(--frost);} .hero-sub{margin:26px auto 0;font-size:clamp(16px,2vw,18px);color:var(--muted);max-width:50ch;line-height:1.65;} .hero-sub b{color:var(--text);font-weight:500;} @@ -142,6 +137,8 @@ h1.title .cold{color:var(--frost);} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 30px -8px color-mix(in srgb,var(--frost) 55%,transparent);} .btn-ghost{color:var(--text);border:1px solid var(--line);} .btn-ghost:hover{border-color:var(--frost);} +.btn-icon{padding:12px 18px;color:var(--muted);} +.btn-icon:hover{color:var(--text);} .hero-note{font-family:var(--mono);font-size:12px;color:var(--faint);} /* ---------- TERMINAL ---------- */ @@ -152,7 +149,7 @@ h1.title .cold{color:var(--frost);} border-bottom:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.015);} .tl{width:11px;height:11px;border-radius:50%;} .tl:nth-child(1){background:#ff5f57;}.tl:nth-child(2){background:#febc2e;}.tl:nth-child(3){background:#28c840;} -.term-title{margin-left:10px;font-family:var(--mono);font-size:11.5px;color:#5d6b83;} +.term-title{margin-left:10px;font-family:var(--mono);font-size:11.5px;color:#7a8aa3;} .copy-btn{margin-left:auto;font-family:var(--mono);font-size:11px;color:#8aa0bd;cursor:pointer; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:6px; padding:4px 10px;transition:color .15s,background .15s,border-color .15s;} @@ -162,7 +159,7 @@ h1.title .cold{color:var(--frost);} color:#c3d0e2;overflow-x:auto;} .term-body .l{white-space:pre;display:block;} .p-prompt{color:#4fd18b;}.p-cmd{color:#eef3fb;}.p-flag{color:var(--ember);} -.p-dim{color:#5d6b83;}.p-frost{color:#6fd3ef;}.p-ember{color:#ffb267;} +.p-dim{color:#7a8aa3;}.p-frost{color:#6fd3ef;}.p-ember{color:#ffb267;} .p-hit{color:#4fd18b;}.p-file{color:#c3d0e2;} .term-body .gap{display:block;height:9px;} /* typing reveal */ @@ -175,11 +172,9 @@ h1.title .cold{color:var(--frost);} /* ---------- NAVIGATION SECTION (the index) ---------- */ .navsec{background:var(--ink-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .navsec > .wrap > .rise:first-child, -.phil > .wrap > .rise:first-child, -.install > .wrap > .rise:first-child{max-width:720px;margin-left:auto;margin-right:auto;text-align:center;} +.phil > .wrap > .rise:first-child{max-width:720px;margin-left:auto;margin-right:auto;text-align:center;} .navsec > .wrap > .rise:first-child .lead, -.phil > .wrap > .rise:first-child .lead, -.install > .wrap > .rise:first-child .lead{margin-left:auto;margin-right:auto;} +.phil > .wrap > .rise:first-child .lead{margin-left:auto;margin-right:auto;} /* hand-drawn comparison: wandering grep path vs. a straight two-hop find→gs path */ .flow-figure{margin-top:48px;} @@ -371,7 +366,7 @@ h1.title .cold{color:var(--frost);} .article-card p{margin-top:12px;color:var(--muted);font-size:14.5px;} /* ---------- FAQ ---------- */ -.faq{background:var(--ink-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} +.faq{background:var(--ink-1);border-top:1px solid var(--line);} .faq > .wrap > .rise:first-child{max-width:720px;margin-left:auto;margin-right:auto;text-align:center;} .faq > .wrap > .rise:first-child .lead{margin-left:auto;margin-right:auto;} .faq-list{display:flex;flex-direction:column;gap:0;margin-top:48px;max-width:720px;margin-left:auto;margin-right:auto;} @@ -389,10 +384,11 @@ h1.title .cold{color:var(--frost);} border:1px solid var(--line);border-radius:4px;padding:1px 5px;} @media(max-width:640px){.faq-item{padding:20px;}.faq-q{font-size:15.5px;}.faq-a{font-size:14px;}} -/* ---------- INSTALL ---------- */ -.install-term{max-width:760px;margin:44px auto 0;} -.install .cta{justify-content:center;margin-top:30px;} -.install-langs{margin-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--faint);} +/* ---------- INSTALL (in hero) / FAQ CLOSE ---------- */ +.install-term{max-width:760px;margin:36px auto 0;text-align:left;} +.faq-close{margin-top:52px;text-align:center;} +.faq-close-links{display:flex;gap:14px;justify-content:center;} +.install-langs{margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--faint);} /* ---------- FOOTER ---------- */ footer{border-top:1px solid var(--line);padding:50px 0;}