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

fix(nav): widen 'Bifrost' gradient-clip box so the italic cap renders fully

Browse source 
The italic 'B' on 'Bifrost' was being clipped at the top because
background-clip: text only paints inside the inline element's content
box — which at the previous tight line-height didn't include the
ascender flourish.

Two cooperating fixes:
- .wordmark-project gets line-height: 1.5 so the parent line-box has
  enough vertical room for the italic ascender to live in.
- .wordmark-bifrost becomes display: inline-block with 4px top / 2px
  bottom padding. That extends the element's content box vertically so
  the gradient-clip mask covers the full italic glyph including the
  serif curl above the cap-height.

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

8
src/layouts/AppLayout.astro
View file

@ -138,15 +138,19 @@ const year = new Date().getFullYear();
font-family: var(--font-serif);
font-size: 18px;
font-weight: 400;
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 */
line-height: 1.5; /* enough room for italic 'B' ascender + the gradient's clip box */
color: var(--on-surface);
letter-spacing: var(--tracking-snug);
}
.wordmark-bifrost {
/* display: inline-block + padding lifts the gradient-clip bounding
box above the italic 'B' ascender so the cap doesn't render cut off. */
display: inline-block;
padding: 4px 0 2px;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
line-height: 1;
background-image: linear-gradient(
90deg,
var(--pigment-terracotta) 0%,