From 7d12f97d39f099c5f1841ce68c16ca406654f583 Mon Sep 17 00:00:00 2001 From: Local Dev Date: Sun, 20 Sep 2026 16:17:08 +0200 Subject: [PATCH] site-theseus-x: full-width topnav, Sirius.X tab icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sidebar was drawing above the topnav border line — the sticky topnav only spanned the content column, so where the sidebar met it a T-shape break was visible. Topnav is now position:fixed spanning the full page width, and the sidebar is anchored to var(--tn-h)=52px so it sits cleanly below the topnav border on all breakpoints. Also: the sirius.x tab is now capitalised Sirius.X and carries its own brand mark (the 4-point sparkle from sirius.x's own favicon) so the tabs read as three named things — Home, Plug-ins, Extensions, Sirius.X — not one lowercase outlier. A shared .topnav a .g rule paints the .X suffix acid green. --- extensions/index.html | 21 ++++++++++++--------- index.html | 25 ++++++++++++++----------- plug-ins/index.html | 21 ++++++++++++--------- 3 files changed, 38 insertions(+), 29 deletions(-) diff --git a/extensions/index.html b/extensions/index.html index d54a7d3..6b54af3 100644 --- a/extensions/index.html +++ b/extensions/index.html @@ -23,25 +23,28 @@ color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh} a{color:var(--acid)} .wrap{max-width:900px;margin:0 auto;padding:0 1.2rem} - .topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap; - padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px); + .topnav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap; + padding:10px 1.2rem;background:rgba(11,14,20,.88);backdrop-filter:blur(10px); border-bottom:1px solid var(--line)} .topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px;display:flex;align-items:center;gap:8px} .topnav .brand .g{color:var(--acid)} .topnav .brand svg{width:20px;height:20px} - .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px} + .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px; + display:inline-flex;align-items:center;gap:6px} .topnav a:hover{color:var(--ink);background:var(--panel)} .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)} + .topnav a .g{color:var(--acid)} + .topnav a svg.tabicon{width:15px;height:15px;flex:none} .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)} /* 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; + :root{--sn-w:220px;--tn-h:52px} + body{padding-left:var(--sn-w);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,.82);backdrop-filter:blur(10px); - border-right:1px solid var(--line);padding:74px 14px 22px 18px; + border-right:1px solid var(--line);padding:22px 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} @@ -55,7 +58,7 @@ .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{padding:22px 6px} .sidenav .lbl{display:none} .sidenav a{justify-content:center;padding:12px 4px;gap:0} .sidenav a .lb{display:none} @@ -124,7 +127,7 @@ Home Plug-ins Extensions - sirius.x + Sirius.X Get Theseus diff --git a/index.html b/index.html index f66eb5e..0a009ab 100644 --- a/index.html +++ b/index.html @@ -28,27 +28,30 @@ color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh} a{color:var(--acid)} .wrap{max-width:980px;margin:0 auto;padding:0 1.2rem} - .topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap; - padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px); + .topnav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap; + padding:10px 1.2rem;background:rgba(11,14,20,.88);backdrop-filter:blur(10px); border-bottom:1px solid var(--line)} .topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px;display:flex;align-items:center;gap:8px} .topnav .brand .g{color:var(--acid)} .topnav .brand svg{width:20px;height:20px} - .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px} + .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px; + display:inline-flex;align-items:center;gap:6px} .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)} + .topnav a .g{color:var(--acid)} + .topnav a svg.tabicon{width:15px;height:15px;flex:none} /* 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; + 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)} + .sidenav{position:fixed;top:var(--tn-h);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; + border-right:1px solid var(--line);padding:22px 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} @@ -63,7 +66,7 @@ /* Medium: shrink to an icon rail */ @media (max-width:1180px){ :root{--sn-w:64px} - .sidenav{padding:74px 6px 22px 6px} + .sidenav{padding:22px 6px} .sidenav .lbl{display:none} .sidenav a{justify-content:center;padding:12px 4px;gap:0} .sidenav a .lb{display:none} @@ -145,7 +148,7 @@ Home Plug-ins Extensions - sirius.x + Sirius.X Get Theseus diff --git a/plug-ins/index.html b/plug-ins/index.html index d553e58..35ab320 100644 --- a/plug-ins/index.html +++ b/plug-ins/index.html @@ -22,24 +22,27 @@ color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh} a{color:var(--acid)} .wrap{max-width:900px;margin:0 auto;padding:0 1.2rem} - .topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap; - padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} + .topnav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap; + padding:10px 1.2rem;background:rgba(11,14,20,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px;display:flex;align-items:center;gap:8px} .topnav .brand .g{color:var(--acid)} .topnav .brand svg{width:20px;height:20px} - .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px} + .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px; + display:inline-flex;align-items:center;gap:6px} .topnav a:hover{color:var(--ink);background:var(--panel)} .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)} + .topnav a .g{color:var(--acid)} + .topnav a svg.tabicon{width:15px;height:15px;flex:none} .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)} /* 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; + :root{--sn-w:220px;--tn-h:52px} + body{padding-left:var(--sn-w);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,.82);backdrop-filter:blur(10px); - border-right:1px solid var(--line);padding:74px 14px 22px 18px; + border-right:1px solid var(--line);padding:22px 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} @@ -53,7 +56,7 @@ .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{padding:22px 6px} .sidenav .lbl{display:none} .sidenav a{justify-content:center;padding:12px 4px;gap:0} .sidenav a .lb{display:none} @@ -116,7 +119,7 @@ Home Plug-ins Extensions - sirius.x + Sirius.X Get Theseus