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

site: fix homepage product count, drop stray brand-page copy, add GOTCHAS

Browse source 
- index.html said 'five products' / 'all five' while listing seven cards
- deviant/brand/social/index.html was a copy of brand/index.html with every
  relative link broken (assets live one level up); never deployed, removed
- GOTCHAS.md: never rsync --delete site/ to the VPS (deviant/ there is owned
  by D:/Dev/Deviant/site), manifest lives in three places, archive script

Also shipped to VPS this session (no source change): releases-manifest.json
under /opt/silent-mode/site/ was stuck at 0.3.3 since 0.3.4; now 0.3.16.
This commit is contained in:
Local Dev 2026-09-07 21:06:25 +02:00
parent 09a277f3c7
commit e82db4c653
3 changed files with 46 additions and 373 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
GOTCHAS.md Normal file
View file

@ -0,0 +1,43 @@
# site/ — gotchas
Hand-authored static tree for **silentmode.st**. No build step. Served by nginx
from `/opt/silent-mode/site/` on the VPS (ssh alias `silentmode`), and mirrored
to Sia (`s3://bns/silentmode/` → `silentmode.bch`) by the
`silentmode-sia-sync.timer` on the VPS every 5 minutes. Anything that lands in
`/opt/silent-mode/site/` reaches the `.bch` mirror on its own; you do not need to
run `sia-upload.js` for site files any more.
## Never `rsync --delete` (or blanket-overwrite) `site/` → the VPS
`/opt/silent-mode/site/` holds far more than this folder: `sirius-x/`,
`deviant/` (the full Deviant site incl. `wallet/`, `artemision/`, `katalogos/`,
`agora/`), `apps/`, `code/`. Those are deployed from **other repos**. In
particular `site/deviant/` here is a **stale Aug-31 copy**; the canonical
source is `D:\Dev\Deviant\site\deviant\` and the VPS already carries the newer
Sep-1 pages. Pushing this folder wholesale would roll them back.
Ship **individual files**: `scp site/<path> silentmode:/opt/silent-mode/site/<path>`.
## The release manifest lives in three places
- `https://dl.silentmode.st/releases-manifest.json` — canonical
(`/opt/silent-mode/dl/`), what `releases.silentmode.bch` points at.
- `/opt/silent-mode/site/releases-manifest.json` — what `tools/index.html`
links as `../releases-manifest.json`, and what the Sia mirror syncs.
- `site/releases-manifest.json` — the committed source of both.
The ship checklist (`Ship Theseus …` commits) must scp it to **both** VPS
paths. It was missed for `site/` from 0.3.4 through 0.3.16 (found 2026-09-07):
the HTML pages were current while the JSON next to them still said 0.3.3.
## Old Theseus builds fill the VPS disk
`scripts/theseus-vps-archive.sh <version>` moves everything older than N-1 to
Sia and deletes it from `/opt/silent-mode/dl/`. Run it after every ship; when
it is skipped the 48 GB disk climbs ~245 MB per release.
## Pages that are not silentmode.st pages
`hephaestus.x/` is the landing for the `.x` name and is served from Sia via the
gateway (`navigate.st/bns/hephaestus.x/`); the copy under `/opt/silent-mode/site/`
is just parity. `choose/` has no top nav on purpose.

370
deviant/brand/social/index.html
View file

