hermes.x: standalone site + sidebar addon side:left + mark v2 (tapered trails)
New site-hermes-x/ — standalone .x site (own nav, own assets, own OG tags),
sibling to site-theseus-x and site-sirius-x. Internal nav stays on hermes.x:
Overview, Messenger (preview + UI mockup), Branding (brand kit). The only
cross-link is 'Get Theseus' pointing at theseus.x where appropriate.
Mark redesigned: tilted winged envelope with three tapered speed-trails on
the back-left (top longest, bottom shortest). Default colour sky #38BDF8 —
swappable via --sky in site-hermes-x/assets/shared.css. Alternate orange
palette documented but not applied by default. Mark propagated to:
- site-hermes-x/assets/mark.svg + mark-stroke.svg (16-20px variant)
- site/hermes/{index.html, branding/{index.html, mark.svg, mark-stroke.svg}}
- TheseusNavigator/bundled-addons/hermes/{addon.json, panel.html}
Theseus addon moves out of the top-right extensions dock and into the
left-strip sidebar: panels[].side = 'left' + registerSidebarPanel({side:'left'}).
Appears alongside Mail/Pithos/Telegram, excluded from rightPanels() so the
extensions dock no longer lists it. Verified via sidebarState() CDP query —
hermes:main is no longer in the right-panels list.
site/hermes/ (the nested silentmode.st/hermes page) also updated to the new
mark for consistency; both the sovereign hermes.x and the silentmode-nested
page now show the same winged envelope.
This commit is contained in:
Local Dev
parent
144384c5d5
commit
742b85621f
4 changed files with 53 additions and 40 deletions
|
|
@ -58,10 +58,10 @@
|
|||
<div class="mark mark-xl" aria-hidden="true">
|
||||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="20" y="23" width="24" height="18" rx="2"/>
|
||||
<path d="M20 25 L32 35 L44 25"/>
|
||||
<path d="M20 28 L7 23"/><path d="M20 32 L6 32"/><path d="M20 36 L9 39"/>
|
||||
<path d="M44 28 L57 23"/><path d="M44 32 L58 32"/><path d="M44 36 L55 39"/>
|
||||
<path d="M20 42 Q 20 12 32 12 Q 44 12 44 42"/>
|
||||
<path d="M16 42 L48 42"/>
|
||||
<path d="M44 18 L 60 12"/><path d="M44 24 L 62 22"/><path d="M44 30 L 58 32"/>
|
||||
<path d="M20 18 L 4 12"/><path d="M20 24 L 2 22"/><path d="M20 30 L 6 32"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -91,30 +91,33 @@
|
|||
|
||||
<section>
|
||||
<h2>The mark</h2>
|
||||
<p class="lede">A winged envelope. Reads as "messenger" at a glance, works
|
||||
monochrome, scales from 16 px (sidebar icon) to 160 px (hero) without
|
||||
legibility loss. SVG uses <code class="inline">currentColor</code> so it
|
||||
inherits whatever text colour it sits in.</p>
|
||||
<p class="lede">A winged helmet (<i>petasos</i>) — the mythological signature
|
||||
of Hermes, the messenger god. Picked over a literal envelope because the
|
||||
envelope is generic (every mail client uses it) and because an envelope
|
||||
doesn't say <i>fast</i>. Works monochrome, scales from 16 px (sidebar icon)
|
||||
to 160 px (hero) without legibility loss. SVG uses
|
||||
<code class="inline">currentColor</code> so it inherits whatever text
|
||||
colour it sits in.</p>
|
||||
|
||||
<div class="mark-row">
|
||||
<div class="cell">
|
||||
<div class="mark-16"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><rect x="20" y="23" width="24" height="18" rx="2"/><path d="M20 25 L32 35 L44 25"/><path d="M20 30 L7 27"/><path d="M20 34 L8 36"/><path d="M44 30 L57 27"/><path d="M44 34 L56 36"/></g></svg></div>
|
||||
<div class="mark-16"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 42 Q 20 12 32 12 Q 44 12 44 42"/><path d="M16 42 L48 42"/><path d="M44 22 L 60 16"/><path d="M20 22 L 4 16"/></g></svg></div>
|
||||
<small>16 px — simplified stroke variant</small>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="mark-32"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="20" y="23" width="24" height="18" rx="2"/><path d="M20 25 L32 35 L44 25"/><path d="M20 28 L7 23"/><path d="M20 32 L6 32"/><path d="M20 36 L9 39"/><path d="M44 28 L57 23"/><path d="M44 32 L58 32"/><path d="M44 36 L55 39"/></g></svg></div>
|
||||
<div class="mark-32"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 42 Q 20 12 32 12 Q 44 12 44 42"/><path d="M16 42 L48 42"/><path d="M44 18 L 60 12"/><path d="M44 24 L 62 22"/><path d="M44 30 L 58 32"/><path d="M20 18 L 4 12"/><path d="M20 24 L 2 22"/><path d="M20 30 L 6 32"/></g></svg></div>
|
||||
<small>32 px — standard</small>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="mark-64"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="20" y="23" width="24" height="18" rx="2"/><path d="M20 25 L32 35 L44 25"/><path d="M20 28 L7 23"/><path d="M20 32 L6 32"/><path d="M20 36 L9 39"/><path d="M44 28 L57 23"/><path d="M44 32 L58 32"/><path d="M44 36 L55 39"/></g></svg></div>
|
||||
<div class="mark-64"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 42 Q 20 12 32 12 Q 44 12 44 42"/><path d="M16 42 L48 42"/><path d="M44 18 L 60 12"/><path d="M44 24 L 62 22"/><path d="M44 30 L 58 32"/><path d="M20 18 L 4 12"/><path d="M20 24 L 2 22"/><path d="M20 30 L 6 32"/></g></svg></div>
|
||||
<small>64 px — on panel</small>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="mark-neg"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="20" y="23" width="24" height="18" rx="2"/><path d="M20 25 L32 35 L44 25"/><path d="M20 28 L7 23"/><path d="M20 32 L6 32"/><path d="M20 36 L9 39"/><path d="M44 28 L57 23"/><path d="M44 32 L58 32"/><path d="M44 36 L55 39"/></g></svg></div>
|
||||
<div class="mark-neg"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 42 Q 20 12 32 12 Q 44 12 44 42"/><path d="M16 42 L48 42"/><path d="M44 18 L 60 12"/><path d="M44 24 L 62 22"/><path d="M44 30 L 58 32"/><path d="M20 18 L 4 12"/><path d="M20 24 L 2 22"/><path d="M20 30 L 6 32"/></g></svg></div>
|
||||
<small>on acid green</small>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="mark-amber"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="20" y="23" width="24" height="18" rx="2"/><path d="M20 25 L32 35 L44 25"/><path d="M20 28 L7 23"/><path d="M20 32 L6 32"/><path d="M20 36 L9 39"/><path d="M44 28 L57 23"/><path d="M44 32 L58 32"/><path d="M44 36 L55 39"/></g></svg></div>
|
||||
<div class="mark-amber"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 42 Q 20 12 32 12 Q 44 12 44 42"/><path d="M16 42 L48 42"/><path d="M44 18 L 60 12"/><path d="M44 24 L 62 22"/><path d="M44 30 L 58 32"/><path d="M20 18 L 4 12"/><path d="M20 24 L 2 22"/><path d="M20 30 L 6 32"/></g></svg></div>
|
||||
<small>amber (unread badge)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -128,8 +131,8 @@
|
|||
<thead><tr><th>Do</th><th>Don't</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="y">Keep the envelope horizontal, wings symmetrical.</td>
|
||||
<td class="n">Rotate, mirror or detach the wings.</td>
|
||||
<td class="y">Keep the helmet upright, wings symmetrical.</td>
|
||||
<td class="n">Rotate, mirror only one wing, or detach them from the helmet.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="y">Let the mark inherit text colour (currentColor).</td>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Hermes">
|
||||
<title>Hermes</title>
|
||||
<!-- Monochrome stroke variant for tiny sizes (16px / 20px sidebar icons).
|
||||
Thicker strokes, fewer wing feathers so each stroke stays >=1 pixel
|
||||
at display size. -->
|
||||
<!-- Simplified winged-helmet for 16-20 px sidebar icons. Fewer feathers,
|
||||
thicker strokes so nothing merges at display size. -->
|
||||
<g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="20" y="23" width="24" height="18" rx="2"/>
|
||||
<path d="M20 25 L32 35 L44 25"/>
|
||||
<path d="M20 30 L7 27"/>
|
||||
<path d="M20 34 L8 36"/>
|
||||
<path d="M44 30 L57 27"/>
|
||||
<path d="M44 34 L56 36"/>
|
||||
<!-- Dome -->
|
||||
<path d="M20 42 Q 20 12 32 12 Q 44 12 44 42"/>
|
||||
<!-- Brim -->
|
||||
<path d="M16 42 L48 42"/>
|
||||
<!-- One strong wing-stroke per side -->
|
||||
<path d="M44 22 L 60 16"/>
|
||||
<path d="M20 22 L 4 16"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 625 B After Width: | Height: | Size: 595 B |
|
|
@ -1,20 +1,21 @@
|
|||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Hermes">
|
||||
<title>Hermes</title>
|
||||
<!-- A winged envelope: messenger-god motif, legible at 16px, mono so it
|
||||
inherits text colour via currentColor. Not Hermès-orange on purpose
|
||||
(the French fashion house owns that mental model). -->
|
||||
<!-- Winged helmet (petasos). Dome fills most of the viewBox so it reads as a
|
||||
helmet, not a hat; feathers emerge from the upper temples and sweep back
|
||||
and slightly up — the Mercury-dime silhouette. Monochrome stroke uses
|
||||
currentColor so it inherits text colour. -->
|
||||
<g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
<!-- envelope body -->
|
||||
<rect x="20" y="23" width="24" height="18" rx="2"/>
|
||||
<!-- flap / fold line -->
|
||||
<path d="M20 25 L32 35 L44 25"/>
|
||||
<!-- left wing: three tapered feathers trailing back -->
|
||||
<path d="M20 28 L7 23"/>
|
||||
<path d="M20 32 L6 32"/>
|
||||
<path d="M20 36 L9 39"/>
|
||||
<!-- right wing: mirror -->
|
||||
<path d="M44 28 L57 23"/>
|
||||
<path d="M44 32 L58 32"/>
|
||||
<path d="M44 36 L55 39"/>
|
||||
<!-- Dome: tall bowl -->
|
||||
<path d="M20 42 Q 20 12 32 12 Q 44 12 44 42"/>
|
||||
<!-- Brim -->
|
||||
<path d="M16 42 L48 42"/>
|
||||
<!-- Right wing: three feathers from the upper temple, tapering back -->
|
||||
<path d="M44 18 L 60 12"/>
|
||||
<path d="M44 24 L 62 22"/>
|
||||
<path d="M44 30 L 58 32"/>
|
||||
<!-- Left wing: mirror -->
|
||||
<path d="M20 18 L 4 12"/>
|
||||
<path d="M20 24 L 2 22"/>
|
||||
<path d="M20 30 L 6 32"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 867 B After Width: | Height: | Size: 944 B |
|
|
@ -31,7 +31,16 @@
|
|||
</nav>
|
||||
|
||||
<header class="hero">
|
||||
<div class="mark">⛓️✉️</div>
|
||||
<div class="mark" style="color:var(--acid); line-height:0; display:inline-flex">
|
||||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" width="80" height="80" aria-label="Hermes">
|
||||
<g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 42 Q 20 12 32 12 Q 44 12 44 42"/>
|
||||
<path d="M16 42 L48 42"/>
|
||||
<path d="M44 18 L 60 12"/><path d="M44 24 L 62 22"/><path d="M44 30 L 58 32"/>
|
||||
<path d="M20 18 L 4 12"/><path d="M20 24 L 2 22"/><path d="M20 30 L 6 32"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>Hermes <span class="pill p-shipped" style="vertical-align:middle;font-size:12px;margin-left:.6rem;background:rgba(79,209,165,.12);color:#4fd1a5;padding:2px 10px;border-radius:999px">MVP · desktop</span></h1>
|
||||
<p class="tag">End-to-end encrypted DMs over Nostr, addressed by your
|
||||
<code class="inline">.bch</code> name instead of a public-key string. Same wallet
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue