From e140a765915aa38524a6856980e94f83b563a976 Mon Sep 17 00:00:00 2001 From: Silent Mode Date: Sun, 4 Oct 2026 21:21:08 +0200 Subject: [PATCH] site/bergamot: ship shared.css + favicon.svg inside the bucket MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Theseus serves bergamot.x from its own Sia bucket (bns/bergamot/), so a href="/shared.css" on the page resolves to bns://bergamot.x/shared.css — not to the silentmode.st root. The ICANN mirror hid this because /shared.css exists at the silentmode.st root; via BNS the stylesheet 404'd and the page rendered unstyled. Copying the two root assets into the bucket keeps the one href working across all three serving paths (ICANN, gateway, BNS). --- bergamot/favicon.svg | 9 +++ bergamot/shared.css | 178 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 187 insertions(+) create mode 100644 bergamot/favicon.svg create mode 100644 bergamot/shared.css diff --git a/bergamot/favicon.svg b/bergamot/favicon.svg new file mode 100644 index 0000000..d963e50 --- /dev/null +++ b/bergamot/favicon.svg @@ -0,0 +1,9 @@ + + + Silent Mode + + + diff --git a/bergamot/shared.css b/bergamot/shared.css new file mode 100644 index 0000000..55d04a1 --- /dev/null +++ b/bergamot/shared.css @@ -0,0 +1,178 @@ +/* Silent Mode — shared design tokens and component styles. + Every page under silentmode.st links this file so a colour or a control style + only has to change once. Page-specific bits (search UI, download listing, + registration modal) stay in the page. */ + +:root{ + --bg:#0b0e14; + --panel:#141a24; + --panel2:#18202c; + --line:rgba(255,255,255,.09); + --ink:#e7eaf1; + --mut:#8b98a9; + --dim:#7a8496; /* was #5e6678 — 3.4:1, failed AA for fine print */ + --acid:#d6ff3d; + /* semantic accents used to colour-code content sources across pages */ + --chain:#d6ff3d; + --sia:#b39ddb; + --srv:#4fd1a5; + --tor:#a98bd8; + --ok:#4fd1a5; + --taken:#f6768a; + --warn:#ffc75f; +} + +*{box-sizing:border-box} +html{scroll-behavior:smooth} +body{ + margin:0; + background:radial-gradient(1100px 560px at 50% -12%,#16202e,var(--bg)); + color:var(--ink); + font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; + min-height:100vh; +} +a{color:var(--acid)} + +/* ============ top nav ============ */ +/* Inlined by each page. Sticky so navigation stays reachable on long pages. + The `.here` class marks the current section. */ +.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 .brand{ + font-weight:600;color:var(--ink);text-decoration:none; + margin-right:14px;font-size:15px;letter-spacing:.2px; +} +.topnav .brand .g{color:var(--acid)} +.topnav a{ + color:var(--mut);text-decoration:none; + padding:9px 12px;border-radius:8px;font-size:14px; +} +.topnav a:hover{color:var(--ink);background:var(--panel)} +.topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)} + +/* ============ layout ============ */ +.wrap{max-width:980px;margin:0 auto;padding:0 1.2rem} +.wrap.narrow{max-width:820px} + +header.hero{text-align:center;padding:4.5rem 1.2rem 2.4rem} +header.hero .mark{font-size:58px;line-height:1} +h1{font-size:clamp(2rem,5vw,3rem);margin:.5rem 0 .3rem;letter-spacing:.4px} +h1 .g{color:var(--acid)} +.tag{color:var(--mut);font-size:1.1rem;max-width:660px;margin:.4rem auto 0} + +section{padding:2.8rem 0;border-top:1px solid var(--line)} +section.plain{border-top:none} +h2{font-size:1.55rem;margin:0 0 .4rem} +h3{font-size:1.05rem;margin:0 0 .3rem} +.lede{color:var(--mut);margin:0 0 1.6rem;max-width:680px} + +.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:1.7rem} + +/* ============ controls ============ */ +.btn{ + display:inline-block;text-decoration:none; + padding:11px 20px;border-radius:999px; + background:var(--panel2);color:var(--ink);font-size:14.5px; + border:1px solid var(--line);cursor:pointer;font-family:inherit; +} +.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)} +.btn.acid{background:var(--acid);color:#0b0e14;font-weight:600;border:none} +.btn:hover{filter:brightness(1.12)} +.btn:disabled{opacity:.45;cursor:not-allowed;filter:none} + +/* ============ cards & grids ============ */ +.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px} +.card{ + background:var(--panel);border:1px solid var(--line);border-radius:14px; + padding:18px 20px; +} +.card p{margin:0;color:var(--mut);font-size:14px} +.card h3{display:flex;align-items:center;gap:8px} + +/* status pills — every card that describes something has one */ +.pill{ + display:inline-block;font-size:10.5px;letter-spacing:.04em; + text-transform:uppercase;padding:2px 9px;border-radius:999px;margin-bottom:.6rem; +} +.p-live{background:rgba(79,209,165,.14);color:var(--srv)} +.p-alpha{background:rgba(214,255,61,.13);color:var(--acid)} +.p-designed{background:rgba(179,157,219,.14);color:var(--sia)} +.p-upcoming{background:rgba(139,152,169,.14);color:var(--mut)} + +/* ============ steps (numbered explainer lists) ============ */ +ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:10px} +ol.steps li{ + counter-increment:s;display:grid;grid-template-columns:26px 1fr;gap:4px 14px; + align-items:start; + background:var(--panel2);border:1px solid var(--line);border-radius:12px; + padding:15px 18px; +} +ol.steps li::before{ + content:counter(s);grid-column:1;grid-row:1;align-self:start; + display:grid;place-items:center; + width:26px;height:26px;border-radius:50%; + background:rgba(214,255,61,.14);color:var(--acid); + font-size:13px;font-weight:700; +} +ol.steps li > *{grid-column:2;min-width:0} +ol.steps b{color:var(--ink);font-size:14.5px} +ol.steps span{color:var(--mut);font-size:14px;line-height:1.62} + +/* ============ tables ============ */ +table{width:100%;border-collapse:collapse;font-size:14.5px} +th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top} +th{color:var(--dim);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em} + +/* code chips + preformatted */ +td code,code.inline,.mono{ + font-family:ui-monospace,monospace;font-size:13px; + background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px; +} +pre{ + background:#0e131b;border:1px solid var(--line);border-radius:10px; + padding:13px 16px;overflow-x:auto; + font-family:ui-monospace,monospace;font-size:13px;color:#c9d4e3;margin:.8rem 0; +} + +/* ============ source badges (chain / sia / server) ============ */ +.src{font-size:12px;padding:1px 8px;border-radius:999px;white-space:nowrap} +.s-chain{background:rgba(214,255,61,.13);color:var(--chain)} +.s-sia{background:rgba(179,157,219,.16);color:var(--sia)} +.s-srv{background:rgba(79,209,165,.14);color:var(--srv)} + +/* ============ notes (advisory boxes) ============ */ +.note{ + background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid); + border-radius:10px;padding:14px 18px;color:var(--mut);font-size:14px;margin-top:1.4rem; +} +.note b{color:var(--ink)} +.note.warn{border-left-color:var(--warn)} +.note.danger{border-left-color:var(--taken)} + +/* ============ footer ============ */ +footer{ + border-top:1px solid var(--line);padding:2.5rem 0 3.5rem; + color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem; +} +footer .fine{max-width:660px;margin:.8rem auto 0;line-height:1.7} + +/* ============ brand mark (inline SVG, replaces the emoji) ============ */ +.topnav .brand .logo{width:24px;height:16px;vertical-align:-2px;margin-right:8px} +.topnav .brand .logo .l1{stroke:var(--mut)} +.topnav .brand .logo .l2{stroke:var(--acid)} +.mark svg{width:150px;height:60px;display:block;margin:0 auto} +.mark .l1{stroke:var(--mut)} +.mark .l2{stroke:var(--acid)} + +/* ============ screenshots / figures ============ */ +figure.shot{margin:1.6rem 0 0;} +figure.shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 18px 48px rgba(0,0,0,.45)} +figure.shot figcaption{color:var(--dim);font-size:12.5px;margin-top:.6rem;text-align:center} +.card figure.shot{margin:.9rem 0 0} +.card figure.shot img{border-radius:8px;box-shadow:none}