style(nav): align Fenja logo + 'Project Bifrost' on a shared baseline
Three small adjustments so the lockup reads as one mark, not a logo next to a label: - align-items: baseline on .wordmark-link so the typographic baseline drives vertical alignment (instead of bounding-box centres). - 'Project' + 'Bifrost' bumped from text-body-md (16px) to 18px with line-height: 1 and tracking-snug. The bigger weight matches the visible glyph height of the Fenja SVG and pulls the bullet into conversation with the wordmark instead of floating between them. - The Fenja SVG gets a translateY(3px) nudge to compensate for the descender slack in its 265×101 viewBox — the SVG's actual baseline sits a couple of px above its bounding-box bottom, so the flex baseline-align would otherwise place 'fenja' above the text baseline. - The '·' separator drops 1px and grows to 18px so it sits between the two marks rather than floating above them. The exact numbers are empirical — eyeballed in dev — but the rationale each pin to a baseline relationship rather than 'magic px offset'. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
7403d805cd
commit
255ed76bbd
1 changed files with 12 additions and 5 deletions
|
|
@ -110,8 +110,8 @@ const year = new Date().getFullYear();
|
|||
.wordmark-link {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
align-items: baseline;
|
||||
gap: 14px;
|
||||
border-bottom: none;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
|
@ -119,22 +119,29 @@ const year = new Date().getFullYear();
|
|||
border-bottom: none;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
/* Fenja logo's viewBox (265×101) puts its baseline ~3-4px above the
|
||||
bottom edge to leave room for the 'j' descender. Pull the bottom of
|
||||
the SVG down so the typographic baseline matches the wordmark text. */
|
||||
.wordmark {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
display: block;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
.wordmark-sep {
|
||||
color: var(--on-surface-muted);
|
||||
font-size: 1rem;
|
||||
font-family: var(--font-serif);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.wordmark-project {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-body-md);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: var(--on-surface);
|
||||
letter-spacing: 0;
|
||||
letter-spacing: var(--tracking-snug);
|
||||
}
|
||||
.wordmark-bifrost {
|
||||
font-family: var(--font-serif);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue