feat(sirius-x): Deviant sky palette + Fraunces/Ubuntu reader toggle
Design translated from the /design canvas review. Sirius.X now shares
Deviant's "signal" theme background (layered sky-rim/mid gradients over
#050810) and the Silent Mode family typography stack.
Typography:
Fraunces (opsz variable serif) headings h1/h2/h3
DM Sans body / UI
JetBrains Mono code, hashes, mono cells
Ubuntu opt-in Bitcoin Cash brand font,
swaps everything at :root when
<html data-font-cmp="ubuntu">
All via Google Fonts, one <link> per page.
Font picker (js/theme.js):
Small pill in the topnav (Fraunces default / Ubuntu alt) — persisted
to localStorage.sirius-font. Sets the data-font-cmp attribute; the
swap CSS lives in each page's <style> block so !important overrides
page-local font-family declarations at the necessary specificity.
Mono elements stay JetBrains Mono under both fonts.
Palette (cool sky vs old flat dark navy):
--bg #0b0e14 → #050810
--panel2 #18202c → #0a0f1c (matches Deviant --sky-mid)
--line rgba(255,255,255,.09) → .06
--ink #e7eaf1 → #f1f4fa
--mut #8b98a9 → #b8c2d4
--dim #5e6678 → #6a7488
new: --sky-rim #131a2a, --chain-native #0AC18E (BCH brand green,
reserved for chain-native badges/proofs like the Bitcoin.Cash
body copy)
Copy — "no renewals" softened everywhere it appeared. Renewals will
be a per-TLD policy set by each TLD owner; the flat claim was wrong
across the board. Landing card, tld.html hero and body, plus the
og:description all updated.
Applied to: index.html, portal.html, tld.html, theseus/index.html,
brand/index.html, docs/index.html, admin/index.html.
2026-09-10 00:25:18 +02:00
|
|
|
// 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'.
|
|
|
|
|
//
|
|
|
|
|
// 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.
|
|
|
|
|
|
|
|
|
|
(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");
|
|
|
|
|
|
site-sirius-x: use the Sirius.X brand mark, drop trailing slashes
Star emoji swapped for the site's own 4-point sparkle mark — same SVG
that ships as the favicon — everywhere it appeared: the topnav brand,
the hero mark, the "you're here" pill on the family-of-.x panel, the
footer, register.html, portal.html, tld.html, market/, docs/, admin/,
brand/, storage/, theseus/, studio.html, site-footer.js. Anyone who
opens Sirius.X now sees the acid-green sparkle instead of a browser
star emoji.
Internal links normalised to no trailing slash — href="./theseus/"
became href="./theseus" (Theseus, docs, market, admin). Cleaner URLs
in the address bar and no double-slash redirect step on the mirrors.
2026-09-20 17:49:04 +02:00
|
|
|
// 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}" +
|
2026-09-22 01:10:05 +02:00
|
|
|
// 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}}";
|
site-sirius-x: use the Sirius.X brand mark, drop trailing slashes
Star emoji swapped for the site's own 4-point sparkle mark — same SVG
that ships as the favicon — everywhere it appeared: the topnav brand,
the hero mark, the "you're here" pill on the family-of-.x panel, the
footer, register.html, portal.html, tld.html, market/, docs/, admin/,
brand/, storage/, theseus/, studio.html, site-footer.js. Anyone who
opens Sirius.X now sees the acid-green sparkle instead of a browser
star emoji.
Internal links normalised to no trailing slash — href="./theseus/"
became href="./theseus" (Theseus, docs, market, admin). Cleaner URLs
in the address bar and no double-slash redirect step on the mirrors.
2026-09-20 17:49:04 +02:00
|
|
|
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.
|
feat(sirius-x): Deviant sky palette + Fraunces/Ubuntu reader toggle
Design translated from the /design canvas review. Sirius.X now shares
Deviant's "signal" theme background (layered sky-rim/mid gradients over
#050810) and the Silent Mode family typography stack.
Typography:
Fraunces (opsz variable serif) headings h1/h2/h3
DM Sans body / UI
JetBrains Mono code, hashes, mono cells
Ubuntu opt-in Bitcoin Cash brand font,
swaps everything at :root when
<html data-font-cmp="ubuntu">
All via Google Fonts, one <link> per page.
Font picker (js/theme.js):
Small pill in the topnav (Fraunces default / Ubuntu alt) — persisted
to localStorage.sirius-font. Sets the data-font-cmp attribute; the
swap CSS lives in each page's <style> block so !important overrides
page-local font-family declarations at the necessary specificity.
Mono elements stay JetBrains Mono under both fonts.
Palette (cool sky vs old flat dark navy):
--bg #0b0e14 → #050810
--panel2 #18202c → #0a0f1c (matches Deviant --sky-mid)
--line rgba(255,255,255,.09) → .06
--ink #e7eaf1 → #f1f4fa
--mut #8b98a9 → #b8c2d4
--dim #5e6678 → #6a7488
new: --sky-rim #131a2a, --chain-native #0AC18E (BCH brand green,
reserved for chain-native badges/proofs like the Bitcoin.Cash
body copy)
Copy — "no renewals" softened everywhere it appeared. Renewals will
be a per-TLD policy set by each TLD owner; the flat claim was wrong
across the board. Landing card, tld.html hero and body, plus the
og:description all updated.
Applied to: index.html, portal.html, tld.html, theseus/index.html,
brand/index.html, docs/index.html, admin/index.html.
2026-09-10 00:25:18 +02:00
|
|
|
function paintPicker() {
|
|
|
|
|
var mount = document.createElement("div");
|
site-sirius-x: use the Sirius.X brand mark, drop trailing slashes
Star emoji swapped for the site's own 4-point sparkle mark — same SVG
that ships as the favicon — everywhere it appeared: the topnav brand,
the hero mark, the "you're here" pill on the family-of-.x panel, the
footer, register.html, portal.html, tld.html, market/, docs/, admin/,
brand/, storage/, theseus/, studio.html, site-footer.js. Anyone who
opens Sirius.X now sees the acid-green sparkle instead of a browser
star emoji.
Internal links normalised to no trailing slash — href="./theseus/"
became href="./theseus" (Theseus, docs, market, admin). Cleaner URLs
in the address bar and no double-slash redirect step on the mirrors.
2026-09-20 17:49:04 +02:00
|
|
|
mount.className = "font-picker font-picker-float";
|
feat(sirius-x): Deviant sky palette + Fraunces/Ubuntu reader toggle
Design translated from the /design canvas review. Sirius.X now shares
Deviant's "signal" theme background (layered sky-rim/mid gradients over
#050810) and the Silent Mode family typography stack.
Typography:
Fraunces (opsz variable serif) headings h1/h2/h3
DM Sans body / UI
JetBrains Mono code, hashes, mono cells
Ubuntu opt-in Bitcoin Cash brand font,
swaps everything at :root when
<html data-font-cmp="ubuntu">
All via Google Fonts, one <link> per page.
Font picker (js/theme.js):
Small pill in the topnav (Fraunces default / Ubuntu alt) — persisted
to localStorage.sirius-font. Sets the data-font-cmp attribute; the
swap CSS lives in each page's <style> block so !important overrides
page-local font-family declarations at the necessary specificity.
Mono elements stay JetBrains Mono under both fonts.
Palette (cool sky vs old flat dark navy):
--bg #0b0e14 → #050810
--panel2 #18202c → #0a0f1c (matches Deviant --sky-mid)
--line rgba(255,255,255,.09) → .06
--ink #e7eaf1 → #f1f4fa
--mut #8b98a9 → #b8c2d4
--dim #5e6678 → #6a7488
new: --sky-rim #131a2a, --chain-native #0AC18E (BCH brand green,
reserved for chain-native badges/proofs like the Bitcoin.Cash
body copy)
Copy — "no renewals" softened everywhere it appeared. Renewals will
be a per-TLD policy set by each TLD owner; the flat claim was wrong
across the board. Landing card, tld.html hero and body, plus the
og:description all updated.
Applied to: index.html, portal.html, tld.html, theseus/index.html,
brand/index.html, docs/index.html, admin/index.html.
2026-09-10 00:25:18 +02:00
|
|
|
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>';
|
site-sirius-x: use the Sirius.X brand mark, drop trailing slashes
Star emoji swapped for the site's own 4-point sparkle mark — same SVG
that ships as the favicon — everywhere it appeared: the topnav brand,
the hero mark, the "you're here" pill on the family-of-.x panel, the
footer, register.html, portal.html, tld.html, market/, docs/, admin/,
brand/, storage/, theseus/, studio.html, site-footer.js. Anyone who
opens Sirius.X now sees the acid-green sparkle instead of a browser
star emoji.
Internal links normalised to no trailing slash — href="./theseus/"
became href="./theseus" (Theseus, docs, market, admin). Cleaner URLs
in the address bar and no double-slash redirect step on the mirrors.
2026-09-20 17:49:04 +02:00
|
|
|
document.body.appendChild(mount);
|
feat(sirius-x): Deviant sky palette + Fraunces/Ubuntu reader toggle
Design translated from the /design canvas review. Sirius.X now shares
Deviant's "signal" theme background (layered sky-rim/mid gradients over
#050810) and the Silent Mode family typography stack.
Typography:
Fraunces (opsz variable serif) headings h1/h2/h3
DM Sans body / UI
JetBrains Mono code, hashes, mono cells
Ubuntu opt-in Bitcoin Cash brand font,
swaps everything at :root when
<html data-font-cmp="ubuntu">
All via Google Fonts, one <link> per page.
Font picker (js/theme.js):
Small pill in the topnav (Fraunces default / Ubuntu alt) — persisted
to localStorage.sirius-font. Sets the data-font-cmp attribute; the
swap CSS lives in each page's <style> block so !important overrides
page-local font-family declarations at the necessary specificity.
Mono elements stay JetBrains Mono under both fonts.
Palette (cool sky vs old flat dark navy):
--bg #0b0e14 → #050810
--panel2 #18202c → #0a0f1c (matches Deviant --sky-mid)
--line rgba(255,255,255,.09) → .06
--ink #e7eaf1 → #f1f4fa
--mut #8b98a9 → #b8c2d4
--dim #5e6678 → #6a7488
new: --sky-rim #131a2a, --chain-native #0AC18E (BCH brand green,
reserved for chain-native badges/proofs like the Bitcoin.Cash
body copy)
Copy — "no renewals" softened everywhere it appeared. Renewals will
be a per-TLD policy set by each TLD owner; the flat claim was wrong
across the board. Landing card, tld.html hero and body, plus the
og:description all updated.
Applied to: index.html, portal.html, tld.html, theseus/index.html,
brand/index.html, docs/index.html, admin/index.html.
2026-09-10 00:25:18 +02:00
|
|
|
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();
|
|
|
|
|
}
|
|
|
|
|
})();
|