From 7231c123c8057b040c96a47a702de7881a76f5c8 Mon Sep 17 00:00:00 2001 From: testtest126 <44771568+testtest126@users.noreply.github.com> Date: Sun, 12 Jul 2026 22:52:01 +0200 Subject: [PATCH] Docs: knit the explainer pages into one "How MateMate Works" site (#174) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Borrow the information architecture of Google's "How Search Works" to tie the public GitHub Pages explainers together into one small site with plain-language, question-based entry points and a light shared top-nav. - Add docs/index.html: a "How MateMate Works" hub / front door with two question-based entry cards — "What is MateMate?" (architecture) and "How was it built?" (the fleet) — plus an at-a-glance strip. Overview → deep-dive progressive disclosure, consistent modular cards. - Add the shared cross-page top-nav (brand → hub; Overview / What is it? / How it was built?) to docs/architecture/index.html (nav-only) and to docs/the-fleet/index.html — the latter themed with that page's own design tokens so it adapts across its light/dark and lineage skins. The fleet page itself ("How the Agents Talked") is the existing one published in #160; this only adds the shared nav to it (+36 lines, no content changes), so all three pages become one navigable site. All pages stay single self-contained HTML files (no external fonts/scripts/ assets), theme-aware, reduced-motion aware, and PII-clean. Verified rendering, cross-page links, skin adaptation, and light/dark + mobile in a local preview. Closes #174 Co-Authored-By: Claude Opus 4.8 --- docs/architecture/index.html | 35 ++++-- docs/index.html | 200 +++++++++++++++++++++++++++++++++++ docs/the-fleet/index.html | 36 +++++++ 3 files changed, 260 insertions(+), 11 deletions(-) create mode 100644 docs/index.html diff --git a/docs/architecture/index.html b/docs/architecture/index.html index ce0c7c4..461f6bd 100644 --- a/docs/architecture/index.html +++ b/docs/architecture/index.html @@ -61,13 +61,19 @@ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} -/* ---------- nav ---------- */ +/* ---------- shared cross-page nav ---------- */ nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)} -nav .wrap{display:flex;align-items:baseline;gap:22px;padding-top:11px;padding-bottom:11px;overflow-x:auto} -nav .brand{font-family:var(--serif);font-weight:700;font-size:16px;white-space:nowrap;color:var(--ink);text-decoration:none} +nav .wrap{display:flex;align-items:center;gap:8px 16px;padding-top:10px;padding-bottom:10px;overflow-x:auto} +nav .brand{font-family:var(--serif);font-weight:700;font-size:16px;white-space:nowrap;color:var(--ink);text-decoration:none;flex:none} nav .brand .kn{color:var(--accent)} -nav a.sec{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;text-decoration:none; +nav .sitenav{display:flex;gap:6px;flex:none} +nav a.site{font-family:var(--sans);font-size:12.5px;letter-spacing:.01em;text-decoration:none; + color:var(--ink-soft);white-space:nowrap;padding:5px 11px;border-radius:99px;border:1px solid transparent} +nav a.site:hover{color:var(--accent);border-color:var(--line)} +nav a.site[aria-current="page"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:600} +nav .secs{display:flex;gap:16px;margin-left:auto;flex:none;padding-left:8px} +nav a.sec{font-family:var(--sans);font-size:12px;letter-spacing:.03em;text-decoration:none; color:var(--ink-soft);white-space:nowrap} nav a.sec:hover{color:var(--accent)} @@ -268,14 +274,21 @@ } -