diff --git a/index.html b/index.html index e36c908..88d6f00 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet" > - + diff --git a/styles.css b/styles.css index d385aed..892aa93 100644 --- a/styles.css +++ b/styles.css @@ -27,7 +27,7 @@ html { body { margin: 0; - min-width: 20rem; + min-width: 0; overflow-x: hidden; background: var(--color-weathered-paper); color: var(--color-noel-black); @@ -969,7 +969,8 @@ ul { .heading-display { margin-top: 3.25rem; - font-size: clamp(3.7rem, 16vw, 7.1rem); + /* Size complete lines against the space inside the page gutters. */ + font-size: min(7.1rem, calc((100vw - 2 * var(--site-horizontal-padding)) * 0.145)); line-height: 0.92; } @@ -1133,10 +1134,12 @@ ul { .underline-reveal-link { font-size: 0.7rem; + min-height: 2.75rem; + display: inline-flex; + align-items: center; } .heading-display { - font-size: clamp(3.05rem, 15.25vw, 4.8rem); letter-spacing: 0.02em; } @@ -1144,6 +1147,33 @@ ul { font-size: 0.83em; } + .grid-overlapping-trailing-image, + .grid-leading-image, + .grid-wide-inset-image, + .grid-tall-trailing-image, + .grid-small-inset-image { + margin-inline: auto; + } + + .grid-leading-image { + /* Leave room above the frame throughout its parallax travel. */ + margin-top: 3.5rem; + } + + .arrow-link, + .link-stack a { + min-height: 2.75rem; + align-items: center; + } + + .link-stack a { + display: inline-flex; + } + + .target-notice { + overflow-wrap: anywhere; + } + .heading-statement { font-size: clamp(2.15rem, 10.5vw, 3.3rem); letter-spacing: 0.025em; @@ -1166,7 +1196,7 @@ ul { } .heading-large { - font-size: clamp(2.75rem, 13vw, 4.1rem); + font-size: min(4.1rem, 13vw); letter-spacing: 0.025em; }