diff --git a/web/src/app/globals.css b/web/src/app/globals.css index 5b559e6b0..318349bc3 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -1904,6 +1904,12 @@ .journal-reading blockquote { font-size: 16px; } + /* A list's items stand as far apart as paragraphs. The reset leaves a + list no marker and no indent, and at 0 apart the three items of the + list in "Why I write these" ran on as one block of 11 lines at 390. */ + .journal-reading li { + margin-bottom: 1.1em; + } .journal-post-list a { display: block; position: relative; diff --git a/web/src/components/journal/journalCss.test.ts b/web/src/components/journal/journalCss.test.ts index 0a52fdc99..e5d744b1b 100644 --- a/web/src/components/journal/journalCss.test.ts +++ b/web/src/components/journal/journalCss.test.ts @@ -478,3 +478,29 @@ describe("journal text size on a phone", () => { expect(perLine).toBeLessThanOrEqual(28); }); }); + +// Below 721px the items of a list in a post stood 0 apart, and the reset +// leaves a list no marker and no indent. On 28 October the one list in the 74 +// posts, in "Why I write these" and its Korean twin, ran its three items on +// as one block: 11 lines in Korean and 10 in English at 390. + +describe("journal lists on a phone", () => { + const phone = mediaBlocks(css, "(max-width: 720px)").flatMap(rules); + /** The bottom margin the phone rules give `selector`, as written. */ + const bottom = (selector: string) => { + let value: string | undefined; + for (const r of phone.filter((r) => r.selectors.includes(selector))) { + const all = declaration(r.body, "margin")?.split(/\s+/); + if (all) value = all[2] ?? all[0]; + value = declaration(r.body, "margin-bottom") ?? value; + } + return value; + }; + + it("keeps a post's list items 0.8 to 1.5em apart", () => { + const value = bottom(".journal-reading li") ?? "0"; + expect(value, "the bottom margin of .journal-reading li").toMatch(/^[\d.]+em$/); + expect(parseFloat(value)).toBeGreaterThanOrEqual(0.8); + expect(parseFloat(value)).toBeLessThanOrEqual(1.5); + }); +});