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

site-theseus-x: full-width topnav, Sirius.X tab icon

Browse source 
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.
This commit is contained in:
Local Dev 2026-09-20 16:17:08 +02:00
parent d5b8c6b0b2
commit 7d12f97d39
3 changed files with 38 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
extensions/index.html
View file

@ -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 @@
<a href="/">Home</a>
<a href="/plug-ins/">Plug-ins</a>
<a class="here" href="./">Extensions</a>
<a href="https://sirius.x/" title="Register a BCNR name">sirius.x</a>
<a href="https://sirius.x/" title="Register a BCNR name"><svg class="tabicon" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg>Sirius<span class="g">.X</span></a>
<a class="get" href="/#download">Get Theseus</a>
</nav>

25
index.html
View file

@ -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 @@
<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 href="https://sirius.x/" title="Register a BCNR name"><svg class="tabicon" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg>Sirius<span class="g">.X</span></a>
<a class="get" href="#download">Get Theseus</a>
</nav>

21
plug-ins/index.html
View file

@ -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 @@
<a href="/">Home</a>
<a class="here" href="./">Plug-ins</a>
<a href="/extensions/">Extensions</a>
<a href="https://sirius.x/" title="Register a BCNR name">sirius.x</a>
<a href="https://sirius.x/" title="Register a BCNR name"><svg class="tabicon" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg>Sirius<span class="g">.X</span></a>
<a class="get" href="/#download">Get Theseus</a>
</nav>