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:
Jonathan Hvid 2026-05-12 11:31:56 +02:00
parent 7403d805cd
commit 255ed76bbd

View file

@ -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);