diff --git a/web/src/app/globals.css b/web/src/app/globals.css index f33309829..4d82ddd8d 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -1930,10 +1930,12 @@ font-size: 11px; vertical-align: middle; } + /* 13px, as every other date and label in the journal. At 10.5px the + archive's 74 dates and reading times were the smallest text on it. */ .journal-list-meta { display: inline-block; margin-top: 8px; - font-size: 10.5px; + font-size: var(--pf-fs-mono); line-height: 1; text-transform: uppercase; color: var(--ink-muted); diff --git a/web/src/components/journal/journalCss.test.ts b/web/src/components/journal/journalCss.test.ts index 1fa78a9cb..d28d9fe8a 100644 --- a/web/src/components/journal/journalCss.test.ts +++ b/web/src/components/journal/journalCss.test.ts @@ -349,3 +349,43 @@ describe("journal rules", () => { } }); }); + +// Below 721px the archive's dates and reading times were 10.5px, under the +// 13px every other date, label and caption in the journal keeps. On 28 +// October that was all 74 of them on /journal and /journal/en at 360, 390 and +// 430. + +describe("journal dates on a phone", () => { + const all = rules(css); + const desktop = rules(withoutMedia(css)); + const phone = mediaBlocks(css, "(max-width: 720px)").flatMap(rules); + const root = all.find((r) => r.selectors.includes(":root") && declaration(r.body, "--pf-fs-mono")); + /** "13px" or "var(--pf-fs-mono)" → 13. */ + const px = (value: string) => { + const token = value.match(/^var\((--[\w-]+)\)$/)?.[1]; + return parseFloat(token ? (declaration(root?.body ?? "", token) ?? "") : value); + }; + /** The font-size the last rule for `selector` gives it on a phone, the phone's own rules first. */ + const size = (selector: string) => { + const last = (list: ReturnType) => + list + .filter((r) => r.selectors.includes(selector)) + .map((r) => declaration(r.body, "font-size")) + .filter((v): v is string => Boolean(v)) + .at(-1); + return last(phone) ?? last(desktop); + }; + + it.each([ + ".journal-list-meta", + ".journal-context-list .journal-list-meta", + ".journal-featured-meta", + ".journal-dateline", + ".journal-md-figure figcaption", + ".journal-hero-cover figcaption", + ])("sets %s at 13px or more", (selector) => { + const value = size(selector); + expect(value, `no font-size for ${selector}`).toBeDefined(); + expect(px(value!)).toBeGreaterThanOrEqual(13); + }); +});