Use content-visiblity for archive pages

The JS-free infinite scroll that doesn't make you lose your place.

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.
+ * I also don't use any classes except when styling depends on
- * (e.g. to specify that an image should have pixelated rendering or be
+ * *content* of an element rather than structure/semantics. Examples
- * inverted in dark mode). One exception: a class for narrow width body
+ * include images that look better with pixelated upscaling, and
- * text. My HTML contains microformats2 classnames for IndieWeb parsers,
+ * posts on the list of entries in the "notes" section that are tall
- * but I don't actually use those for styling.
+ * 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 <summary> 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;
 	}

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 -}}
 		<li itemprop="dataFeedElement" itemscope="" itemtype="https://schema.org/DataFeedItem">
-			<article class="h-entry hentry" itemprop="item" itemscope="" itemtype="https://schema.org/SocialMediaPosting" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
+			<article
+				class="h-entry hentry{{ with $isTall }} tall{{ end }}"
+				itemprop="item" itemscope="" itemtype="https://schema.org/{{ $itemtype }}" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 				<h2 itemprop="name headline" class="p-name entry-title">
 					<a href="{{ .Permalink }}" itemprop="url" class="u-url url" rel="bookmark">
 						{{ .Title }}

linter-configs/vnu_filter.jq

@@ -14,6 +14,10 @@
 				and (.extract | test(" name=\"theme-color\""))
 			)
 			or
+			( # see https://github.com/w3c/css-validator/issues/369
+				.message == "CSS: “contain-intrinsic-size”: Property “contain-intrinsic-size” doesn't exist."
+			)
+			or
 			( # the search page has raw templates, let those slide. I validate the final dynamic search page manually.
 				.url | test ("/search/index.")
 			)