From 3a54cce7df3bf86e0e900865b880855845c5f766 Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Wed, 19 Aug 2026 02:54:05 +0200 Subject: feat(ui): the M of the wordmark is the logo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The stylised M replaces the letter M in "MeshBay" at the top left; `eshBay` beside it stays text. **The source artwork is now in git.** It was in `QE/`, which is gitignored, so it would not have survived a clone — and the tree is about to be moved to another machine. `assets/brand/` holds the original and the `convert` command that derives the 10 KB nav asset from it (trimmed, 72px tall for a picture shown at 30, so it survives a 2× screen). Verified: the documented command reproduces the committed file byte for byte. The derived file is in `_ASSETS`, which is what the `/a//` fingerprint is computed from. A file missing from that list is a file whose change never moves the URL, so a browser holding the old one never asks again — the comment on that list says so, and a logo is exactly the kind of asset one would forget. Its URL is resolved from `import.meta.url`, so the hub's fingerprinted path and the application's `app://` scheme both come out right without either being named in the source. **The two sizes are independent, and that took four rounds to get right.** The picture's height was written in `em` — a fraction of the lettering — so every adjustment to the text resized the picture by the same stroke and the ratio between them could never change. The operator spotted the coupling before I did ("si on change la taille du M, tu vas encore tout décaler"). The height is in pixels now: `font-size: 1.375em` (22px) and `height: 30px`, two knobs that move one thing each. The vertical nudge went with it — it was correcting a misalignment I was causing myself. Also: the wordmark blue goes one step down from sky-400 towards sky-500. It sat brighter than the picture next to it, which made the two read as different materials rather than one object. A note on how this went wrong first: I checked the result on a mock HTML page I wrote, not in the application. The picture was loading the whole time, but at 25px against a 29px line box it was *smaller* than the letters, so the wordmark read as unchanged and the report was "none of what I asked for was done". Every size since has been measured in the running window over CDP. 883 tests pass. Co-Authored-By: Claude Opus 5 --- packages/meshbay-hub/src/meshbay_hub/api/webapp.py | 2 +- packages/meshbay-hub/src/meshbay_hub/static/app.js | 9 +++++- .../src/meshbay_hub/static/meshbay-m.png | Bin 0 -> 10066 bytes .../meshbay-hub/src/meshbay_hub/static/style.css | 36 +++++++++++++++++++-- 4 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 packages/meshbay-hub/src/meshbay_hub/static/meshbay-m.png (limited to 'packages') diff --git a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py index 7028071..19d22d4 100644 --- a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py +++ b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py @@ -28,7 +28,7 @@ router = APIRouter(tags=["webapp"]) # which is the failure this list exists to prevent, and it is silent. _ASSETS = ("style.css", "keyderive.js", "crypto.js", "transport.js", "app.js", "i18n.js", "downloads.js", "transfers.js", "zipstream.js", - "platform.js") + "platform.js", "meshbay-m.png") def _asset_version() -> str: diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js index 0843d1d..2e3c422 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js @@ -400,6 +400,11 @@ const ICON_PATHS = { close: ['M6 6l12 12M18 6L6 18'], }; +// The M of the wordmark is a picture; the rest is text. Resolved from this +// module's own URL so the hub's fingerprinted path and the application's +// app:// scheme both come out right without either being named here. +const BRAND_M = new URL('./meshbay-m.png', import.meta.url).href; + function Icon({ name, cls = '' }) { const paths = ICON_PATHS[name]; if (!paths) return null; @@ -579,7 +584,9 @@ function Nav({ user, theme, onThemeChange, onLogout, onMenuToggle, unreadCount, `} - MeshBay + + MeshBay +
${user && html`<${TransferWidget} />`} diff --git a/packages/meshbay-hub/src/meshbay_hub/static/meshbay-m.png b/packages/meshbay-hub/src/meshbay_hub/static/meshbay-m.png new file mode 100644 index 0000000..a682f33 Binary files /dev/null and b/packages/meshbay-hub/src/meshbay_hub/static/meshbay-m.png differ diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 12fc15f..238f33a 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -19,7 +19,9 @@ --success: #22c55e; --nav-bg: #0f172a; --nav-text: #e2e8f0; - --nav-brand: #38bdf8; + /* One step down from sky-400 towards sky-500: the wordmark sat brighter than + the picture beside it, which made the two read as different materials. */ + --nav-brand: #23b1f0; --sidebar-bg: #f1f5f9; --sidebar-hover: #e2e8f0; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08); @@ -92,11 +94,41 @@ a:hover { text-decoration: underline; } .nav-brand { color: var(--nav-brand); font-weight: 700; - font-size: 1.15em; + /* 22px measured in the application. 1.15em was lettering sized for plain + text and read as a caption beside the picture; 1.45em overshot. */ + font-size: 1.375em; text-decoration: none; } .nav-brand:hover { text-decoration: none; } +/* The M is a picture standing in for a letter, so it is sized in `em` and + follows the wordmark rather than being pinned to a pixel height. + + Sized by measuring the running application, twice. At 1.35em of the old + font size it rendered 25px against a 29px line box — *smaller* than the + letters beside it, so the wordmark read as unchanged. At 1.9em it was 35px + against 29px, which overshot the other way. The pair is now set together: + the picture leads, the lettering follows a little behind it. */ +.nav-brand { + display: inline-flex; + align-items: center; +} +.nav-brand-m { + /* **In pixels, not `em` — and that is the point.** Written in `em` this was + a fraction of the lettering's size, so every adjustment to the text moved + the picture too and the pair could never be settled: making the words + bigger made the M bigger by the same stroke, and the ratio never changed. + Two independent things need two independent numbers. + + 30px against 22px of lettering. */ + height: 30px; + width: auto; + /* Positive, deliberately. The glyph this replaces carried its own side + bearing and an image has none, so without this the picture sits flush + against the "e". */ + margin-right: 4px; +} + .nav-hamburger { display: none; background: none; -- cgit v1.2.3