site-theseus-x: split site-level tabs from in-page nav

The top nav was a mix of anchor links (#what, #features, #verify) and site tabs (/plug-ins/, /extensions/). Sub-pages dropped the anchor-only items, so the header visibly reshuffled between pages — clicking a tab looked like a partial page break, not a navigation. Top nav is now the same five items on every page: brand → Theseus.X, Home / Plug-ins / Extensions / sirius.x / Get Theseus. Section anchors moved to a fixed left sidebar (position: fixed, sits outside the centered content column, hidden below 1180-1200px). IntersectionObserver highlights the current section in acid green as the reader scrolls. Sub-pages get their own left sidebar for the sections they actually contain (Plug-ins: 3; Extensions: 6), so the pattern is consistent across the site instead of home-only. Brand text bumped to capital T + capital X.
2026-09-20 15:54:01 +02:00 · 2026-09-20 15:54:01 +02:00 · 321981ec87
commit 321981ec87
parent 8fb940ec80
3 changed files with 133 additions and 20 deletions
--- a/extensions/index.html
+++ b/extensions/index.html
@ -32,11 +32,25 @@
  .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px}
  .topnav a:hover{color:var(--ink);background:var(--panel)}
  .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)}
+  .topnav a.get{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500}
+  .topnav a.get:hover{background:rgba(214,255,61,.18)}
+
+  /* Left floating in-page nav. Sits outside the 900px content box on wide viewports. */
+  .sidenav{position:fixed;top:96px;left:max(16px,calc((100vw - 1180px) / 2));width:172px;z-index:10;
+       padding:14px 4px 14px 14px;border-left:1px solid var(--line);font-size:13px}
+  .sidenav .lbl{color:var(--dim);font:600 10.5px/1 system-ui;letter-spacing:.22em;text-transform:uppercase;
+       margin:0 0 10px 2px}
+  .sidenav a{display:block;color:var(--mut);text-decoration:none;padding:7px 10px;border-radius:8px;
+       border-left:2px solid transparent;margin-left:-2px;transition:color .1s,background .1s,border-color .1s}
+  .sidenav a:hover{color:var(--ink);background:var(--panel)}
+  .sidenav a.active{color:var(--acid);border-left-color:var(--acid);background:rgba(214,255,61,.06)}
+  @media (max-width:1180px){.sidenav{display:none}}
+
  header.hero{text-align:center;padding:3.5rem 1.2rem 1rem}
  h1{font-size:clamp(1.8rem,4.5vw,2.4rem);margin:.6rem 0 .3rem;letter-spacing:-.3px}
  h1 .g{color:var(--acid)}
  .tag{color:var(--mut);font-size:1.02rem;max-width:640px;margin:0 auto}
-  section{padding:2rem 0;border-top:1px solid var(--line);margin-top:1.6rem}
+  section{padding:2rem 0;border-top:1px solid var(--line);margin-top:1.6rem;scroll-margin-top:72px}
  section:first-of-type{border-top:none;margin-top:1rem}
  h2{font-size:1.35rem;margin:0 0 .5rem}
  .lede{color:var(--mut);margin:0 0 1.2rem;max-width:720px}
@ -78,15 +92,25 @@
      <path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/>
      <circle cx="32" cy="32" r="3" fill="#0b0e14"/>
    </svg>
-    <span>theseus<span class="g">.x</span></span>
+    <span>Theseus<span class="g">.X</span></span>
  </a>
  <a href="/">Home</a>
-  <a href="/#download">Download</a>
  <a href="/plug-ins/">Plug-ins</a>
  <a class="here" href="./">Extensions</a>
-  <a href="https://sirius.x/">sirius.x</a>
+  <a href="https://sirius.x/" title="Register a BCNR name">sirius.x</a>
+  <a class="get" href="/#download">Get Theseus</a>
 </nav>

