silentmode/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

site-theseus-x: overlay sidebar so content stays centred; sirius.x: Theseus.X

Browse source 
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.
This commit is contained in:
Local Dev 2026-09-20 17:46:55 +02:00
parent aeb049a158
commit 0e8e1949df
3 changed files with 31 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
extensions/index.html
View file

@ -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}

22
index.html
View file

@ -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}

21
plug-ins/index.html
View file

@ -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}