diff --git a/src/styles/global.css b/src/styles/global.css index 806c145..4192fcf 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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); diff --git a/src/styles/tokens.css b/src/styles/tokens.css index d030074..b5f92b7 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -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 */ }