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

style: site back to 72rem + section-link is black/underlined/larger

Browse source 
- --content-max: 83rem → 72rem (back to the original width — the wider
  canvas tested less well in practice; sections felt under-furnished).
- .section-link: italic serif retained, but now black (--on-surface)
  instead of terracotta, underlined with a fine 0.5px stroke and 4px
  text-underline-offset, font-size bumped from text-body-md to
  text-title-lg (1.125rem). Hover slightly thickens the underline rather
  than swapping colour, so the link still reads as a link at rest.
- .section-link--ink modifier swaps to cream on the dark events card.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 10:12:01 +02:00
parent 66c3f6492f
commit cafbcf8b74
2 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/styles/global.css
View file

@ -232,23 +232,27 @@ a:hover {
.ghost-border { border: var(--ghost-border); }
.ghost-border-bottom { border-bottom: var(--ghost-border); }
/* --- Section link — prominent italic serif, placed at the bottom of
its respective box or article. See points 8 + 10 in the v3 spec:
italics are reserved for links + the Bifrost wordmark. --- */
/* --- Section link — black serif italic, underlined, larger.
Placed at the bottom of its respective box or article.
Italics are reserved for links + the Bifrost wordmark. --- */
.section-link {
display: inline-block;
font-family: var(--font-serif);
font-style: italic;
font-size: var(--text-body-md);
color: var(--pigment-terracotta);
text-decoration: none;
font-size: var(--text-title-lg); /* 1.125rem — larger than body */
color: var(--on-surface);
text-decoration: underline;
text-decoration-thickness: 0.5px;
text-underline-offset: 4px;
border-bottom: none;
transition: opacity var(--duration-fast) var(--ease-standard);
}
.section-link:hover {
color: var(--on-surface);
text-decoration: underline;
text-decoration-thickness: 1px;
border-bottom: none;
opacity: 0.78;
color: var(--pigment-terracotta);
}
.section-link--ink {
color: var(--ink-text);

2
src/styles/tokens.css
View file

@ -129,6 +129,6 @@
--duration-slow: 420ms;
/* --- Layout --- */
--content-max: 83rem; /* 1328px — 15% wider than the original 72rem */
--content-max: 72rem; /* 1152px */
--reading-max: 42rem; /* 672px */
}