From 8179f75ff045b4400eef7ab7e3f65761dccfd020 Mon Sep 17 00:00:00 2001 From: "@permadeath.com" Date: Thu, 15 Oct 2026 11:45:30 -0400 Subject: [PATCH] feat(web): print the wordmark as vibescrobble! with its stickers off the letters The wordmark gains its exclamation mark, drawn by web/dev/wordmark.mjs from the same face and seed, and the three emoji stickers move into the clear space above the short letters and under the baseline. Co-Authored-By: Claude Opus 5.5 Change-Id: I0d2ad23af3c55444991c7dd3f0fe6ce7f61fec87 --- web/dev/wordmark.mjs | 4 ++-- web/plate.css | 31 ++++++++++++++++--------------- web/wordmark.svg | 2 +- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/web/dev/wordmark.mjs b/web/dev/wordmark.mjs index 2492cab..45afa33 100644 --- a/web/dev/wordmark.mjs +++ b/web/dev/wordmark.mjs @@ -1,4 +1,4 @@ -// Draws web/wordmark.svg: "vibescrobble" outlined from Bagel Fat One and set +// Draws web/wordmark.svg: "vibescrobble!" outlined from Bagel Fat One and set // as a bubbly riso print — every letter bounced and tilted a little, riso // blue over a pink pass, an ink edge — with the v drawn as the favicon's // squiggle, so the two are one family. Paths only, so the mark needs no font @@ -77,4 +77,4 @@ if (!lib || !ttf) { process.exit(2); } const { default: opentype } = await import(lib); -process.stdout.write(wordmark(opentype, ttf, { size: 80, ink: "#0078bf", pass: "#ff48b0", outline: "#1f1d3a", bounce: 0.08, tilt: 6 }).svg + "\n"); +process.stdout.write(wordmark(opentype, ttf, { size: 80, ink: "#0078bf", pass: "#ff48b0", outline: "#1f1d3a", bounce: 0.08, tilt: 6, text: "vibescrobble!" }).svg + "\n"); diff --git a/web/plate.css b/web/plate.css index 8aae5dc..180b7d0 100644 --- a/web/plate.css +++ b/web/plate.css @@ -175,7 +175,7 @@ html, body { .mark { display: block; flex: none; - width: 220px; + width: 234px; height: 70px; margin: -14px -8px -16px -12px; overflow: hidden; @@ -186,27 +186,28 @@ html, body { transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.6, 1); } .mark:hover { transform: rotate(-3deg) scale(1.05); } -/* Emoji stickers slapped on the wordmark, the way they end up on a laptop: - a white die-cut disc, a shadow, each at its own angle, over the letters - but never across the middle of the name. */ +/* Emoji stickers slapped beside the wordmark, the way they end up on a + laptop: a white die-cut disc, a shadow, each at its own angle, in the + clear space above the short letters and under the baseline, never on a + letter. */ .mark { position: relative; } .mark .slap { position: absolute; display: grid; place-items: center; - width: 22px; - height: 22px; + width: 20px; + height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.25), 1px 3px 4px rgba(var(--ink-rgb), 0.35); color: var(--ink); - font: 13px/1 var(--text); + font: 12px/1 var(--text); font-style: normal; transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.6, 1); } -.mark .slap:nth-child(1) { left: 6px; top: 4px; transform: rotate(-16deg); } -.mark .slap:nth-child(2) { left: 118px; top: 4px; transform: rotate(14deg); } -.mark .slap:nth-child(3) { right: 2px; bottom: 9px; transform: rotate(-9deg); } +.mark .slap:nth-child(1) { left: 58px; top: 2px; transform: rotate(-16deg); } +.mark .slap:nth-child(2) { left: 92px; top: 4px; transform: rotate(14deg); } +.mark .slap:nth-child(3) { left: 150px; bottom: 3px; transform: rotate(-9deg); } .mark:hover .slap:nth-child(1) { transform: rotate(-26deg) scale(1.1); } .mark:hover .slap:nth-child(2) { transform: rotate(24deg) scale(1.1); } .mark:hover .slap:nth-child(3) { transform: rotate(3deg) scale(1.1); } @@ -282,11 +283,11 @@ html, body { .demo-note a { text-decoration: none; } .demo-note a:hover, .demo-note a:focus-visible { background: var(--didbot-ink); } @media (max-width: 700px) { - .mark { width: 124px; height: 40px; margin: -8px -4px -10px -8px; } - .mark .slap { width: 16px; height: 16px; font-size: 10px; } - .mark .slap:nth-child(1) { left: 2px; top: 1px; } - .mark .slap:nth-child(2) { left: 64px; top: 0; } - .mark .slap:nth-child(3) { right: 0; bottom: 4px; } + .mark { width: 134px; height: 40px; margin: -8px -4px -10px -8px; } + .mark .slap { width: 14px; height: 14px; font-size: 9px; } + .mark .slap:nth-child(1) { left: 38px; top: 0; } + .mark .slap:nth-child(2) { left: 56px; top: 1px; } + .mark .slap:nth-child(3) { left: 86px; bottom: 1px; } .demo-note { font-size: 13px; padding: 9px 12px; } /* The tag and the links share the first row, the sentence beneath them. */ .demo-note > span:not(.demo-tag) { order: 1; } diff --git a/web/wordmark.svg b/web/wordmark.svg index 0dfbfb7..9d31558 100644 --- a/web/wordmark.svg +++ b/web/wordmark.svg @@ -1 +1 @@ - + -- knotmirror 0.0.1