site: fix homepage product count, drop stray brand-page copy, add GOTCHAS
- 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
parent
09a277f3c7
commit
e82db4c653
3 changed files with 46 additions and 373 deletions
43
GOTCHAS.md
Normal file
43
GOTCHAS.md
Normal 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.
|
||||||
|
|
@ -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 + “Deviant” in Fraunces + “POWER YOUR IDEAS.” 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 & 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>
|
|
||||||
|
|
@ -56,9 +56,9 @@
|
||||||
<!-- ============ THE FIVE PRODUCTS ============ -->
|
<!-- ============ THE FIVE PRODUCTS ============ -->
|
||||||
<section class="plain">
|
<section class="plain">
|
||||||
<h2>What we build</h2>
|
<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
|
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">
|
<div class="grid">
|
||||||
|
|
||||||
|
|
@ -127,7 +127,7 @@
|
||||||
|
|
||||||
<!-- ============ THE COMMON THREAD ============ -->
|
<!-- ============ THE COMMON THREAD ============ -->
|
||||||
<section>
|
<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
|
<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
|
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
|
Prometheus, your identity on Hermes, your ranking signal on Helios, and the URL
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue