From 5d9ee6109de1e99a1f04619328d61d213e6e2a00 Mon Sep 17 00:00:00 2001 From: Local Dev Date: Sun, 20 Sep 2026 16:11:57 +0200 Subject: [PATCH] =?UTF-8?q?site-theseus-x:=20adaptive=20edge=20sidebar=20(?= =?UTF-8?q?labels=20=E2=86=92=20icons=20=E2=86=92=20bottom=20bar)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sidebar was a small strip in the middle of the page. Now it lives on the left edge as a proper column, sized to be reachable โ€” 220px full mode with icon + label per link, on the operator's brand backdrop. Breakpoints: >1180px full sidebar, icon + label, "ON THIS PAGE" section header <=1180px 64px icon rail, labels drop, tooltips on hover <=720px bottom bar strip, icons only, spans page width body padding-left carries the sidebar width so the topnav and page content flow as one column beside the rail โ€” no overlap on any width. Home has 4 icons (What it is / Features / Download / Verify), Plug-ins has 3 (Aegis / Ariadne's Thread / vs extensions), Extensions has 6 (Bundled / Community / Build & publish / Updates / Operator key / Roadmap). --- extensions/index.html | 57 +++++++++++++++++++++++++++++++------------ index.html | 57 +++++++++++++++++++++++++++++++++---------- plug-ins/index.html | 51 +++++++++++++++++++++++++++++--------- 3 files changed, 125 insertions(+), 40 deletions(-) diff --git a/extensions/index.html b/extensions/index.html index 7525b75..d54a7d3 100644 --- a/extensions/index.html +++ b/extensions/index.html @@ -35,16 +35,43 @@ .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} + /* 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} + body{padding-left:var(--sn-w)} + .sidenav{position:fixed;top:0;left:0;bottom:0;width:var(--sn-w);z-index:15; + background:rgba(11,14,20,.82);backdrop-filter:blur(10px); + border-right:1px solid var(--line);padding:74px 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} + .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none; + padding:11px 12px;border-radius:10px;border-left:3px solid transparent;margin-left:-3px; + font-size:14.5px;font-weight:500;transition:color .1s,background .1s,border-color .1s} + .sidenav a .ic{flex:none;width:22px;font-size:18px;line-height:1;text-align:center; + display:inline-flex;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);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}} + .sidenav a.active{color:var(--acid);border-left-color:var(--acid);background:rgba(214,255,61,.07)} + @media (max-width:1180px){ + :root{--sn-w:64px} + .sidenav{padding:74px 6px 22px 6px} + .sidenav .lbl{display:none} + .sidenav a{justify-content:center;padding:12px 4px;gap:0} + .sidenav a .lb{display:none} + } + @media (max-width:720px){ + :root{--sn-w:0px} + body{padding-left:0;padding-bottom:64px} + .sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto; + padding:4px 4px;flex-direction:row;border-right:none;border-top:1px solid var(--line); + display:flex;justify-content:space-around;overflow-x:auto} + .sidenav .lbl{display:none} + .sidenav a{flex:1;min-width:56px;padding:10px 6px;justify-content:center;border-left:none; + border-top:3px solid transparent;margin-left:0;margin-top:-3px;gap:0} + .sidenav a.active{border-left-color:transparent;border-top-color:var(--acid)} + .sidenav a .lb{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} @@ -103,12 +130,12 @@
diff --git a/index.html b/index.html index 12e6fb0..f0e69be 100644 --- a/index.html +++ b/index.html @@ -40,16 +40,47 @@ .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} + /* Adaptive edge nav: full-width panel at left edge on wide, + icon rail on medium, bottom bar with icons on mobile. + body padding-left carves the space so topnav + content flow as one column + beside the sidebar. */ + :root{--sn-w:220px} + body{padding-left:var(--sn-w)} + .sidenav{position:fixed;top:0;left:0;bottom:0;width:var(--sn-w);z-index:15; + background:rgba(11,14,20,.82);backdrop-filter:blur(10px); + border-right:1px solid var(--line);padding:74px 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} + .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none; + padding:11px 12px;border-radius:10px;border-left:3px solid transparent;margin-left:-3px; + font-size:14.5px;font-weight:500;transition:color .1s,background .1s,border-color .1s} + .sidenav a .ic{flex:none;width:22px;font-size:18px;line-height:1;text-align:center; + display:inline-flex;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);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}} + .sidenav a.active{color:var(--acid);border-left-color:var(--acid);background:rgba(214,255,61,.07)} + /* Medium: shrink to an icon rail */ + @media (max-width:1180px){ + :root{--sn-w:64px} + .sidenav{padding:74px 6px 22px 6px} + .sidenav .lbl{display:none} + .sidenav a{justify-content:center;padding:12px 4px;gap:0} + .sidenav a .lb{display:none} + } + /* Mobile: bottom icon bar */ + @media (max-width:720px){ + :root{--sn-w:0px} + body{padding-left:0;padding-bottom:64px} + .sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto; + padding:4px 4px;flex-direction:row;border-right:none;border-top:1px solid var(--line); + display:flex;justify-content:space-around;overflow-x:auto} + .sidenav .lbl{display:none} + .sidenav a{flex:1;min-width:56px;padding:10px 6px;justify-content:center;border-left:none; + border-top:3px solid transparent;margin-left:0;margin-top:-3px;gap:0} + .sidenav a.active{border-left-color:transparent;border-top-color:var(--acid)} + .sidenav a .lb{display:none} + } header.hero{text-align:center;padding:5rem 1.2rem 1.5rem} .mark{display:inline-block} @@ -120,10 +151,10 @@
diff --git a/plug-ins/index.html b/plug-ins/index.html index 4926fca..d553e58 100644 --- a/plug-ins/index.html +++ b/plug-ins/index.html @@ -33,16 +33,43 @@ .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} + /* 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} + body{padding-left:var(--sn-w)} + .sidenav{position:fixed;top:0;left:0;bottom:0;width:var(--sn-w);z-index:15; + background:rgba(11,14,20,.82);backdrop-filter:blur(10px); + border-right:1px solid var(--line);padding:74px 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} + .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none; + padding:11px 12px;border-radius:10px;border-left:3px solid transparent;margin-left:-3px; + font-size:14.5px;font-weight:500;transition:color .1s,background .1s,border-color .1s} + .sidenav a .ic{flex:none;width:22px;font-size:18px;line-height:1;text-align:center; + display:inline-flex;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);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}} + .sidenav a.active{color:var(--acid);border-left-color:var(--acid);background:rgba(214,255,61,.07)} + @media (max-width:1180px){ + :root{--sn-w:64px} + .sidenav{padding:74px 6px 22px 6px} + .sidenav .lbl{display:none} + .sidenav a{justify-content:center;padding:12px 4px;gap:0} + .sidenav a .lb{display:none} + } + @media (max-width:720px){ + :root{--sn-w:0px} + body{padding-left:0;padding-bottom:64px} + .sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto; + padding:4px 4px;flex-direction:row;border-right:none;border-top:1px solid var(--line); + display:flex;justify-content:space-around;overflow-x:auto} + .sidenav .lbl{display:none} + .sidenav a{flex:1;min-width:56px;padding:10px 6px;justify-content:center;border-left:none; + border-top:3px solid transparent;margin-left:0;margin-top:-3px;gap:0} + .sidenav a.active{border-left-color:transparent;border-top-color:var(--acid)} + .sidenav a .lb{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} @@ -95,9 +122,9 @@