From c93eca80afbf0b9faaa334e5d6cdd611dcfb1789 Mon Sep 17 00:00:00 2001 From: Orkuncakilkaya Date: Sat, 29 Aug 2026 18:22:55 +0300 Subject: [PATCH] docs(site): mobile-first revamp of all pages Rewrite both stylesheets mobile-first (base = phone; @media min-width progressively enhances) and add a responsive nav. - Hamburger menu on small screens: links collapse into a clean, uniform dropdown list (plain rows + separators, no out-of-place boxed buttons); full inline nav with boxed CTA returns at >=720px. Auto-wired for every page. - Fix horizontal-overflow root causes: min-width:0 on grid/flex code containers, pre/sig scroll internally, long names wrap (overflow-wrap). 0 page overflow on every page type at 375px. - Stack layouts on mobile: single-column hero/features/steps/index grid, column parameter cards, 2-col color swatches; multi-column returns on wider screens. Reduced hero/section padding; fluid clamp() headings. - Hover cards gated to hover-capable devices so a tap just navigates. - Desktop layout preserved (verified at 1280px: inline nav, 2-col hero, 3-col features, no regression). Verified in-browser at 375px and 1280px across landing, API index, item (method/keyword/annotation/phase), namespace overview, and color pages. Co-Authored-By: Claude Opus 4.8 --- tools/docgen/assets/index.tmpl.html | 1 + tools/docgen/assets/item.css | 173 ++++++++------ tools/docgen/assets/ludic-highlight.tmpl.js | 22 +- tools/docgen/assets/site.css | 249 ++++++++++---------- tools/docgen/gen.py | 1 + 5 files changed, 247 insertions(+), 199 deletions(-) diff --git a/tools/docgen/assets/index.tmpl.html b/tools/docgen/assets/index.tmpl.html index a56886cb..c28f7a60 100644 --- a/tools/docgen/assets/index.tmpl.html +++ b/tools/docgen/assets/index.tmpl.html @@ -19,6 +19,7 @@
%(brand)s + diff --git a/tools/docgen/assets/item.css b/tools/docgen/assets/item.css index 89f88d26..8da5f9ba 100644 --- a/tools/docgen/assets/item.css +++ b/tools/docgen/assets/item.css @@ -4,34 +4,40 @@ --mint:#7cf5c4; --coral:#ff5d73; --violet:#c792ea; --blue:#82aaff; --amber:#f6c177; --c-bg:#0b0f20; --c-comment:#5b6788; --c-key:#ff7eb6; --c-type:#7cf5c4; --c-str:#f6c177; --c-num:#a6b8ff; --c-annot:#c792ea; --c-fn:#82aaff; --c-punc:#9aa6cc; --c-arg:#f6c177; - --radius:14px; --max:900px; --hdr:64px; + --radius:14px; --max:900px; --hdr:60px; } *{box-sizing:border-box} - html{scroll-behavior:smooth} - body{margin:0;background: - radial-gradient(1100px 600px at 82% -8%, rgba(124,245,196,.07), transparent 60%), + html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} + body{margin:0;overflow-x:hidden;background: + radial-gradient(900px 500px at 82% -8%, rgba(124,245,196,.07), transparent 60%), var(--bg);color:var(--text); - font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased} + font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} code,pre,.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace} - .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} + .wrap{max-width:var(--max);margin:0 auto;padding:0 16px} + /* ---- nav (mobile-first: hamburger) ---- */ header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px); - background:rgba(10,13,24,.82);border-bottom:1px solid var(--line);height:var(--hdr)} - .nav-in{display:flex;align-items:center;gap:22px;height:var(--hdr)} - .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--head);font-size:18px} - .logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center; + background:rgba(10,13,24,.92);border-bottom:1px solid var(--line)} + .nav-in{display:flex;align-items:center;gap:12px;min-height:var(--hdr)} + .brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--head);font-size:17px} + .logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none; background:linear-gradient(135deg,var(--mint),#3fd7a6);color:#06231a;font-weight:700;font-size:15px} - .nav-links{display:flex;gap:22px;margin-left:auto;align-items:center} - .nav-links a{color:var(--muted);font-size:14.5px;font-weight:500} - .nav-links a:hover{color:var(--head)} - .nav-cta{border:1px solid var(--line2);padding:8px 15px;border-radius:9px;color:var(--head)!important;background:var(--panel)} - .nav-cta:hover{border-color:var(--mint)} - @media(max-width:760px){.nav-links a:not(.nav-cta){display:none}} + .nav-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center; + width:42px;height:42px;border-radius:10px;border:1px solid var(--line2);background:var(--panel); + color:var(--head);font-size:20px;cursor:pointer;line-height:1} + .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column; + background:rgba(10,13,24,.98);border-bottom:1px solid var(--line);padding:4px 16px 10px; + box-shadow:0 20px 40px -24px rgba(0,0,0,.8)} + header.nav.open .nav-links{display:flex} + .nav-links a{color:var(--text);font-size:16px;font-weight:500;padding:14px 4px;border-top:1px solid var(--line)} + .nav-links a:first-child{border-top:none} + .nav-links a:active{color:var(--mint)} + .nav-links .nav-cta{background:none;text-align:left;color:var(--text)!important} /* code token colors + snippet links */ - pre{margin:12px 0 0;padding:16px 18px;overflow:auto;font-size:13.5px;line-height:1.72;tab-size:2; - background:var(--c-bg);border:1px solid var(--line);border-radius:12px} + pre{margin:12px 0 0;padding:14px;overflow:auto;-webkit-overflow-scrolling:touch;font-size:12.5px;line-height:1.7;tab-size:2; + max-width:100%;background:var(--c-bg);border:1px solid var(--line);border-radius:12px} pre::-webkit-scrollbar{height:8px} pre::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px} .t-com{color:var(--c-comment);font-style:italic} @@ -42,14 +48,14 @@ a.tok:hover{background:rgba(124,245,196,.15);outline:1px solid rgba(124,245,196,.4)} /* ---- item page ---- */ - main.item{padding:30px 24px 90px;max-width:var(--max)} - .crumbs{font-size:13px;color:var(--muted);margin-bottom:20px} - .crumbs a:hover{color:var(--mint)} + main.item{padding:22px 16px 72px;max-width:var(--max);margin:0 auto} + .crumbs{font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.7} + .crumbs a:active,.crumbs a:hover{color:var(--mint)} .crumbs span{opacity:.6;margin:0 2px} .crumbs .here{color:var(--text);opacity:1} - .item-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;scroll-margin-top:calc(var(--hdr) + 20px)} - .item-head h1{margin:0;font-size:clamp(26px,4vw,38px);color:var(--head);letter-spacing:-.5px; - font-family:"JetBrains Mono",monospace;font-weight:700} + .item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;scroll-margin-top:calc(var(--hdr) + 16px)} + .item-head h1{margin:0;font-size:clamp(24px,7vw,38px);color:var(--head);letter-spacing:-.5px; + font-family:"JetBrains Mono",monospace;font-weight:700;overflow-wrap:anywhere;min-width:0} .kind-badge{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase; padding:4px 9px;border-radius:7px;border:1px solid var(--line2);color:var(--muted);background:var(--panel)} .kind-keyword{color:var(--c-key);border-color:rgba(255,126,182,.4)} @@ -59,76 +65,77 @@ .kind-annotation{color:var(--c-annot);border-color:rgba(199,146,234,.4)} .kind-namespace{color:var(--amber);border-color:rgba(246,193,119,.4)} .kind-operator{color:var(--muted)} - .sig{display:inline-block;margin:18px 0 4px;color:var(--c-fn);background:var(--c-bg); - border:1px solid var(--line);border-radius:9px;padding:9px 13px;font-size:14px} + .sig{display:block;margin:16px 0 4px;color:var(--c-fn);background:var(--c-bg); + border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13.5px; + overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} .desc{margin-top:14px} - .desc p{margin:0 0 12px;font-size:16px;color:var(--text);max-width:720px} - .desc code{color:var(--amber);background:var(--panel);padding:1px 5px;border-radius:5px;font-size:13px} + .desc p{margin:0 0 12px;font-size:15.5px;color:var(--text);max-width:720px} + .desc code{color:var(--amber);background:var(--panel);padding:1px 5px;border-radius:5px;font-size:13px;overflow-wrap:anywhere} .desc b{color:var(--head)} - .params,.examples,.related{margin-top:30px} - .params h2,.examples h2,.related h2{font-size:15px;text-transform:uppercase;letter-spacing:1.5px; + .params,.examples,.related{margin-top:28px} + .params h2,.examples h2,.related h2{font-size:14px;text-transform:uppercase;letter-spacing:1.5px; color:var(--muted);font-weight:600;margin:0 0 12px} - .param{display:flex;gap:14px;align-items:baseline;padding:10px 12px;border:1px solid var(--line); - border-radius:10px;background:var(--panel);margin-bottom:8px;scroll-margin-top:calc(var(--hdr) + 20px)} - .param .pname{color:var(--c-arg);font-size:13.5px;min-width:110px;flex:none} + .param{display:flex;flex-direction:column;gap:4px;padding:11px 13px;border:1px solid var(--line); + border-radius:10px;background:var(--panel);margin-bottom:8px;scroll-margin-top:calc(var(--hdr) + 16px)} + .param .pname{color:var(--c-arg);font-size:13.5px;flex:none} .param .pdesc{color:var(--text);font-size:14.5px} .param code{color:var(--amber);background:var(--c-bg);padding:1px 5px;border-radius:5px;font-size:12.5px} - .rel-row{display:flex;flex-wrap:wrap;gap:10px} + .rel-row{display:flex;flex-wrap:wrap;gap:8px} a.rel{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--text);background:var(--panel); - border:1px solid var(--line);border-radius:9px;padding:7px 12px} - a.rel:hover{border-color:var(--mint);color:var(--mint)} - a.back{display:inline-block;margin-top:34px;color:var(--muted);font-size:14px} - a.back:hover{color:var(--mint)} + border:1px solid var(--line);border-radius:9px;padding:8px 12px} + a.rel:active,a.rel:hover{border-color:var(--mint);color:var(--mint)} + a.back{display:inline-block;margin-top:30px;color:var(--muted);font-size:14px} + a.back:active,a.back:hover{color:var(--mint)} /* namespace overview */ - .ns-blurb{color:var(--muted);font-size:16px;max-width:720px;margin:14px 0 22px} + .ns-blurb{color:var(--muted);font-size:15.5px;max-width:720px;margin:14px 0 22px} .ns-blurb code{color:var(--mint);background:rgba(124,245,196,.08);padding:1px 5px;border-radius:5px;font-size:13px} .ns-methods{display:flex;flex-direction:column;gap:8px} a.ns-method{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line); - border-radius:11px;background:var(--panel);transition:border-color .14s,transform .14s} - a.ns-method:hover{border-color:var(--mint);transform:translateX(2px)} - .nm-sig{color:var(--c-fn);font-size:13.5px} + border-radius:11px;background:var(--panel);transition:border-color .14s} + a.ns-method:active,a.ns-method:hover{border-color:var(--mint)} + .nm-sig{color:var(--c-fn);font-size:13px;overflow-wrap:anywhere} .nm-tip{color:var(--muted);font-size:13.5px} /* swatches (Color page) */ - .swatch-group{margin-bottom:22px} + .swatch-group{margin-bottom:20px} .swatch-group h3{margin:0 0 12px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)} - .swatch-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px} - .swatch{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line); - border-radius:9px;padding:8px 10px;scroll-margin-top:calc(var(--hdr) + 20px)} - .chip{width:24px;height:24px;border-radius:6px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} - .cname{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} - .chex{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)} + .swatch-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} + .swatch{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line); + border-radius:9px;padding:8px 10px;min-width:0;scroll-margin-top:calc(var(--hdr) + 16px)} + .chip{width:22px;height:22px;border-radius:6px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} + .cname{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} + .chex{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);flex:none} /* ---- api index + search ---- */ - main.ref{padding:34px 24px 90px} - .ref-intro{margin-bottom:30px} - .ref-intro .kicker{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--mint);margin-bottom:12px} - .ref-intro h1{font-size:clamp(30px,5vw,46px);margin:0 0 12px;color:var(--head);letter-spacing:-1px} - .ref-intro p{font-size:16px;color:var(--muted);max-width:720px;margin:0 0 20px} - .search{width:100%;max-width:560px;font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--head); - background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:13px 16px;outline:none} + main.ref{padding:24px 16px 72px;max-width:var(--max);margin:0 auto} + .ref-intro{margin-bottom:26px} + .ref-intro .kicker{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--mint);margin-bottom:10px} + .ref-intro h1{font-size:clamp(28px,8vw,46px);margin:0 0 12px;color:var(--head);letter-spacing:-1px} + .ref-intro p{font-size:15.5px;color:var(--muted);max-width:720px;margin:0 0 18px} + .search{width:100%;max-width:560px;font-family:"JetBrains Mono",monospace;font-size:16px;color:var(--head); + background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:13px 15px;outline:none} .search:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(124,245,196,.12)} .noresults{color:var(--muted);margin-top:16px} - .idx-sec{margin-top:40px;scroll-margin-top:calc(var(--hdr) + 20px)} - .idx-sec h2{font-size:22px;color:var(--head);margin:0 0 4px;letter-spacing:-.3px} - .sec-blurb{color:var(--muted);font-size:14.5px;margin:0 0 16px;max-width:720px} + .idx-sec{margin-top:34px;scroll-margin-top:calc(var(--hdr) + 16px)} + .idx-sec h2{font-size:20px;color:var(--head);margin:0 0 4px;letter-spacing:-.3px} + .sec-blurb{color:var(--muted);font-size:14px;margin:0 0 14px;max-width:720px} .sec-blurb code{color:var(--mint);background:rgba(124,245,196,.08);padding:1px 5px;border-radius:5px;font-size:12.5px} - .idx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px} - a.idx-item{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border:1px solid var(--line); - border-radius:10px;background:var(--panel);transition:border-color .14s,transform .14s} - a.idx-item:hover{border-color:var(--mint);transform:translateY(-2px)} - a.idx-item code{color:var(--c-fn);font-size:13.5px} + .idx-grid{display:grid;grid-template-columns:1fr;gap:8px} + a.idx-item{display:flex;flex-direction:column;gap:3px;padding:12px 13px;border:1px solid var(--line); + border-radius:10px;background:var(--panel);transition:border-color .14s;min-width:0} + a.idx-item:active,a.idx-item:hover{border-color:var(--mint)} + a.idx-item code{color:var(--c-fn);font-size:14px;overflow-wrap:anywhere} a.idx-item span{color:var(--muted);font-size:13px;line-height:1.5} - /* ---- hover card ---- */ - .hovercard{position:fixed;z-index:100;max-width:340px;background:var(--panel2);border:1px solid var(--line2); - border-radius:12px;padding:12px 14px;box-shadow:0 20px 50px -18px rgba(0,0,0,.8);pointer-events:none} + /* ---- hover card (hover-capable devices only; JS also gates it) ---- */ + .hovercard{position:fixed;z-index:100;max-width:min(340px,calc(100vw - 24px));background:var(--panel2); + border:1px solid var(--line2);border-radius:12px;padding:12px 14px;box-shadow:0 20px 50px -18px rgba(0,0,0,.8);pointer-events:none} .hc-top{display:flex;align-items:center;gap:9px;margin-bottom:8px} - .hc-name{font-family:"JetBrains Mono",monospace;color:var(--head);font-weight:700;font-size:14px} + .hc-name{font-family:"JetBrains Mono",monospace;color:var(--head);font-weight:700;font-size:14px;overflow-wrap:anywhere} .hc-sig{display:block;color:var(--c-fn);background:var(--c-bg);border:1px solid var(--line);border-radius:7px; - padding:6px 9px;font-size:12px;margin-bottom:8px;white-space:pre-wrap} + padding:6px 9px;font-size:12px;margin-bottom:8px;white-space:pre-wrap;overflow-wrap:anywhere} .hc-tip{color:var(--text);font-size:13.5px;line-height:1.5} .hc-foot{color:var(--muted);font-size:11.5px;margin-top:9px;letter-spacing:.3px} @@ -137,3 +144,31 @@ 100%{background:transparent;box-shadow:0 0 0 3px transparent}} .flash{animation:ludicflash 1.4s ease-out} .item-head.flash h1{color:var(--mint)} + + /* ============ tablet / desktop ============ */ + @media (min-width:640px){ + :root{--hdr:64px} + .wrap{padding:0 24px} + main.item{padding:34px 24px 90px} + main.ref{padding:34px 24px 90px} + .param{flex-direction:row;gap:14px;align-items:baseline} + .param .pname{min-width:120px} + .idx-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px} + .swatch-row{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px} + .sig{display:inline-block} + } + @media (min-width:720px){ + .nav-toggle{display:none} + .nav-links{display:flex;position:static;flex-direction:row;gap:22px;margin-left:auto; + align-items:center;background:none;border:none;padding:0} + .nav-links a{color:var(--muted);font-size:14.5px;padding:0;border-top:none} + .nav-links a:hover{color:var(--head)} + .nav-links .nav-cta{padding:8px 15px;border-radius:9px;border:1px solid var(--line2); + background:var(--panel);color:var(--head)!important} + .nav-links .nav-cta:hover{border-color:var(--mint)} + } + /* keyboard/mouse only: lift affordances that would stick on touch */ + @media (hover:hover){ + a.ns-method:hover{transform:translateX(2px)} + a.idx-item:hover{transform:translateY(-2px)} + } diff --git a/tools/docgen/assets/ludic-highlight.tmpl.js b/tools/docgen/assets/ludic-highlight.tmpl.js index 2e63d1f0..6dd57476 100644 --- a/tools/docgen/assets/ludic-highlight.tmpl.js +++ b/tools/docgen/assets/ludic-highlight.tmpl.js @@ -134,6 +134,8 @@ } function hideCard(){ if (cardEl) cardEl.hidden = true; } function installCards(){ + // hover cards are a pointer affordance; skip on touch so a tap just navigates + if (!(window.matchMedia && window.matchMedia("(hover: hover)").matches)) return; document.addEventListener("mouseover", e => { const a = e.target.closest && e.target.closest("a.tok[data-id]"); if (!a) return; @@ -182,5 +184,23 @@ box.addEventListener("keydown", e => { if (e.key === "Enter"){ const first = items.find(i=>i.style.display!=="none"); if (first) location.href = first.getAttribute("href"); } }); } - global.Ludic = { highlight, highlightAll, installCards, flashTarget, installSearch, SYMBOLS: S }; + /* ---- mobile nav toggle (auto-wired on every page) ------------------- */ + function initNav(){ + document.querySelectorAll(".nav-toggle").forEach(btn => { + btn.addEventListener("click", () => { + const h = btn.closest("header.nav"); if (!h) return; + const open = h.classList.toggle("open"); + btn.setAttribute("aria-expanded", open ? "true" : "false"); + }); + }); + document.querySelectorAll("header.nav .nav-links a").forEach(a => { + a.addEventListener("click", () => { + const h = a.closest("header.nav"); + if (h){ h.classList.remove("open"); const b = h.querySelector(".nav-toggle"); if (b) b.setAttribute("aria-expanded","false"); } + }); + }); + } + if (document.readyState !== "loading") initNav(); else document.addEventListener("DOMContentLoaded", initNav); + + global.Ludic = { highlight, highlightAll, installCards, flashTarget, installSearch, initNav, SYMBOLS: S }; })(window); diff --git a/tools/docgen/assets/site.css b/tools/docgen/assets/site.css index 8bde25dc..a8b56f97 100644 --- a/tools/docgen/assets/site.css +++ b/tools/docgen/assets/site.css @@ -1,209 +1,200 @@ :root{ - --bg:#0a0d18; - --bg2:#0d1122; - --panel:#12172b; - --panel2:#151b32; - --line:#232b47; - --line2:#2c3660; - --text:#c9d2ea; - --head:#f2f5ff; - --muted:#8290b4; - --mint:#7cf5c4; - --coral:#ff5d73; - --violet:#c792ea; - --blue:#82aaff; - --amber:#f6c177; - --peri:#a6b8ff; - /* code theme */ - --c-bg:#0b0f20; - --c-comment:#5b6788; - --c-key:#ff7eb6; - --c-type:#7cf5c4; - --c-str:#f6c177; - --c-num:#a6b8ff; - --c-annot:#c792ea; - --c-fn:#82aaff; - --c-punc:#9aa6cc; - --radius:14px; - --max:1120px; + --bg:#0a0d18; --bg2:#0d1122; --panel:#12172b; --panel2:#151b32; + --line:#232b47; --line2:#2c3660; --text:#c9d2ea; --head:#f2f5ff; --muted:#8290b4; + --mint:#7cf5c4; --coral:#ff5d73; --violet:#c792ea; --blue:#82aaff; --amber:#f6c177; --peri:#a6b8ff; + --c-bg:#0b0f20; --c-comment:#5b6788; --c-key:#ff7eb6; --c-type:#7cf5c4; + --c-str:#f6c177; --c-num:#a6b8ff; --c-annot:#c792ea; --c-fn:#82aaff; --c-punc:#9aa6cc; + --radius:14px; --max:1120px; --hdr:60px; } *{box-sizing:border-box} - html{scroll-behavior:smooth} - body{ - margin:0; + html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} + body{margin:0;overflow-x:hidden; background: - radial-gradient(1100px 600px at 82% -8%, rgba(124,245,196,.10), transparent 60%), - radial-gradient(900px 620px at 6% 4%, rgba(255,93,115,.09), transparent 55%), + radial-gradient(900px 500px at 82% -8%, rgba(124,245,196,.10), transparent 60%), + radial-gradient(700px 520px at 6% 4%, rgba(255,93,115,.09), transparent 55%), var(--bg); color:var(--text); font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; - line-height:1.6; - -webkit-font-smoothing:antialiased; - text-rendering:optimizeLegibility; - } + line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} code,pre,.mono{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace} - .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} + .wrap{max-width:var(--max);margin:0 auto;padding:0 16px} - /* ---------- nav ---------- */ + /* ---------- nav (mobile-first: hamburger) ---------- */ header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px); - background:rgba(10,13,24,.72);border-bottom:1px solid var(--line)} - .nav-in{display:flex;align-items:center;gap:22px;height:64px} - .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--head);font-size:18px;letter-spacing:.2px} - .logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center; + background:rgba(10,13,24,.92);border-bottom:1px solid var(--line)} + .nav-in{display:flex;align-items:center;gap:12px;min-height:var(--hdr)} + .brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--head);font-size:17px;letter-spacing:.2px} + .logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none; background:linear-gradient(135deg,var(--mint),#3fd7a6);color:#06231a;font-weight:700;font-size:15px; box-shadow:0 0 0 1px rgba(124,245,196,.3), 0 6px 20px -6px rgba(124,245,196,.5)} - .nav-links{display:flex;gap:24px;margin-left:auto;align-items:center} - .nav-links a{color:var(--muted);font-size:14.5px;font-weight:500;transition:color .15s} - .nav-links a:hover{color:var(--head)} - .nav-cta{border:1px solid var(--line2);padding:8px 15px;border-radius:9px;color:var(--head)!important; - background:var(--panel);transition:border-color .15s, background .15s} - .nav-cta:hover{border-color:var(--mint);background:var(--panel2)} - @media(max-width:760px){.nav-links a:not(.nav-cta){display:none}} + .nav-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center; + width:42px;height:42px;border-radius:10px;border:1px solid var(--line2);background:var(--panel); + color:var(--head);font-size:20px;cursor:pointer;line-height:1} + .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column; + background:rgba(10,13,24,.98);border-bottom:1px solid var(--line);padding:4px 16px 10px; + box-shadow:0 20px 40px -24px rgba(0,0,0,.8)} + header.nav.open .nav-links{display:flex} + .nav-links a{color:var(--text);font-size:16px;font-weight:500;padding:14px 4px;border-top:1px solid var(--line)} + .nav-links a:first-child{border-top:none} + .nav-links a:active{color:var(--mint)} + .nav-links .nav-cta{background:none;text-align:left;color:var(--text)!important} /* ---------- hero ---------- */ - .hero{padding:84px 0 56px;position:relative;overflow:hidden} - .pill{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--mint); + .hero{padding:40px 0 40px;position:relative;overflow:hidden} + .pill{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mint); border:1px solid rgba(124,245,196,.28);background:rgba(124,245,196,.06); - padding:6px 13px;border-radius:999px;font-weight:500;margin-bottom:26px} + padding:6px 12px;border-radius:999px;font-weight:500;margin-bottom:22px} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)} - h1{font-size:clamp(38px,6vw,68px);line-height:1.04;margin:0 0 20px;color:var(--head); - font-weight:700;letter-spacing:-1.5px} + h1{font-size:clamp(32px,9vw,68px);line-height:1.05;margin:0 0 18px;color:var(--head);font-weight:700;letter-spacing:-1px} h1 .accent{background:linear-gradient(120deg,var(--mint),var(--blue));-webkit-background-clip:text; background-clip:text;-webkit-text-fill-color:transparent} - .lead{font-size:clamp(17px,2.3vw,21px);color:var(--muted);max-width:640px;margin:0 0 34px} + .lead{font-size:clamp(16px,4.5vw,21px);color:var(--muted);max-width:640px;margin:0 0 28px} .lead b{color:var(--text);font-weight:600} - .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center} - .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px; - padding:13px 22px;border-radius:11px;transition:transform .12s, box-shadow .15s, border-color .15s;font-family:inherit;cursor:pointer;border:1px solid transparent} + .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} + .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15.5px; + padding:13px 20px;border-radius:11px;transition:transform .12s, box-shadow .15s, border-color .15s;font-family:inherit;cursor:pointer;border:1px solid transparent} .btn:active{transform:translateY(1px)} - .btn-primary{background:linear-gradient(135deg,var(--mint),#43dcae);color:#06231a; - box-shadow:0 10px 30px -10px rgba(124,245,196,.6)} - .btn-primary:hover{box-shadow:0 14px 38px -10px rgba(124,245,196,.75)} + .btn-primary{background:linear-gradient(135deg,var(--mint),#43dcae);color:#06231a;box-shadow:0 10px 30px -10px rgba(124,245,196,.6)} .btn-ghost{border:1px solid var(--line2);color:var(--head);background:var(--panel)} - .btn-ghost:hover{border-color:var(--mint)} - .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center} - @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}} + @media (hover:hover){.btn-primary:hover{box-shadow:0 14px 38px -10px rgba(124,245,196,.75)}.btn-ghost:hover{border-color:var(--mint)}} + .hero-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center} + .hero-grid>*{min-width:0} /* window chrome for code */ .code-card{background:var(--c-bg);border:1px solid var(--line);border-radius:var(--radius); - overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)} - .code-top{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line); + overflow:hidden;min-width:0;box-shadow:0 24px 50px -30px rgba(0,0,0,.7)} + .code-top{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--panel),rgba(18,23,43,.4))} - .tl{width:11px;height:11px;border-radius:50%} + .tl{width:11px;height:11px;border-radius:50%;flex:none} .tl.r{background:#ff5f57}.tl.y{background:#febc2e}.tl.g{background:#28c840} .code-name{margin-left:8px;font-size:12.5px;color:var(--muted)} - pre{margin:0;padding:20px 22px;overflow:auto;font-size:13.5px;line-height:1.72;tab-size:2} - pre::-webkit-scrollbar{height:9px;width:9px} + pre{margin:0;padding:16px;overflow:auto;-webkit-overflow-scrolling:touch;font-size:12.5px;line-height:1.7;tab-size:2;max-width:100%} + pre::-webkit-scrollbar{height:8px;width:8px} pre::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px} - /* token colors */ .t-com{color:var(--c-comment);font-style:italic} - .t-key{color:var(--c-key)} - .t-type{color:var(--c-type)} - .t-str{color:var(--c-str)} - .t-num{color:var(--c-num)} - .t-annot{color:var(--c-annot)} - .t-fn{color:var(--c-fn)} - .t-punc{color:var(--c-punc)} - /* hover-to-jump links inside code snippets */ + .t-key{color:var(--c-key)}.t-type{color:var(--c-type)}.t-str{color:var(--c-str)} + .t-num{color:var(--c-num)}.t-annot{color:var(--c-annot)}.t-fn{color:var(--c-fn)}.t-punc{color:var(--c-punc)}.t-arg{color:var(--amber)} pre a.tok{border-radius:3px;transition:background .12s, outline-color .12s} pre a.tok:hover{background:rgba(124,245,196,.14);outline:1px solid rgba(124,245,196,.35)} /* ---------- pipeline ---------- */ - .pipeline{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap; - margin:8px 0 0;padding:20px;border:1px dashed var(--line2);border-radius:var(--radius); - background:rgba(18,23,43,.4)} - .stage{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:500;color:var(--head); - background:var(--panel);border:1px solid var(--line2);padding:8px 13px;border-radius:9px;white-space:nowrap} + .pipeline{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap; + margin:8px 0 0;padding:16px;border:1px dashed var(--line2);border-radius:var(--radius);background:rgba(18,23,43,.4)} + .stage{font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:500;color:var(--head); + background:var(--panel);border:1px solid var(--line2);padding:7px 11px;border-radius:9px;white-space:nowrap} .stage.hl{color:var(--mint);border-color:rgba(124,245,196,.35)} - .arrow{color:var(--muted);padding:0 12px;font-size:15px} + .arrow{color:var(--muted);padding:0 6px;font-size:14px} /* ---------- sections ---------- */ - section{padding:72px 0} - .sec-head{max-width:680px;margin-bottom:44px} - .kicker{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--mint);margin-bottom:14px} - h2{font-size:clamp(28px,4vw,40px);margin:0 0 14px;color:var(--head);letter-spacing:-.8px;font-weight:700;line-height:1.1} - .sec-head p{font-size:17.5px;color:var(--muted);margin:0} + section{padding:48px 0} + .sec-head{max-width:680px;margin-bottom:30px} + .kicker{font-size:12.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--mint);margin-bottom:12px} + h2{font-size:clamp(25px,6.5vw,40px);margin:0 0 12px;color:var(--head);letter-spacing:-.6px;font-weight:700;line-height:1.12} + .sec-head p{font-size:16px;color:var(--muted);margin:0} /* feature grid */ - .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} - @media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}} - @media(max-width:600px){.feat-grid{grid-template-columns:1fr}} + .feat-grid{display:grid;grid-template-columns:1fr;gap:14px} .feat{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line); - border-radius:var(--radius);padding:24px 22px;transition:transform .16s, border-color .16s} - .feat:hover{transform:translateY(-3px);border-color:var(--line2)} - .feat .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px; + border-radius:var(--radius);padding:20px 18px;transition:transform .16s, border-color .16s} + .feat .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px; background:rgba(124,245,196,.09);border:1px solid rgba(124,245,196,.2);font-size:20px} - .feat h3{margin:0 0 8px;font-size:17.5px;color:var(--head);font-weight:600} + .feat h3{margin:0 0 8px;font-size:17px;color:var(--head);font-weight:600} .feat p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.6} - .feat p code{color:var(--mint);font-size:12.5px;background:rgba(124,245,196,.08);padding:1px 5px;border-radius:5px} + .feat p code{color:var(--mint);font-size:12.5px;background:rgba(124,245,196,.08);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere} /* showcase tabs */ - .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} + .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .tab{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted);background:var(--panel); - border:1px solid var(--line);padding:8px 15px;border-radius:9px;cursor:pointer;transition:all .14s;font-weight:500} - .tab:hover{color:var(--text);border-color:var(--line2)} + border:1px solid var(--line);padding:9px 15px;border-radius:9px;cursor:pointer;transition:all .14s;font-weight:500} .tab.active{color:#06231a;background:var(--mint);border-color:var(--mint);font-weight:600} .panel-code{display:none} .panel-code.active{display:block} .showcase-note{margin-top:16px;font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:flex-start} - .showcase-note .b{color:var(--mint);font-weight:700} + .showcase-note .b{color:var(--mint);font-weight:700;flex:none} /* steps */ - .steps{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start} - @media(max-width:900px){.steps{grid-template-columns:1fr}} - .step{display:flex;gap:16px;margin-bottom:26px} + .steps{display:grid;grid-template-columns:1fr;gap:24px;align-items:start} + .step{display:flex;gap:14px;margin-bottom:20px} .step .n{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:700; font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--mint); background:rgba(124,245,196,.08);border:1px solid rgba(124,245,196,.25)} - .step h4{margin:2px 0 6px;color:var(--head);font-size:16.5px;font-weight:600} + .step h4{margin:2px 0 6px;color:var(--head);font-size:16px;font-weight:600} .step p{margin:0;color:var(--muted);font-size:14.5px} - .step p code{color:var(--text);background:var(--panel);padding:1px 6px;border-radius:5px;font-size:12.5px;border:1px solid var(--line)} - - .term{background:var(--c-bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:sticky;top:88px} - .term pre{font-size:13px} + .step p code{color:var(--text);background:var(--panel);padding:1px 6px;border-radius:5px;font-size:12.5px;border:1px solid var(--line);overflow-wrap:anywhere} + .term{background:var(--c-bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0} + .term pre{font-size:12.5px} .term .prompt{color:var(--mint)} .term .out{color:var(--muted)} /* editors strip */ - .editors{display:flex;flex-wrap:wrap;gap:12px} + .editors{display:flex;flex-wrap:wrap;gap:10px} .ed{font-family:"JetBrains Mono",monospace;font-size:13.5px;color:var(--text);background:var(--panel); - border:1px solid var(--line);border-radius:10px;padding:11px 16px;display:flex;align-items:center;gap:9px} + border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:9px} .ed .k{color:var(--mint)} - /* callout / philosophy banner */ + /* philosophy banner */ .banner{background:linear-gradient(120deg,rgba(124,245,196,.08),rgba(130,170,255,.06)); - border:1px solid var(--line2);border-radius:18px;padding:38px 34px;display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center} - @media(max-width:860px){.banner{grid-template-columns:1fr}} - .banner h2{font-size:clamp(24px,3.4vw,32px)} - .banner p{color:var(--muted);margin:0 0 6px;font-size:15.5px} - .stat-row{display:flex;gap:14px;flex-wrap:wrap} - .stat{background:var(--c-bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;flex:1;min-width:130px} - .stat .big{font-family:"JetBrains Mono",monospace;font-size:26px;color:var(--mint);font-weight:700;line-height:1} + border:1px solid var(--line2);border-radius:18px;padding:26px 22px;display:grid;grid-template-columns:1fr;gap:26px;align-items:center} + .banner h2{font-size:clamp(22px,5.5vw,32px)} + .banner p{color:var(--muted);margin:0 0 6px;font-size:15px} + .stat-row{display:flex;gap:12px;flex-wrap:wrap} + .stat{background:var(--c-bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;flex:1 1 120px;min-width:120px} + .stat .big{font-family:"JetBrains Mono",monospace;font-size:24px;color:var(--mint);font-weight:700;line-height:1} .stat .lbl{font-size:12.5px;color:var(--muted);margin-top:8px} /* footer */ - footer{border-top:1px solid var(--line);padding:44px 0 60px;margin-top:20px} - .foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center} + footer{border-top:1px solid var(--line);padding:34px 0 48px;margin-top:16px} + .foot-in{display:flex;flex-direction:column;justify-content:space-between;gap:20px;flex-wrap:wrap} .foot-in .muted{color:var(--muted);font-size:14px} - .foot-links{display:flex;gap:22px;flex-wrap:wrap} - .foot-links a{color:var(--muted);font-size:14px;transition:color .15s} + .foot-links{display:flex;gap:18px;flex-wrap:wrap} + .foot-links a{color:var(--muted);font-size:14px} .foot-links a:hover{color:var(--mint)} .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} - /* hover-card + named-arg token (shared with the reference) */ - .t-arg{color:var(--amber)} - .hovercard{position:fixed;z-index:100;max-width:340px;background:var(--panel2);border:1px solid var(--line2); - border-radius:12px;padding:12px 14px;box-shadow:0 20px 50px -18px rgba(0,0,0,.8);pointer-events:none} + /* hover-card + kind badges (shared with the reference; hover-devices only) */ + .hovercard{position:fixed;z-index:100;max-width:min(340px,calc(100vw - 24px));background:var(--panel2); + border:1px solid var(--line2);border-radius:12px;padding:12px 14px;box-shadow:0 20px 50px -18px rgba(0,0,0,.8);pointer-events:none} .hc-top{display:flex;align-items:center;gap:9px;margin-bottom:8px} - .hc-name{font-family:"JetBrains Mono",monospace;color:var(--head);font-weight:700;font-size:14px} + .hc-name{font-family:"JetBrains Mono",monospace;color:var(--head);font-weight:700;font-size:14px;overflow-wrap:anywhere} .hc-sig{display:block;color:var(--c-fn);background:var(--c-bg);border:1px solid var(--line);border-radius:7px; - padding:6px 9px;font-size:12px;margin-bottom:8px;white-space:pre-wrap} + padding:6px 9px;font-size:12px;margin-bottom:8px;white-space:pre-wrap;overflow-wrap:anywhere} .hc-tip{color:var(--text);font-size:13.5px;line-height:1.5} .hc-foot{color:var(--muted);font-size:11.5px;margin-top:9px;letter-spacing:.3px} .kind-badge{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:3px 7px; border-radius:6px;border:1px solid var(--line2);color:var(--muted);background:var(--panel)} .kind-keyword{color:var(--c-key)}.kind-type{color:var(--c-type)}.kind-phase{color:var(--blue)} .kind-method,.kind-builtin{color:var(--c-fn)}.kind-annotation{color:var(--c-annot)}.kind-namespace{color:var(--amber)} + + /* ============ tablet / desktop ============ */ + @media (min-width:600px){ + .feat-grid{grid-template-columns:repeat(2,1fr);gap:16px} + .cta-row .btn{min-width:0} + } + @media (min-width:720px){ + :root{--hdr:64px} + .wrap{padding:0 24px} + .nav-toggle{display:none} + .nav-links{display:flex;position:static;flex-direction:row;gap:24px;margin-left:auto;align-items:center;background:none;border:none;padding:0;box-shadow:none} + .nav-links a{color:var(--muted);font-size:14.5px;padding:0;border-top:none} + .nav-links a:hover{color:var(--head)} + .nav-links .nav-cta{padding:8px 15px;border-radius:9px;border:1px solid var(--line2); + background:var(--panel);color:var(--head)!important} + .nav-links .nav-cta:hover{border-color:var(--mint)} + } + @media (min-width:900px){ + .hero{padding:72px 0 52px} + section{padding:68px 0} + .hero-grid{grid-template-columns:1.02fr .98fr;gap:44px} + .feat-grid{grid-template-columns:repeat(3,1fr);gap:18px} + .steps{grid-template-columns:1.1fr 1fr;gap:40px} + .term{position:sticky;top:88px} + .banner{grid-template-columns:1.2fr 1fr;padding:36px 32px;gap:34px} + .foot-in{flex-direction:row;align-items:center} + } + @media (hover:hover){ + .feat:hover{transform:translateY(-3px);border-color:var(--line2)} + .tab:hover{color:var(--text);border-color:var(--line2)} + } diff --git a/tools/docgen/gen.py b/tools/docgen/gen.py index 4f242f59..078698a3 100644 --- a/tools/docgen/gen.py +++ b/tools/docgen/gen.py @@ -188,6 +188,7 @@ def head_html(title, desc, css_file): def topbar(cfg): return ('
' ' %s' + '' '
') % (esc(cfg["brand"]), nav_html(cfg)) # ---------------------------------------------------------------------------