+<aside class="sidenav" aria-label="On this page">
+  <div class="lbl">On this page</div>
+  <a href="#bundled">Bundled</a>
+  <a href="#community">Community</a>
+  <a href="#build">Build &amp; publish</a>
+  <a href="#updates">How updates work</a>
+  <a href="#operator-key">Operator key</a>
+  <a href="#roadmap">Roadmap</a>
+</aside>
+
 <header class="hero">
  <h1>Theseus <span class="g">Extensions</span></h1>
  <p class="tag">Add-ons for Theseus Navigator — the ones that ship in the box and the ones anyone can
@ -209,9 +233,26 @@
      </div>`).join("");
  } catch (e) { box.innerHTML = '<div class="ext" style="color:var(--dim)">Catalog unavailable right now.</div>'; }
 })();
+
+// Sidenav scroll-spy: highlight the section currently in view.
+(() => {
+  const links = document.querySelectorAll(".sidenav a[href^='#']");
+  if (!links.length) return;
+  const map = new Map();
+  links.forEach((a) => { const el = document.querySelector(a.getAttribute("href")); if (el) map.set(el, a); });
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach((en) => {
+      if (!en.isIntersecting) return;
+      const a = map.get(en.target); if (!a) return;
+      links.forEach((l) => l.classList.remove("active"));
+      a.classList.add("active");
+    });
+  }, { rootMargin: "-40% 0px -55% 0px", threshold: 0 });
+  map.forEach((_, el) => io.observe(el));
+})();
 </script>

-<section>
+<section id="updates">
  <h2>How updates work</h2>
  <p class="lede">Same mechanism a Firefox XPI update uses, cut down to what a name-native browser needs.</p>
  <div class="flow">
@ -225,7 +266,7 @@
  </div>
 </section>

-<section>
+<section id="operator-key">
  <h2>Operator key</h2>
  <p class="lede">The Ed25519 public key baked into Theseus 0.3.19+.
    Rotation is by adding a new pubkey and shipping a Theseus release that carries both, then a follow-up release removing the old — during the overlap, entries can be signed by either.</p>
@ -233,7 +274,7 @@
  <p style="color:var(--dim);font-size:12.5px;margin-top:.6rem">Generated 2026-09-07. Held offline by the Silent Mode operator.</p>
 </section>

-<section>
+<section id="roadmap">
  <h2>Roadmap</h2>
  <p class="lede">The endpoint is generic — any bundled add-on can advertise an <code>updateURL</code>.
    Concrete next-steps:</p>
--- a/index.html
+++ b/index.html
@ -39,6 +39,18 @@
  .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)}
  .topnav a.get{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500}
  .topnav a.get:hover{background:rgba(214,255,61,.18)}
+
+  /* Left floating in-page nav (home only). Sits outside the 980px content box on wide viewports. */
+  .sidenav{position:fixed;top:96px;left:max(16px,calc((100vw - 1240px) / 2));width:172px;z-index:10;
+       padding:14px 4px 14px 14px;border-left:1px solid var(--line);font-size:13px}
+  .sidenav .lbl{color:var(--dim);font:600 10.5px/1 system-ui;letter-spacing:.22em;text-transform:uppercase;
+       margin:0 0 10px 2px}
+  .sidenav a{display:block;color:var(--mut);text-decoration:none;padding:7px 10px;border-radius:8px;
+       border-left:2px solid transparent;margin-left:-2px;transition:color .1s,background .1s,border-color .1s}
+  .sidenav a:hover{color:var(--ink);background:var(--panel)}
+  .sidenav a.active{color:var(--acid);border-left-color:var(--acid);background:rgba(214,255,61,.06)}
+  @media (max-width:1200px){.sidenav{display:none}}
+
  header.hero{text-align:center;padding:5rem 1.2rem 1.5rem}
  .mark{display:inline-block}
  .mark svg{width:80px;height:80px;filter:drop-shadow(0 4px 24px rgba(214,255,61,.18))}
@ -50,7 +62,7 @@
  .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
  .btn.acid{background:var(--acid);color:#0b0e14;font-weight:600}
  .btn:hover{filter:brightness(1.12)}
-  section{padding:2.6rem 0;border-top:1px solid var(--line);margin-top:2.5rem}
+  section{padding:2.6rem 0;border-top:1px solid var(--line);margin-top:2.5rem;scroll-margin-top:72px}
  section:first-of-type{border-top:none;margin-top:1.5rem}
  h2{font-size:1.5rem;margin:0 0 .4rem}
  h3{font-size:1.1rem;margin:0 0 .35rem}
@ -97,18 +109,23 @@
      <path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/>
      <circle cx="32" cy="32" r="3" fill="#0b0e14"/>
    </svg>
-    <span>theseus<span class="g">.x</span></span>
+    <span>Theseus<span class="g">.X</span></span>
  </a>
-  <a href="#what">What it is</a>
-  <a href="#features">Features</a>
-  <a href="#download">Download</a>
-  <a href="#verify">Verify</a>
+  <a class="here" href="/">Home</a>
  <a href="/plug-ins/">Plug-ins</a>
  <a href="/extensions/">Extensions</a>
  <a href="https://sirius.x/" title="Register a BCNR name">sirius.x</a>
  <a class="get" href="#download">Get Theseus</a>
 </nav>

+<aside class="sidenav" aria-label="On this page">
+  <div class="lbl">On this page</div>
+  <a href="#what">What it is</a>
+  <a href="#features">Features</a>
+  <a href="#download">Download</a>
+  <a href="#verify">Verify</a>
+</aside>
+
 <header class="hero">
  <div class="mark">
    <svg viewBox="0 0 64 64" aria-hidden="true">
@ -324,6 +341,23 @@ Expected:
    }
  } catch {}
 })();
+
+// Sidenav scroll-spy: highlight the section currently in view.
+(() => {
+  const links = document.querySelectorAll(".sidenav a[href^='#']");
+  if (!links.length) return;
+  const map = new Map();
+  links.forEach((a) => { const el = document.querySelector(a.getAttribute("href")); if (el) map.set(el, a); });
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach((en) => {
+      if (!en.isIntersecting) return;
+      const a = map.get(en.target); if (!a) return;
+      links.forEach((l) => l.classList.remove("active"));
+      a.classList.add("active");
+    });
+  }, { rootMargin: "-40% 0px -55% 0px", threshold: 0 });
+  map.forEach((_, el) => io.observe(el));
+})();
 </script>
 </body>
 </html>
--- a/plug-ins/index.html
+++ b/plug-ins/index.html
@ -30,11 +30,25 @@
  .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px}
  .topnav a:hover{color:var(--ink);background:var(--panel)}
  .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)}
+  .topnav a.get{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500}
+  .topnav a.get:hover{background:rgba(214,255,61,.18)}
+
+  /* Left floating in-page nav. Sits outside the 900px content box on wide viewports. */
+  .sidenav{position:fixed;top:96px;left:max(16px,calc((100vw - 1180px) / 2));width:172px;z-index:10;
+       padding:14px 4px 14px 14px;border-left:1px solid var(--line);font-size:13px}
+  .sidenav .lbl{color:var(--dim);font:600 10.5px/1 system-ui;letter-spacing:.22em;text-transform:uppercase;
+       margin:0 0 10px 2px}
+  .sidenav a{display:block;color:var(--mut);text-decoration:none;padding:7px 10px;border-radius:8px;
+       border-left:2px solid transparent;margin-left:-2px;transition:color .1s,background .1s,border-color .1s}
+  .sidenav a:hover{color:var(--ink);background:var(--panel)}
+  .sidenav a.active{color:var(--acid);border-left-color:var(--acid);background:rgba(214,255,61,.06)}
+  @media (max-width:1180px){.sidenav{display:none}}
+
  header.hero{text-align:center;padding:3.5rem 1.2rem 1rem}
  h1{font-size:clamp(1.8rem,4.5vw,2.4rem);margin:.6rem 0 .3rem;letter-spacing:-.3px}
  h1 .g{color:var(--acid)}
  .tag{color:var(--mut);font-size:1.02rem;max-width:640px;margin:0 auto}
-  section{padding:2rem 0;border-top:1px solid var(--line);margin-top:1.6rem}
+  section{padding:2rem 0;border-top:1px solid var(--line);margin-top:1.6rem;scroll-margin-top:72px}
  section:first-of-type{border-top:none;margin-top:1rem}
  h2{font-size:1.35rem;margin:0 0 .5rem}
  .lede{color:var(--mut);margin:0 0 1.2rem;max-width:720px}
@ -70,15 +84,22 @@
      <path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/>
      <circle cx="32" cy="32" r="3" fill="#0b0e14"/>
    </svg>
-    <span>theseus<span class="g">.x</span></span>
+    <span>Theseus<span class="g">.X</span></span>
  </a>
  <a href="/">Home</a>
-  <a href="/#download">Download</a>
  <a class="here" href="./">Plug-ins</a>
  <a href="/extensions/">Extensions</a>
-  <a href="https://sirius.x/">sirius.x</a>
+  <a href="https://sirius.x/" title="Register a BCNR name">sirius.x</a>
+  <a class="get" href="/#download">Get Theseus</a>
 </nav>

+<aside class="sidenav" aria-label="On this page">
+  <div class="lbl">On this page</div>
+  <a href="#aegis-section">Aegis wallet</a>
+  <a href="#ariadne-section">Ariadne's Thread</a>
+  <a href="#line">Plug-ins vs extensions</a>
+</aside>
+
 <header class="hero">
  <h1>Theseus <span class="g">Plug-ins</span></h1>
  <p class="tag">Silent Mode's own components that ship inside Theseus and appear under
@ -88,7 +109,7 @@

 <div class="wrap">

-<section>
+<section id="aegis-section">
  <h2>Aegis — the wallet</h2>
  <p class="lede">Multi-chain wallet derived from your Theseus vault (BCH, BTC, TRX, ETH, SOL, SC, DGB) with a
    dApp bridge for the pages you visit. Bundled with every Theseus build and updated over a signed channel
@ -106,7 +127,7 @@
  </div>
 </section>

-<section>
+<section id="ariadne-section">
  <h2>Ariadne's Thread — the system-wide resolver</h2>
  <p class="lede">Makes BCDN names resolve for <em>every</em> program on the machine, not only Theseus: a local
    DNS resolver plus gateway, installed by Theseus's setup by default (opt-out) and switchable from
@ -130,7 +151,7 @@
  </div>
 </section>

-<section>
+<section id="line">
  <h2>Where the line is</h2>
  <p class="lede">Plug-ins are first-party: Silent Mode builds them, signs them with the operator key, and Theseus treats
    them as part of itself (own Settings section, own update flow). Extensions are everyone else's: published by
@ -172,6 +193,23 @@
    }
  } catch {}
 })();
+
+// Sidenav scroll-spy: highlight the section currently in view.
+(() => {
+  const links = document.querySelectorAll(".sidenav a[href^='#']");
+  if (!links.length) return;
+  const map = new Map();
+  links.forEach((a) => { const el = document.querySelector(a.getAttribute("href")); if (el) map.set(el, a); });
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach((en) => {
+      if (!en.isIntersecting) return;
+      const a = map.get(en.target); if (!a) return;
+      links.forEach((l) => l.classList.remove("active"));
+      a.classList.add("active");
+    });
+  }, { rootMargin: "-40% 0px -55% 0px", threshold: 0 });
+  map.forEach((_, el) => io.observe(el));
+})();
 </script>
 </body>
 </html>