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

sites: Ubuntu everywhere; opaque bottom rail on mobile

Browse source 
Fraunces/Ubuntu font picker is gone. theme.js used to persist the
choice in localStorage and paint a pill in the corner; now it just
sets data-font-cmp="ubuntu" on <html> so every page that already
carries the html[data-font-cmp="ubuntu"] rules in its stylesheet
switches to Ubuntu — the Bitcoin Cash brand face — on load. Same
one-line runtime on both sirius-x and hephaestus.x theme.js.

Mobile bottom nav rail was rgba(11,14,20,.52) with no blur, so
whatever body text was scrolled behind it bled straight through the
half-transparent bar — first sentence of How it works ended up
visually merged with the sidebar icons on hephaestus.x, section
headings ran under the Sirius.x rail. Bumped to rgba(...,.94) and
added backdrop-filter:blur(12px); content underneath is now covered
instead of showing through. Same tweak on all six Sirius.X pages
plus Hephaestus.X home.
This commit is contained in:
Local Dev 2026-09-22 19:47:52 +02:00
parent b149fbb95b
commit 890af362b8
7 changed files with 18 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
admin/index.html
View file

@ -59,7 +59,7 @@
:root{--sn-w:0}
body{padding-bottom:64px}
.sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
padding:4px;flex-direction:row;background:rgba(11,14,20,.94);backdrop-filter:blur(12px);
display:flex;justify-content:space-around;overflow-x:auto;
/* Hide horizontal scrollbar chrome; icons still swipe/scroll when they overflow. */
scrollbar-width:none;-ms-overflow-style:none}

2
brand/index.html
View file

@ -64,7 +64,7 @@
:root{--sn-w:0}
body{padding-bottom:64px}
.sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
padding:4px;flex-direction:row;background:rgba(11,14,20,.94);backdrop-filter:blur(12px);
display:flex;justify-content:space-around;overflow-x:auto;
/* Hide horizontal scrollbar chrome; icons still swipe/scroll when they overflow. */
scrollbar-width:none;-ms-overflow-style:none}

2
docs/index.html
View file

@ -66,7 +66,7 @@
:root{--sn-w:0}
body{padding-bottom:64px}
.sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
padding:4px;flex-direction:row;background:rgba(11,14,20,.94);backdrop-filter:blur(12px);
display:flex;justify-content:space-around;overflow-x:auto;
/* Hide the horizontal scrollbar chrome — the icons still scroll if
they overflow, they just don't paint a green Windows scroll rail

2
index.html
View file

@ -117,7 +117,7 @@
:root{--sn-w:0}
body{padding-bottom:64px}
.sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
padding:4px;flex-direction:row;background:rgba(11,14,20,.94);backdrop-filter:blur(12px);
display:flex;justify-content:space-around;overflow-x:auto;
/* Hide horizontal scrollbar chrome; icons still swipe/scroll when they overflow. */
scrollbar-width:none;-ms-overflow-style:none}

112
js/theme.js
View file

