From 0e8e1949dfa52112bb815c731221b84a3121dea3 Mon Sep 17 00:00:00 2001 From: Local Dev Date: Sun, 20 Sep 2026 17:46:55 +0200 Subject: [PATCH] site-theseus-x: overlay sidebar so content stays centred; sirius.x: Theseus.X MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sidebar's body padding-left was pushing the whole page — hero, cards, footer — to the right of centre, off the axis of the hero title. Removed the body reserve; the sidebar is now a pointer-events:none overlay on top of the page. Content wraps back to the middle of the viewport regardless of sidebar width. Links float at opacity 0.35 by default so the sidebar reads as chrome rather than a panel — the section text underneath stays legible. On hover a link snaps to full opacity, picks up an ink colour and a subtle blurred backdrop so it doesn't compete with the content. The active-section link keeps the acid tint at 0.85 and finishes to 1 on hover. Icon rail and mobile bar unchanged. Sirius.X: the Theseus tab link in the topnav now reads Theseus.X with the .X in acid green, matching the naming everywhere else in the ecosystem. --- extensions/index.html | 21 ++++++++++----------- index.html | 22 +++++++++++----------- plug-ins/index.html | 21 ++++++++++----------- 3 files changed, 31 insertions(+), 33 deletions(-) diff --git a/extensions/index.html b/extensions/index.html index 1119b11..1df396e 100644 --- a/extensions/index.html +++ b/extensions/index.html @@ -39,22 +39,21 @@ /* Adaptive edge nav: full-width panel at left edge on wide, icon rail on medium, bottom bar with icons on mobile. */ - :root{--sn-w:220px;--tn-h:52px} - body{padding-left:var(--sn-w);padding-top:var(--tn-h)} + :root{--sn-w:200px;--tn-h:52px} + body{padding-top:var(--tn-h)} .sidenav{position:fixed;top:var(--tn-h);left:0;bottom:0;width:var(--sn-w);z-index:15; - background:rgba(11,14,20,.42);backdrop-filter:blur(10px); - padding:56px 14px 22px 18px; - overflow-y:auto;transition:width .15s ease} - .sidenav .lbl{color:var(--dim);font:600 10.5px/1 system-ui;letter-spacing:.24em;text-transform:uppercase; - margin:0 0 14px 4px} + background:transparent;padding:56px 12px 22px 18px; + overflow-y:auto;transition:width .15s ease;pointer-events:none} .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none; - padding:11px 12px;border-radius:10px; - font-size:14.5px;font-weight:500;transition:color .1s} + 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{color:var(--ink)} - .sidenav a.active{color:var(--acid)} + .sidenav a:hover{opacity:1;color:var(--ink);background:rgba(11,14,20,.72);backdrop-filter:blur(8px)} + .sidenav a.active{opacity:.85;color:var(--acid)} + .sidenav a.active:hover{opacity:1} @media (max-width:1180px){ :root{--sn-w:64px} .sidenav{padding:22px 6px} diff --git a/index.html b/index.html index 2cb1020..d3ccb7a 100644 --- a/index.html +++ b/index.html @@ -46,22 +46,22 @@ icon rail on medium, bottom bar with icons on mobile. Topnav is fixed at the top spanning the full width; sidebar starts just below it and content flows in the right column. */ - :root{--sn-w:220px;--tn-h:52px} - body{padding-left:var(--sn-w);padding-top:var(--tn-h)} + :root{--sn-w:200px;--tn-h:52px} + /* Content stays centered — the sidebar overlays on top of the page. */ + body{padding-top:var(--tn-h)} .sidenav{position:fixed;top:var(--tn-h);left:0;bottom:0;width:var(--sn-w);z-index:15; - background:rgba(11,14,20,.42);backdrop-filter:blur(10px); - padding:56px 14px 22px 18px; - overflow-y:auto;transition:width .15s ease} - .sidenav .lbl{color:var(--dim);font:600 10.5px/1 system-ui;letter-spacing:.24em;text-transform:uppercase; - margin:0 0 14px 4px} + background:transparent;padding:56px 12px 22px 18px; + overflow-y:auto;transition:width .15s ease;pointer-events:none} .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none; - padding:11px 12px;border-radius:10px; - font-size:14.5px;font-weight:500;transition:color .1s} + 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{color:var(--ink)} - .sidenav a.active{color:var(--acid)} + .sidenav a:hover{opacity:1;color:var(--ink);background:rgba(11,14,20,.72);backdrop-filter:blur(8px)} + .sidenav a.active{opacity:.85;color:var(--acid)} + .sidenav a.active:hover{opacity:1} /* Medium: shrink to an icon rail — icons only */ @media (max-width:1180px){ :root{--sn-w:64px} diff --git a/plug-ins/index.html b/plug-ins/index.html index 48b51a9..7c720cb 100644 --- a/plug-ins/index.html +++ b/plug-ins/index.html @@ -38,22 +38,21 @@ /* Adaptive edge nav: full-width panel at left edge on wide, icon rail on medium, bottom bar with icons on mobile. */ - :root{--sn-w:220px;--tn-h:52px} - body{padding-left:var(--sn-w);padding-top:var(--tn-h)} + :root{--sn-w:200px;--tn-h:52px} + body{padding-top:var(--tn-h)} .sidenav{position:fixed;top:var(--tn-h);left:0;bottom:0;width:var(--sn-w);z-index:15; - background:rgba(11,14,20,.42);backdrop-filter:blur(10px); - padding:56px 14px 22px 18px; - overflow-y:auto;transition:width .15s ease} - .sidenav .lbl{color:var(--dim);font:600 10.5px/1 system-ui;letter-spacing:.24em;text-transform:uppercase; - margin:0 0 14px 4px} + background:transparent;padding:56px 12px 22px 18px; + overflow-y:auto;transition:width .15s ease;pointer-events:none} .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none; - padding:11px 12px;border-radius:10px; - font-size:14.5px;font-weight:500;transition:color .1s} + 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{color:var(--ink)} - .sidenav a.active{color:var(--acid)} + .sidenav a:hover{opacity:1;color:var(--ink);background:rgba(11,14,20,.72);backdrop-filter:blur(8px)} + .sidenav a.active{opacity:.85;color:var(--acid)} + .sidenav a.active:hover{opacity:1} @media (max-width:1180px){ :root{--sn-w:64px} .sidenav{padding:22px 6px}