@ -1,370 +0,0 @@
<!doctype html>
<html lang="en" data-theme="signal">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BNS gateways (navigate.st/bns/) don't inject <base>, so document.baseURI omits
the deepest URL segment and relative img/hrefs land in the wrong directory.
Explicit <base href="./"> forces resolution against the actual current URL. -->
<base href="./">
<title>Deviant — Brand assets</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--sky-deep: #050810;
--sky-mid: #0a0f1c;
--sky-rim: #131a2a;
--ink-soft: #b8c2d4;
--ink: #d6dde9;
--ink-bright: #f1f4fa;
--muted: #6a7488;
--acid: #d6ff3d;
--acid-glow: rgba(214, 255, 61, 0.55);
--acid-halo: rgba(214, 255, 61, 0.22);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: radial-gradient(ellipse at 30% 20%, var(--sky-mid), var(--sky-deep) 70%, #02040a);
color: var(--ink);
font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
min-height: 100vh;
padding: 48px 32px 96px;
}
header {
max-width: 1400px;
margin: 0 auto 56px;
}
.wordmark {
font-family: 'Fraunces', Georgia, serif;
font-weight: 500;
font-size: 56px;
letter-spacing: -1.5px;
color: var(--ink-bright);
margin: 0 0 6px;
line-height: 1;
}
.wordmark::after {
content: '.';
color: var(--acid);
}
.lede {
color: var(--ink-soft);
font-size: 17px;
margin: 0 0 4px;
max-width: 640px;
}
.lede small {
color: var(--muted);
display: block;
margin-top: 8px;
font-size: 13px;
font-family: 'JetBrains Mono', 'DM Mono', monospace;
}
main {
max-width: 1400px;
margin: 0 auto;
}
section {
margin: 0 0 56px;
}
.section-head {
display: flex;
align-items: baseline;
gap: 16px;
margin: 0 0 24px;
padding-bottom: 12px;
border-bottom: 1px solid var(--sky-rim);
}
.section-head h2 {
font-family: 'Fraunces', Georgia, serif;
font-weight: 400;
font-size: 28px;
color: var(--ink-bright);
margin: 0;
}
.section-head .count {
color: var(--muted);
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
}
.grid.wide {
grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
}
.card {
background: var(--sky-mid);
border: 1px solid var(--sky-rim);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 120ms ease, transform 120ms ease;
}
.card:hover {
border-color: rgba(214, 255, 61, 0.35);
transform: translateY(-1px);
}
.preview {
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%),
linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-color: #060912;
padding: 24px;
min-height: 180px;
}
.preview.tight { padding: 12px; }
.preview.onlight { background: #f6f7fa; background-size: 0; }
.preview img {
max-width: 100%;
height: auto;
display: block;
}
.preview .frame-avatar img {
border-radius: 50%;
overflow: hidden;
}
.meta {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.meta .name {
color: var(--ink-bright);
font-weight: 600;
font-size: 15px;
}
.meta .desc {
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.meta .file {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-soft);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--sky-rim);
}
.meta .file a {
color: var(--acid);
text-decoration: none;
opacity: 0.9;
}
.meta .file a:hover { opacity: 1; text-decoration: underline; }
.meta .file .size {
color: var(--muted);
font-size: 11px;
}
.meta .file .png {
color: var(--ink-soft);
font-size: 11px;
border-left: 1px solid var(--sky-rim);
padding-left: 8px;
margin-left: 4px;
}
.meta .file .png a { color: var(--ink-soft); opacity: 1; }
.meta .file .png a:hover { color: var(--acid); }
.banner {
background: rgba(214, 255, 61, 0.08);
border: 1px solid rgba(214, 255, 61, 0.3);
border-radius: 10px;
padding: 14px 18px;
margin: 0 0 32px;
color: var(--ink);
font-size: 14px;
line-height: 1.5;
}
.banner strong { color: var(--acid); }
footer {
max-width: 1400px;
margin: 64px auto 0;
padding-top: 24px;
border-top: 1px solid var(--sky-rim);
color: var(--muted);
font-size: 13px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
footer a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--sky-rim); }
footer a:hover { color: var(--acid); border-bottom-color: var(--acid); }
@media (max-width: 600px) {
body { padding: 32px 16px 64px; }
.wordmark { font-size: 40px; }
.grid, .grid.wide { grid-template-columns: 1fr; }
}
</style>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>
<body>
<header>
<h1 class="wordmark">Deviant brand</h1>
<p class="lede">Logos, icons and social-media assets. All primary files are SVG — scale-independent, editable in code, and (where text appears) load the site's own fonts via <code>@import</code>. Click any file name to open the raw SVG.
<small>Source: <a href="README.md" style="color: var(--ink-soft);">brand/README.md</a> · <a href="palette.md" style="color: var(--ink-soft);">brand/palette.md</a></small></p>
</header>
<main>
<p class="banner"><strong>Uploading to social media?</strong> SVG isn't accepted for profile avatars, headers, or post images by Twitter/X, GitHub, Discord, LinkedIn, Instagram, Facebook, or Slack. Every card below has a <code>PNG</code> link next to the SVG path — use those. Full PNG set at <a href="source/exports/" style="color: var(--ink-bright);">source/exports/</a>.</p>
<section>
<div class="section-head"><h2>Icons</h2><span class="count">2 files</span></div>
<div class="grid">
<article class="card">
<div class="preview tight"><img src="icon/icon-512.svg" alt="512×512 app icon" width="220" height="220"></div>
<div class="meta">
<div class="name">App icon (512)</div>
<div class="desc">OS launcher, PWA install, app-shell splash. Byte-identical to shells/app/public/icon.svg.</div>
<div class="file"><a href="icon/icon-512.svg">icon/icon-512.svg</a><span class="png"><a download href="source/exports/icon-512.png">PNG</a></span><span class="size">512 × 512</span></div>
</div>
</article>
<article class="card">
<div class="preview tight"><img src="icon/favicon.svg" alt="64×64 favicon" width="96" height="96"></div>
<div class="meta">
<div class="name">Favicon</div>
<div class="desc">Browser tab / tiny sizes. Simplified — no starfield, no glow.</div>
<div class="file"><a href="icon/favicon.svg">icon/favicon.svg</a><span class="png"><a download href="source/exports/favicon-64.png">64</a> · <a href="source/exports/favicon-32.png" download>32</a></span><span class="size">64 × 64</span></div>
</div>
</article>
</div>
</section>
<section>
<div class="section-head"><h2>Logos</h2><span class="count">3 files</span></div>
<div class="grid">
<article class="card">
<div class="preview tight"><img src="logo/deviant-mark.svg" alt="D-mark on dark" width="220" height="220"></div>
<div class="meta">
<div class="name">Mark — on dark</div>
<div class="desc">Orbital-crescent D + acid dot. For dark surfaces.</div>
<div class="file"><a href="logo/deviant-mark.svg">logo/deviant-mark.svg</a><span class="png"><a download href="source/exports/mark-512.png">PNG 512</a></span><span class="size">256 × 256</span></div>
</div>
</article>
<article class="card">
<div class="preview tight onlight"><img src="logo/deviant-mark-onlight.svg" alt="D-mark on light" width="220" height="220"></div>
<div class="meta">
<div class="name">Mark — on light</div>
<div class="desc">Inverted for print / light backgrounds. Ring softens, acid dot deepens to olive.</div>
<div class="file"><a href="logo/deviant-mark-onlight.svg">logo/deviant-mark-onlight.svg</a><span class="png"><a download href="source/exports/mark-onlight-512.png">PNG 512</a></span><span class="size">256 × 256</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="logo/deviant-wordmark.svg" alt="Wordmark" width="360"></div>
<div class="meta">
<div class="name">Wordmark</div>
<div class="desc">Mark + &ldquo;Deviant&rdquo; in Fraunces + &ldquo;POWER YOUR IDEAS.&rdquo; tagline. Header lockup.</div>
<div class="file"><a href="logo/deviant-wordmark.svg">logo/deviant-wordmark.svg</a><span class="png"><a download href="source/exports/wordmark-1440.png">PNG 1440</a></span><span class="size">720 × 180</span></div>
</div>
</article>
</div>
</section>
<section>
<div class="section-head"><h2>Social — cards &amp; banners</h2><span class="count">7 files</span></div>
<div class="grid wide">
<article class="card">
<div class="preview"><img src="social/og-1200x630.svg" alt="Open Graph card" width="560"></div>
<div class="meta">
<div class="name">Open Graph</div>
<div class="desc">Facebook / LinkedIn / Slack link unfurls. The default meta og:image aspect.</div>
<div class="file"><a href="social/og-1200x630.svg">social/og-1200x630.svg</a><span class="png"><a download href="source/exports/og-1200x630.png">PNG</a></span><span class="size">1200 × 630</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/twitter-card-1200x675.svg" alt="Twitter card" width="560"></div>
<div class="meta">
<div class="name">Twitter/X post card</div>
<div class="desc">summary_large_image spec — 16:9. Use in twitter:image meta tag.</div>
<div class="file"><a href="social/twitter-card-1200x675.svg">social/twitter-card-1200x675.svg</a><span class="png"><a download href="source/exports/twitter-card-1200x675.png">PNG</a></span><span class="size">1200 × 675</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/twitter-header-1500x500.svg" alt="Twitter header" width="560"></div>
<div class="meta">
<div class="name">Twitter/X profile header</div>
<div class="desc">Profile banner — orbital ring on the right, wordmark shifted past the ~200px avatar overlap in the lower-left.</div>
<div class="file"><a href="social/twitter-header-1500x500.svg">social/twitter-header-1500x500.svg</a><span class="png"><a download href="source/exports/twitter-header-1500x500.png">PNG</a></span><span class="size">1500 × 500</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/twitter-header-deviation-1500x500.svg" alt="Twitter header — deviation chart" width="560"></div>
<div class="meta">
<div class="name">Twitter/X header — deviation variant</div>
<div class="desc">Uses the site's hero deviation chart (same paths from deviant_website.html) on the right. Same avatar-safe copy zone as the primary header.</div>
<div class="file"><a href="social/twitter-header-deviation-1500x500.svg">social/twitter-header-deviation-1500x500.svg</a><span class="png"><a download href="source/exports/twitter-header-deviation-1500x500.png">PNG</a></span><span class="size">1500 × 500</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/facebook-cover-820x312.svg" alt="Facebook cover" width="560"></div>
<div class="meta">
<div class="name">Facebook page cover</div>
<div class="desc">Desktop-sized. Mobile-safe zone is ~640×360 centered.</div>
<div class="file"><a href="social/facebook-cover-820x312.svg">social/facebook-cover-820x312.svg</a><span class="png"><a download href="source/exports/facebook-cover-820x312.png">PNG</a></span><span class="size">820 × 312</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/linkedin-banner-1584x396.svg" alt="LinkedIn banner" width="560"></div>
<div class="meta">
<div class="name">LinkedIn company banner</div>
<div class="desc">Copy sits right of center to clear the lower-left profile-photo overlap.</div>
<div class="file"><a href="social/linkedin-banner-1584x396.svg">social/linkedin-banner-1584x396.svg</a><span class="png"><a download href="source/exports/linkedin-banner-1584x396.png">PNG</a></span><span class="size">1584 × 396</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/instagram-square-1080x1080.svg" alt="Instagram square" width="360"></div>
<div class="meta">
<div class="name">Instagram / Threads / Discord</div>
<div class="desc">Square 1:1 feed post. Also usable as a large Discord embed.</div>
<div class="file"><a href="social/instagram-square-1080x1080.svg">social/instagram-square-1080x1080.svg</a><span class="png"><a download href="source/exports/instagram-1080.png">PNG</a></span><span class="size">1080 × 1080</span></div>
</div>
</article>
</div>
</section>
<section>
<div class="section-head"><h2>Avatar</h2><span class="count">1 file · rendered square + round</span></div>
<div class="grid">
<article class="card">
<div class="preview tight"><img src="social/avatar-400x400.svg" alt="Square avatar" width="240" height="240"></div>
<div class="meta">
<div class="name">Square (as SVG ships)</div>
<div class="desc">Direct render of the file — the mark on the starfield square.</div>
<div class="file"><a href="social/avatar-400x400.svg">social/avatar-400x400.svg</a><span class="png"><a download href="source/exports/avatar-400.png">400</a> · <a href="source/exports/avatar-1024.png" download>1024</a></span><span class="size">400 × 400</span></div>
</div>
</article>
<article class="card">
<div class="preview tight"><div class="frame-avatar" style="border-radius:50%; overflow:hidden; width:240px; height:240px;"><img src="social/avatar-400x400.svg" alt="Circular avatar preview" width="240" height="240"></div></div>
<div class="meta">
<div class="name">Circular crop preview</div>
<div class="desc">How Twitter / X / GitHub / Discord actually display it. The mark is centered with margin so a circle keeps it whole.</div>
<div class="file"><a href="social/avatar-400x400.svg">social/avatar-400x400.svg</a><span class="png"><a download href="source/exports/avatar-400.png">400</a> · <a href="source/exports/avatar-1024.png" download>1024</a></span><span class="size">400 × 400</span></div>
</div>
</article>
</div>
</section>
</main>
<footer>
<div>Deviant · <span style="color: var(--muted);">brand gallery · rendered from <code>brand/</code></span></div>
<div><a href="../Parameters/webfiles/deviant_website.html">← the landing page</a> · <a href="README.md">README</a> · <a href="palette.md">palette</a></div>
</footer>
</body>
</html>

6
index.html
View file

@ -56,9 +56,9 @@
<!-- ============ THE FIVE PRODUCTS ============ -->
<section class="plain">
<h2>What we build</h2>
<p class="lede">Five products, each named for a figure whose role matches its function.
<p class="lede">Seven pieces, each named for a figure whose role matches its function.
Each solves one part of the "how do we run a web without gatekeepers" problem, and
all five interoperate around one thing: a name on the Bitcoin Cash chain.</p>
all of them interoperate around one thing: a name on the Bitcoin Cash chain.</p>
<div class="grid">
@ -127,7 +127,7 @@
<!-- ============ THE COMMON THREAD ============ -->
<section>
<h2>One thread through all five</h2>
<h2>One thread through all of them</h2>
<p class="lede">Everything above depends on one thing: a name registered on the
Bitcoin Cash chain, held in a wallet you control. That name is your address on
Prometheus, your identity on Hermes, your ranking signal on Helios, and the URL