Repository navigation
fix(web): scale the logo up, and stop the footer mark fading out - #15
Merged
Merged
Conversation
The lockup shipped too small everywhere, and the footer read as washed out: a 20px mark whose strokes are thin cyan gradients, sitting in a row that is entirely `text-ink-muted`. Nothing was dimming it — at that size against white there was simply nothing for it to hold contrast against. The footer now takes the full lockup at 32px with full-strength text beside it, and the copyright drops to its own muted line underneath. The same fix applies to the offline screen, which was deliberately faded at `opacity-60` and had the identical problem for the identical reason. Sizes move to named steps on `BrandLockup` rather than a free `height` plus a matching `text`. Keeping those two in sync by hand is what let the mark and the type drift apart, and the ratio is not obvious: the mark fills the artwork's full height while the wordmark's cap-height is a little over half of it, so the light branch needs type at roughly 0.53x the mark's box to sit level with the dark one. nav, verify md 40/44px login h1 lg 48/56px app shell sm 32px footer sm 32px closing CTA 48/64px wordmark Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #14 on two pieces of feedback: the logo was too small everywhere, and the footer mark looked washed out.
The footer
Nothing was dimming it. The mark was
h-5(20px) sitting in a row that is entirelytext-ink-muted, and at that size its thin cyan-to-blue strokes have nothing to hold contrast against on a white surface — it reads as a faded smudge rather than a logo.It now takes the full lockup at 32px, with full-strength text beside it, and the copyright drops to its own muted line underneath.
The offline screen had the identical problem for the identical reason — it was deliberately faded at
opacity-60— so it gets the same treatment: 64px, no opacity.Sizing
BrandLockupmoves from a freeheightplus a separately-passedtextto named steps. Keeping those two props in sync by hand is what let the mark and the type drift apart, and the correct ratio is not obvious: the mark fills the artwork's full height while the wordmark's cap-height is a little over half of it, so the light branch needs type at roughly0.53 × heightto sit level with the dark branch.mdh1lgsmsmVerification
bun run check— format, typecheck, 397 tests, 0 fail.next buildclean, no warnings.h-10,sm:h-11,h-12,sm:h-14,h-16,text-[21px],sm:text-[30px], …) actually compiled into the CSS rather than being silently dropped.Still not visually diffed in a browser — none is installed on this box, so the sizes are reasoned from the artwork's proportions rather than eyeballed. Worth a look in both themes before merging.
🤖 Generated with Claude Code