From c5353e3e47815756cf5cb5626932a6a9da7edacf Mon Sep 17 00:00:00 2001 From: Local Dev Date: Sun, 20 Sep 2026 20:40:39 +0200 Subject: [PATCH] hephaestus.x: overlay side nav on home and docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Home page: How it works, Source and Pantheon were in the topnav next to cross-site tabs. Moved them plus Sign in and Verify into an overlay sidebar on the left edge — same shape as Sirius.X and Theseus.X — pointer-events:none, opacity 0.35 by default, hover brightens with a blurred backdrop, active section painted acid green, IntersectionObserver replaced with scroll-position tracking so the final section still activates when the reader hits the page end. Topnav collapses to the site tabs the header still owns: Hephaestus.X · Docs · Explore repos · Sign in. Docs page: the two-column grid with an inline .toc left column has been swapped for the same overlay rail. The 13 chapter titles now sit at the left edge, keep their numbered mono prefix via CSS counter, and stay legible under the semi-transparent hover backdrop. Content column is centred at 820px so the reading axis is on the middle of the viewport rather than shifted right by a sidebar. Icon rail at 64px on medium; sidebar hidden altogether on mobile because there is no room for a 13-item rail. --- hephaestus.x/docs/index.html | 105 ++++++++++++++++++++++++----------- hephaestus.x/index.html | 73 +++++++++++++++++++++++- 2 files changed, 143 insertions(+), 35 deletions(-) diff --git a/hephaestus.x/docs/index.html b/hephaestus.x/docs/index.html index 78bec0d..2393877 100644 --- a/hephaestus.x/docs/index.html +++ b/hephaestus.x/docs/index.html @@ -56,16 +56,36 @@ .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)} .topnav .spacer{margin-left:auto} - /* Docs layout: TOC left, content right */ - .doc{display:grid;grid-template-columns:220px 1fr;gap:32px;max-width:1080px;margin:0 auto;padding:2.4rem 1.2rem 4rem} - .toc{position:sticky;top:60px;align-self:start;font-size:13.5px;max-height:calc(100vh - 80px);overflow:auto;padding-right:6px} - .toc h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 8px;font-weight:500} - .toc ol{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:2px;counter-reset:t} - .toc ol li{counter-increment:t} - .toc ol li a{display:block;padding:5px 8px;border-radius:6px;color:var(--mut);text-decoration:none;line-height:1.35} - .toc ol li a::before{content:counter(t) ". ";color:var(--dim);font-family:var(--mono);font-size:11px} - .toc ol li a:hover{color:var(--ink);background:var(--panel)} + /* Docs layout: single-column centred; the section rail is an overlay. */ + .doc{max-width:820px;margin:0 auto;padding:2.4rem 1.2rem 4rem} .content{min-width:0} + + /* Adaptive side nav — overlay pattern shared with the rest of Silent Mode. */ + :root{--sn-w:220px} + .sidenav{position:fixed;top:56px;left:0;bottom:0;width:var(--sn-w);z-index:15; + background:transparent;padding:32px 12px 22px 18px; + overflow-y:auto;pointer-events:none;transition:width .15s ease} + .sidenav a{display:flex;align-items:center;gap:10px;color:var(--mut);text-decoration:none; + padding:6px 10px;border-radius:8px; + font-size:13.5px;font-weight:500;opacity:.35;pointer-events:auto;line-height:1.35; + transition:opacity .12s,color .12s,background .12s,backdrop-filter .12s;counter-increment:t} + .sidenav a::before{content:counter(t) ". ";color:currentColor;font-family:var(--mono);font-size:11px;opacity:.7;flex:none} + .sidenav a .lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} + .sidenav a:hover{opacity:1;color:var(--ink);background:rgba(5,8,16,.72);backdrop-filter:blur(8px)} + .sidenav a.active{opacity:.9;color:var(--acid)} + .sidenav a.active:hover{opacity:1} + .sidenav > .list{counter-reset:t;display:contents} + h2{scroll-margin-top:70px} + @media (max-width:1180px){ + :root{--sn-w:52px} + .sidenav{padding:22px 4px} + .sidenav a{justify-content:center;padding:8px 2px;gap:0} + .sidenav a .lb{display:none} + } + @media (max-width:720px){ + :root{--sn-w:0} + .sidenav{display:none} + } h1{font-size:clamp(2rem,4vw,2.5rem);margin:.4rem 0 .3rem;line-height:1.05} h1 .g{color:var(--forge)} h2{font-size:1.35rem;margin:2.4rem 0 .6rem;padding-top:1rem;border-top:1px solid var(--line)} @@ -125,8 +145,6 @@ footer.deep .bar .mono{font-family:var(--mono);letter-spacing:.03em} @media (max-width:820px){ - .doc{grid-template-columns:1fr;gap:0} - .toc{position:relative;top:0;max-height:none;margin-bottom:1.2rem} footer.deep .fwrap{grid-template-columns:1fr 1fr;gap:24px} } @media (max-width:520px){ @@ -138,34 +156,31 @@ -
+ - +
@@ -509,6 +524,32 @@ const { redirect } = await (await fetch( + diff --git a/hephaestus.x/index.html b/hephaestus.x/index.html index 17d4230..356a3d8 100644 --- a/hephaestus.x/index.html +++ b/hephaestus.x/index.html @@ -80,6 +80,42 @@ .topnav a:hover{color:var(--ink);background:var(--panel)} .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)} .topnav .spacer{margin-left:auto} + + /* Adaptive side nav — matches Sirius.X and Theseus.X. Overlay on top of + centred content, semi-transparent, hover brightens. */ + :root{--sn-w:200px} + .sidenav{position:fixed;top:56px;left:0;bottom:0;width:var(--sn-w);z-index:15; + background:transparent;padding:32px 12px 22px 18px; + overflow-y:auto;pointer-events:none;transition:width .15s ease} + .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none; + padding:9px 12px;border-radius:10px; + font-size:14.5px;font-weight:500;opacity:.35;pointer-events:auto; + transition:opacity .12s,color .12s,background .12s,backdrop-filter .12s} + .sidenav a .ic{flex:none;width:22px;font-size:18px;line-height:1;text-align:center; + display:none;justify-content:center;align-items:center} + .sidenav a .lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} + .sidenav a:hover{opacity:1;color:var(--ink);background:rgba(5,8,16,.72);backdrop-filter:blur(8px)} + .sidenav a.active{opacity:.85;color:var(--acid)} + .sidenav a.active:hover{opacity:1} + section{scroll-margin-top:70px} + @media (max-width:1180px){ + :root{--sn-w:64px} + .sidenav{padding:22px 6px} + .sidenav a{justify-content:center;padding:12px 4px;gap:0} + .sidenav a .ic{display:inline-flex} + .sidenav a .lb{display:none} + } + @media (max-width:720px){ + :root{--sn-w:0} + body{padding-bottom:64px} + .sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto; + padding:4px;flex-direction:row;background:rgba(5,8,16,.52); + display:flex;justify-content:space-around;overflow-x:auto} + .sidenav a{flex:1;min-width:56px;padding:10px 6px;justify-content:center;gap:0;opacity:.5} + .sidenav a .ic{display:inline-flex} + .sidenav a .lb{display:none} + } + header.hero{text-align:center;padding:5rem 1.2rem 1rem} .mark{font-size:56px;line-height:1} h1{font-size:clamp(2rem,5.5vw,3rem);margin:.4rem 0 .3rem} @@ -193,10 +229,7 @@ + +
@@ -490,6 +531,32 @@ open https://your-domain.example/user/oauth2/hephaestus-wallet +