aboutsummaryrefslogtreecommitdiffstats
path: root/assets/brand
diff options
context:
space:
mode:
authorChristophe Besson <cbesson@gmail.com>2026-08-19 02:54:05 +0200
committerChristophe Besson <cbesson@gmail.com>2026-08-19 02:54:05 +0200
commit3a54cce7df3bf86e0e900865b880855845c5f766 (patch)
tree576e0ba2c4180166a843dc4a2d927762c4505c73 /assets/brand
parentb86981f7b4ffe758136a527542ce256315823a46 (diff)
downloadmeshbay-3a54cce7df3bf86e0e900865b880855845c5f766.tar.gz
feat(ui): the M of the wordmark is the logo
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/<hash>/` 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 <noreply@anthropic.com>
Diffstat (limited to 'assets/brand')
-rw-r--r--assets/brand/README.md35
-rw-r--r--assets/brand/meshbay-M-transparent.pngbin0 -> 56523 bytes
2 files changed, 35 insertions, 0 deletions
diff --git a/assets/brand/README.md b/assets/brand/README.md
new file mode 100644
index 0000000..b673589
--- /dev/null
+++ b/assets/brand/README.md
@@ -0,0 +1,35 @@
+# Brand assets
+
+## `meshbay-M-transparent.png`
+
+The stylised M, 214 × 190, RGBA with a transparent background. **This is the
+source.** It lived in `QE/` until 2026-08-19, which is gitignored — the artwork
+would not have survived a clone.
+
+## Deriving the nav wordmark
+
+`packages/meshbay-hub/src/meshbay_hub/static/meshbay-m.png` is generated from
+it, not drawn separately:
+
+```bash
+convert assets/brand/meshbay-M-transparent.png \
+ -trim +repage -resize x72 -strip \
+ packages/meshbay-hub/src/meshbay_hub/static/meshbay-m.png
+```
+
+- `-trim +repage` removes the transparent margin, so the CSS controls the
+ spacing rather than the file's padding doing it invisibly.
+- `-resize x72` is 72 px tall for a picture displayed at 30 px — enough for a
+ 2× screen, and 56 KB becomes 10 KB.
+
+The derived file is listed in `_ASSETS` in `meshbay_hub/api/webapp.py`. It has
+to be: that list is what the `/a/<hash>/` fingerprint is computed from, so a
+file missing from it is a file whose change never moves the URL, and a browser
+holding the old one never asks again. Regenerate the picture, and the wordmark
+changes for everyone; forget the list, and it changes for nobody.
+
+The M is a picture standing in for the letter M; `eshBay` beside it is text.
+Their sizes are set independently in `style.css` — `.nav-brand { font-size }`
+and `.nav-brand-m { height }`, the second in **pixels on purpose**. Written in
+`em` it was a fraction of the lettering, so resizing the words resized the
+picture by the same stroke and the balance between them could never be changed.
diff --git a/assets/brand/meshbay-M-transparent.png b/assets/brand/meshbay-M-transparent.png
new file mode 100644
index 0000000..6fea08c
--- /dev/null
+++ b/assets/brand/meshbay-M-transparent.png
Binary files differ