style(nav): wordmark — give italic ascenders room, share visual midline
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:
parent
255ed76bbd
commit
f8ecad4433
1 changed files with 9 additions and 9 deletions
|
|
@ -110,36 +110,36 @@ const year = new Date().getFullYear();
|
||||||
.wordmark-link {
|
.wordmark-link {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: center;
|
||||||
gap: 14px;
|
gap: 12px;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
color: var(--on-surface);
|
color: var(--on-surface);
|
||||||
|
line-height: 1; /* belt + braces — no nav-row leading on the lockup */
|
||||||
}
|
}
|
||||||
.wordmark-link:hover {
|
.wordmark-link:hover {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
color: var(--on-surface);
|
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 {
|
.wordmark {
|
||||||
height: 22px;
|
height: 20px;
|
||||||
width: auto;
|
width: auto;
|
||||||
display: block;
|
display: block;
|
||||||
transform: translateY(3px);
|
|
||||||
}
|
}
|
||||||
.wordmark-sep {
|
.wordmark-sep {
|
||||||
color: var(--on-surface-muted);
|
color: var(--on-surface-muted);
|
||||||
font-family: var(--font-serif);
|
font-family: var(--font-serif);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 1;
|
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 {
|
.wordmark-project {
|
||||||
font-family: var(--font-serif);
|
font-family: var(--font-serif);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
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);
|
color: var(--on-surface);
|
||||||
letter-spacing: var(--tracking-snug);
|
letter-spacing: var(--tracking-snug);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue