From ae8eb64a5848360c75c35dd16b1e07660b0160a6 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Fri, 15 Jul 2022 22:04:15 -0700 Subject: [PATCH] Use content-visiblity for archive pages The JS-free infinite scroll that doesn't make you lose your place. --- assets/css/main.css | 32 +++++++++++++++++++++++++------- layouts/_default/list.html | 9 ++++++++- linter-configs/vnu_filter.jq | 4 ++++ 3 files changed, 37 insertions(+), 8 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index f0f08bd..86d746e 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -8,11 +8,14 @@ * them pill-shaped, and I tweaked some margins/paddings to make some * things evenly aligned. * - * I also don't use any classes except to optimize embedded content. - * (e.g. to specify that an image should have pixelated rendering or be - * inverted 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. + * I also don't use any classes except when styling depends on + * *content* of an element rather than structure/semantics. Examples + * include images that look better with pixelated upscaling, and + * posts on the list of entries in the "notes" section that are tall + * and need a larger contain-intrinsic-size. + * 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. * * To keep myself from caring about minute details, I limited myself to * only defining spacing in increments of .25em. Pixels are 1px or @@ -105,6 +108,22 @@ html { padding: 0 .5em; } + /* Archive pages can get long. Allow them to get long without slowing + * down the browser by using content-visibility. */ + li article { + content-visibility: auto; + contain-intrinsic-size: 16em; + } + + /* Notes can get a bit long. */ + li article[itemtype="https://schema.org/SocialMediaPosting"] { + contain-intrinsic-size: 36em; + } + + .tall { + contain-intrinsic-size: 50em; + } + summary { /* It's not obvious that a has button semantics. * "cursor: pointer" is used on MDN, web.dev, GitHub, gov.uk, and @@ -472,10 +491,9 @@ form :focus { } /* Remove :focus styling for browsers that do support :focus-visible. - * Leave it on for form stuff. */ + * Leave it on for elements that are supposed to show focus on click. */ @supports selector(:focus-visible) { a:focus:not(:focus-visible), - summary:focus:not(:focus-visible), pre[tabindex]:focus:not(:focus-visible) { outline: none; } diff --git a/layouts/_default/list.html b/layouts/_default/list.html index af70bcf..8f03d20 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -9,8 +9,15 @@ {{- $pages := (where site.RegularPages "Section" .Section) -}} {{- range $pages -}} {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" -}} + {{- $isTall := and (eq .Section "notes") (gt .WordCount 200) -}} + {{- $itemtype := "SocialMediaPosting" -}} + {{- if eq .Section "posts" -}} + {{- $itemtype = "BlogPosting" -}} + {{- end -}}
  • -
    +