From a4cfb43127a9e8d0efbcd1c3dfbf2785221274a1 Mon Sep 17 00:00:00 2001 From: Ben Dichter Date: Fri, 9 Oct 2026 15:11:45 -0400 Subject: [PATCH 1/3] Load the Inter font and use it for body text Every font-family rule in style.css names Inter, but the font never loaded. Its `@import` sat in the middle of the stylesheet, and browsers ignore an `@import` that comes after other rules, so headings, lists and navigation fell back to Helvetica or Arial. Paragraphs written in Markdown have no inter-* class and used Bootstrap's system font stack, so a page could show two typefaces. The font is now requested from the page head, with a preconnect, and `body` is set to Inter so that all text uses it. Inter is slightly wider than the fallback fonts. The header button would wrap to two lines between 1200 and 1400 px, so it is marked nowrap. Co-Authored-By: Claude Opus 5.5 (1M context) --- assets/css/style.css | 8 ++++++-- layouts/partials/essentials/head.html | 5 +++++ layouts/partials/shared/header.html | 2 +- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 9708038..87cf74b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -242,8 +242,12 @@ } } -/* Fonts */ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); +/* Fonts. Inter is loaded in head.html. Without this rule, text that has no + inter-* class, such as paragraphs written in Markdown, uses Bootstrap's + system font stack. */ +body { + font-family: "Inter", sans-serif !important; +} /* Variables */ :root { diff --git a/layouts/partials/essentials/head.html b/layouts/partials/essentials/head.html index a2fcfcc..d004fe7 100644 --- a/layouts/partials/essentials/head.html +++ b/layouts/partials/essentials/head.html @@ -45,3 +45,8 @@ + +{{/* Inter, the typeface that the font-family rules in style.css name */}} + + + diff --git a/layouts/partials/shared/header.html b/layouts/partials/shared/header.html index 32469f8..784e6b0 100644 --- a/layouts/partials/shared/header.html +++ b/layouts/partials/shared/header.html @@ -151,7 +151,7 @@
+ class="btn btn-primary bg-second scale border-second animate text-nowrap"> {{ site.Params.cta.text }}
From f60d89b7b0b24c748af50587278f35a619f83824 Mon Sep 17 00:00:00 2001 From: Ben Dichter Date: Fri, 9 Oct 2026 15:16:30 -0400 Subject: [PATCH 2/3] Cap running text at about 80 characters per line Paragraphs have no width limit, so on a desktop window they stretch across the whole container. On the About, Team, FAQ and tool pages that is 130 to 170 characters per line, about twice what is comfortable to read. Paragraphs and list items are now capped at 40em, measured in their own font size. Those that hold an image, video, embed, table, code block or nested layout are left alone, as are headings, cards and grids. Centered paragraphs get auto margins so that they stay centered. Nothing changes at phone width, where lines are already short. Co-Authored-By: Claude Opus 5.5 (1M context) --- assets/css/style.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/assets/css/style.css b/assets/css/style.css index 9708038..f639d6f 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1382,3 +1382,18 @@ a.next-page-btn:hover { .content pre::-webkit-scrollbar-thumb:hover { background: #afb8c1 !important; } + +/* Line length. Running text is capped at about 80 characters per line. + Paragraphs and list items that hold an image, video, embed, table, code + block or other layout keep the full width of their container. */ +main :is(p, li):not(:has(img, video, iframe, table, pre, div)) { + max-width: 40em !important; +} + +/* Keep centered paragraphs centered once they are narrower than their + container. */ +main .text-center p, +main p.text-center { + margin-left: auto; + margin-right: auto; +} From 85ae4d0275273600dc1609929d796394ac45796a Mon Sep 17 00:00:00 2001 From: Ben Dichter Date: Fri, 9 Oct 2026 15:16:51 -0400 Subject: [PATCH 3/3] Darken the body text of news posts The body of a news post is set in #737780, which has a contrast ratio of 4.49:1 on white, just under the 4.5:1 that WCAG AA asks for. News posts now use #374151 (10.3:1), the color the other templates use for body text. Co-Authored-By: Claude Opus 5.5 (1M context) --- layouts/news/single.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/news/single.html b/layouts/news/single.html index 9f0c26f..465acb3 100644 --- a/layouts/news/single.html +++ b/layouts/news/single.html @@ -57,7 +57,7 @@

{{ .Title | markdownify }}

{{ end }} -
+
{{ .Content }}
{{ with .Params.ext_link }}