@ -1,104 +1,16 @@
// Sirius.X font picker — reader chooses between Fraunces (Silent Mode
// family — editorial serif, default) and Ubuntu (Bitcoin Cash brand
// font — humanist sans). Persisted in localStorage under 'sirius-font'.
// Sirius.X font — Ubuntu, always. The Fraunces/Ubuntu toggle was
// removed 2026-09-22; readers on every page get the Bitcoin Cash brand
// font without a picker in the corner. The runtime attribute goes on
// <html> so the same `html[data-font-cmp="ubuntu"]` rules already
// embedded in every page's stylesheet take effect on load.
//
// The runtime attribute goes on <html> — pages that want to opt out
// simply omit the include. The actual font-swap CSS is defined per
// page (in each page's <style> block) so it can override the page's
// own font-family declarations at high specificity; this script only
// toggles the attribute and paints the picker UI.
// This file stays in place (rather than being deleted) so pages that
// still reference it via <script src="js/theme.js"> keep loading a
// valid module. Delete the include from a page and the attribute is
// no longer set, and Fraunces returns.
(function () {
var KEY = "sirius-font";
var saved = null;
try { saved = localStorage.getItem(KEY); } catch (e) { /* private mode */ }
var initial = saved === "ubuntu" ? "ubuntu" : "fraunces";
if (initial === "ubuntu") document.documentElement.setAttribute("data-font-cmp", "ubuntu");
// Inject the picker's own base + positioning styles once, so pages
// that never declared `.font-picker` in their stylesheet still render
// the widget correctly (previously the toggle appeared as raw browser
// buttons on pages that forgot to copy the CSS block). The styles are
// scoped to `.font-picker-float` so pages that DO define their own
// `.font-picker` styling win via source-order (this block runs first).
(function ensureStyles() {
if (document.getElementById("sirius-font-picker-style")) return;
var css =
// Every dimension is reset explicitly (bottom/left/height/width auto,
// margin 0, line-height 1) so this block wins over any per-page
// `.font-picker`/`.font-picker-float` styling — earlier pages declared
// .font-picker-float with bottom:20px, which combined with top:56px
// stretched the pill down the full viewport height.
".font-picker-float{" +
"position:fixed !important;top:56px !important;right:20px !important;" +
"bottom:auto !important;left:auto !important;" +
"height:auto !important;width:auto !important;margin:0 !important;" +
"z-index:30 !important;" +
"display:inline-flex !important;align-items:center;gap:2px;padding:2px !important;" +
"background:rgba(11,14,20,.82) !important;border:1px solid rgba(255,255,255,.08) !important;" +
"border-radius:999px !important;backdrop-filter:blur(10px);" +
"box-shadow:0 6px 20px rgba(0,0,0,.35);" +
"font-family:'JetBrains Mono',ui-monospace,monospace !important;" +
"font-size:10px !important;line-height:1 !important;" +
"letter-spacing:.12em !important;text-transform:uppercase !important" +
"}" +
".font-picker-float button{" +
"background:transparent !important;border:none !important;color:#6a7488 !important;" +
"padding:4px 10px !important;margin:0 !important;border-radius:999px !important;cursor:pointer;" +
"font-family:inherit !important;font-size:inherit !important;line-height:1 !important;" +
"letter-spacing:inherit !important;" +
"text-transform:inherit !important;transition:color .12s" +
"}" +
".font-picker-float button:hover{color:#f1f4fa !important}" +
".font-picker-float button.active{background:#d6ff3d !important;color:#050810 !important;font-weight:600 !important}" +
// On mobile the pill stays in the top-right — earlier it flipped to
// bottom-right so it wouldn't crowd narrow nav layouts, but the mobile
// sidenav now lives at the bottom edge and the two collided. Keep the
// toggle where readers already know to look; just tighten the offset a
// touch so it sits against the corner.
"@media (max-width:520px){.font-picker-float{top:12px !important;right:12px !important;bottom:auto !important}}";
var el = document.createElement("style");
el.id = "sirius-font-picker-style";
el.textContent = css;
document.head.appendChild(el);
})();
// Mount the picker as a floating pill in the page's top-right corner,
// just under the sticky nav's sign-in button. Was previously injected
// inline in the topnav; that placement crowded the nav on narrow
// viewports and left users hunting for the toggle. A fixed-position
// widget keeps the choice equally reachable on every page — including
// ones without a topnav — and does not participate in nav layout.
function paintPicker() {
var mount = document.createElement("div");
mount.className = "font-picker font-picker-float";
mount.setAttribute("role", "group");
mount.setAttribute("aria-label", "Reading font");
mount.innerHTML =
'<button data-font="fraunces" title="Silent Mode family (Fraunces)">Fraunces</button>' +
'<button data-font="ubuntu" title="Bitcoin Cash brand font (Ubuntu)">Ubuntu</button>';
document.body.appendChild(mount);
var btns = mount.querySelectorAll("button");
function refresh(v) {
for (var i = 0; i < btns.length; i++) {
btns[i].classList.toggle("active", btns[i].dataset.font === v);
}
}
refresh(initial);
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function (e) {
var v = e.currentTarget.dataset.font;
if (v === "ubuntu") document.documentElement.setAttribute("data-font-cmp", "ubuntu");
else document.documentElement.removeAttribute("data-font-cmp");
try { localStorage.setItem(KEY, v); } catch (e2) { /* ignore */ }
refresh(v);
});
}
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", paintPicker);
} else {
paintPicker();
}
try {
document.documentElement.setAttribute("data-font-cmp", "ubuntu");
} catch (e) { /* prehistoric browser; give up quietly */ }
})();

2
theseus/index.html
View file

@ -71,7 +71,7 @@
:root{--sn-w:0}
body{padding-bottom:64px}
.sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
padding:4px;flex-direction:row;background:rgba(11,14,20,.94);backdrop-filter:blur(12px);
display:flex;justify-content:space-around;overflow-x:auto;
/* Hide horizontal scrollbar chrome; icons still swipe/scroll when they overflow. */
scrollbar-width:none;-ms-overflow-style:none}

2
tld.html
View file

@ -93,7 +93,7 @@
:root{--sn-w:0}
body{padding-bottom:64px}
.sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
padding:4px;flex-direction:row;background:rgba(11,14,20,.94);backdrop-filter:blur(12px);
display:flex;justify-content:space-around;overflow-x:auto;
/* Hide horizontal scrollbar chrome; icons still swipe/scroll when they overflow. */
scrollbar-width:none;-ms-overflow-style:none}