From 71dc86faf9ecbcac8d1232da0e3babacc2f4a2f9 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Mon, 9 May 2022 17:51:44 -0700 Subject: [PATCH] Fix non-interactive space section & impl Improve non-interactive space on the homepage and use a better screenshot to illustrate the concept. --- assets/css/main.css | 20 +++++++++++++------- assets/css/print.css | 4 +++- assets/p/touch_targets.avif | Bin 1614 -> 3694 bytes assets/p/touch_targets.png | Bin 2326 -> 4627 bytes assets/p/touch_targets_dark.avif | Bin 1692 -> 3442 bytes assets/p/touch_targets_dark.png | Bin 1951 -> 4308 bytes content/posts/website-best-practices.md | 14 ++++++++------ 7 files changed, 24 insertions(+), 14 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index c06633d..b5de646 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -3,9 +3,11 @@ * specific a11y, compatibility, or critical * usability need. * - * I also don't use any classes besides "pix". My HTML contains - * microformats2 classnames for IndieWeb parsers, but I don't actually - * use those for styling. + * 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). + * My HTML contains microformats2 classnames for IndieWeb parsers, but I + * don't actually use those for styling. * * To keep myself from caring about minute details, I limited myself to * only defining spacing in increments of .125em. Borders are either @@ -55,7 +57,9 @@ html { * are addressed by adding some body padding. * I followed Google's a11y recommendations of "at least 8px space * between tappables" by creating margins/paddings between nav links; - * re-use that same amount of space here. 1em + .25em = 1.25em */ + * re-use that same amount of space here. 24px is what it takes to + * create atl 48px of non-interactive space on