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

- --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

View file

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

View file

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