joh/project-bifrost-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(nav): wordmark — give italic ascenders room, share visual midline

Browse source 
Two fixes for the previous baseline-align attempt:

- 'Bifrost' was getting its italic ascender clipped because line-height
  was pinned at 1. Switched to line-height: 1.3 on .wordmark-project so
  the swash on the italic 'B' / 'f' has room to render.
- The lockup was reading low overall because align-items: baseline +
  translateY(3px) on the SVG together shifted the SVG below the text
  baseline. Reverted to align-items: center for reliable cross-browser
  centring, dropped the SVG transform, and pulled the SVG height from
  22 → 20 so the visible glyph height of the wordmark matches the cap-
  height of Newsreader at 18px more closely. The '·' bullet keeps a
  -2px nudge because Newsreader's bullet sits typographically above its
  baseline at this size.
- 2px padding-top on .wordmark-project compensates for the small bit
  of descender slack at the bottom of the Fenja SVG — caps now sit on
  the same visible cap-line as the wordmark glyphs.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 11:33:36 +02:00
parent 255ed76bbd
commit f8ecad4433
1 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/layouts/AppLayout.astro
View file

@ -110,36 +110,36 @@ const year = new Date().getFullYear();
.wordmark-link {
flex-shrink: 0;
display: flex;
align-items: baseline;
gap: 14px;
align-items: center;
gap: 12px;
border-bottom: none;
color: var(--on-surface);
line-height: 1; /* belt + braces — no nav-row leading on the lockup */
}
.wordmark-link:hover {
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;
height: 20px;
width: auto;
display: block;
transform: translateY(3px);
}
.wordmark-sep {
color: var(--on-surface-muted);
font-family: var(--font-serif);
font-size: 18px;
line-height: 1;
transform: translateY(-1px);
/* Optical kern — the bullet's typographic centre sits slightly above
its baseline in Newsreader; this nudges it onto the visual midline. */
transform: translateY(-2px);
}
.wordmark-project {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 400;
line-height: 1;
line-height: 1.3; /* leaves room for italic ascenders on 'B'/'f' */
padding-top: 2px; /* matches the descender slack in the Fenja SVG so caps sit on the same visual cap-line */
color: var(--on-surface);
letter-spacing: var(--tracking-snug);
}