From 80ef3a4a9a5e3e74a81409b8af4c654fe7e2ff71 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Mon, 11 Jul 2022 17:20:36 -0700 Subject: [PATCH] Refactor to make more body text narrow Now more text should fall within WCAG limits. --- assets/css/main.css | 8 +++++--- content/_index.md | 47 ++++++++++++++++++++++++++++++-------------- content/bookmarks.md | 4 +++- layouts/index.html | 5 +++++ 4 files changed, 45 insertions(+), 19 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 552bcc9..c5338e7 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -9,7 +9,7 @@ * * I also don't use any classes except for image presentation. (e.g. to * specify that an image should have pixelated rendering or be inverted - * in dark mode). + * in dark mode). One exception: a class for narrow width body text. * My HTML contains microformats2 classnames for IndieWeb parsers, but I * don't actually use those for styling. * @@ -59,7 +59,7 @@ html { * viewport. This isn't for large blocks of text yet, so we don't have * to go by SC 1.4.8. * 45em = lowest acceptable width for titles, nav, footers, etc */ - max-width: 45em; + max-width: 42em; /* Phone cases can cover the edges. Swipe-from-edge navigations * should not conflict with the page elements. Focus outlines for @@ -77,7 +77,9 @@ html { /* 45em is too wide for long body text. * Typically meets SC 1.4.8, plus or minus a few characters. */ - div[itemprop="articleBody"] { + div[itemprop="articleBody"], + li[itemprop="dataFeedElement"], + .narrow { margin: auto; max-width: 35em; } diff --git a/content/_index.md b/content/_index.md index 4af687d..8a781f1 100644 --- a/content/_index.md +++ b/content/_index.md @@ -11,24 +11,14 @@ sitemap: - Priority: 0.9 stype: "WebSite" --- +About me +-------- +