7635ed7721
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.
63 lines
2.6 KiB
JavaScript
63 lines
2.6 KiB
JavaScript
// 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");
|
|
|
|
// Inject the picker into the topnav's right side when one exists.
|
|
// Falls back to a fixed-position pill (bottom-right) for pages without
|
|
// a topnav, so the choice is always available.
|
|
function paintPicker() {
|
|
var nav = document.querySelector(".topnav");
|
|
var host = nav || document.body;
|
|
var mount = document.createElement("div");
|
|
mount.className = "font-picker";
|
|
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>';
|
|
if (nav) {
|
|
// Put it just before the sign-in link if present, else append.
|
|
var portalLink = nav.querySelector("a.portal");
|
|
if (portalLink) nav.insertBefore(mount, portalLink);
|
|
else nav.appendChild(mount);
|
|
} else {
|
|
mount.classList.add("font-picker-float");
|
|
host.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();
|
|
}
|
|
})();
|