Styles: more containment, fix spacing

assets/css/main.css

@@ -101,7 +101,7 @@ html {
 	/* We increase the target size of h2/h3 links in a way that would cause
 	 * issues with content containment */
 	article > :not(h2):not(h3) {
-		contain: content;
+		contain: inline-size layout paint style;
 		/* Add padding on both sides so that focus outlines don't escape their
 		 * containers. This will let us enable CSS containment without
 		 * clipping overflowing elements. */
@@ -115,8 +115,18 @@ html {
 
 	/* Archive pages can get long. Allow them to get long without slowing
 	 * down the browser by using content-visibility. */
+	aside > a,
+	footer,
+	dt,
+	a[role="doc-backlink"],
+	section[role="doc-endnotes"],
 	li article {
 		content-visibility: auto;
+		contain-intrinsic-size: auto 3em;
+	}
+
+	footer,
+	li article {
 		contain-intrinsic-size: auto 16em;
 	}
 
@@ -125,7 +135,8 @@ html {
 		contain-intrinsic-size: auto 36em;
 	}
 
-	.tall {
+	.tall,
+	section[role="doc-endnotes"] {
 		contain-intrinsic-size: auto 50em;
 	}
 
@@ -136,6 +147,22 @@ html {
 		cursor: pointer;
 	}
 
+	/* Full-width elements (e.g. display: block) have known widths, so
+	 * contain their widths. */
+	article,
+	h1,
+	pre,
+	dt,
+	summary {
+		contain: inline-size layout paint style;
+	}
+
+	p,
+	h2,
+	h3 {
+		contain: inline-size layout style;
+	}
+
 	/* If we have a list of disclosure widgets, we need some
 	 * non-interactive space on the screen that's safe to tap. */
 	form,
@@ -143,12 +170,6 @@ html {
 		margin: .5em 0;
 	}
 
-	/* Make superscripts a bit easier to tap. */
-	sup > a {
-		margin-left: .25em;
-		padding-bottom: .5em;
-	}
-
 	/* SC 2.5.5, Google a11y: Increase tap target size a bit
 	 * - Summary is a tappable button
 	 * - standalone links in lists are usually parts of collections of
@@ -172,9 +193,12 @@ html {
 	 * Also prevent overlapping outlines on focus */
 
 	/* We've increased the padding for dt > a, but dt without a link
-	 * should take up as much space. */
+	 * should take up as much space. Also: since it got
+	 * content-visibility: auto previously, give it an intrinsic size. */
 	dt {
-		margin: .75em 0;
+		padding: 1em .5em;
+		margin: -.25em 0 -.25em -.5em;
+		contain-intrinsic-size: auto 1.5em;
 	}
 
 	/* <dt> should not be closer to the previous <dd> than the following <dd>.
@@ -203,8 +227,10 @@ html {
 	}
 
 	/* Increase tap-target size of title links. */
+
 	h2 > a,
 	h3 > a {
+		contain: content;
 		display: inline-block;
 		padding: .5em .25em;
 	}
@@ -223,6 +249,9 @@ html {
 	}
 
 	/* Multiple consecutive <dt> that share a <dd> shouldn't have tap targets overlap */
+	dt + dt {
+		padding-top: .25em;
+	}
 	dt + dt > a {
 		padding-top: 0;
 	}
@@ -234,6 +263,7 @@ html {
 
 	/* Increase backlink tap target size to at least 48x48 */
 	a[role="doc-backlink"] {
+		contain: content;
 		display: inline-block;
 		margin-left: -.5em;
 		padding: .75em .5em;
@@ -251,6 +281,22 @@ html {
 	}
 }
 
+/* Make superscripts a bit easier to tap, and prevent consecutive
+ * superscripts from touching. */
+sup > a {
+	margin-left: .25em;
+	padding-bottom: .5em;
+}
+
+/* Make superscript font size a bit larger so they cross some APCA color
+ * contrast thresholds on the dark theme. Also prevent them from messing
+ * with line-height. */
+sup {
+	font-size: 0.9em;
+	line-height: 0;
+}
+
+
 /* narrow screens: reduce list indentation, hyphenate nested lists
  * touch screens: lists of links should be easy to tap so give them
  * some spacing (partial SC 2.5.5). There should be non-interactive
@@ -284,12 +330,13 @@ nav ul {
 nav[itemprop="breadcrumb"] ol,
 nav[itemprop="breadcrumb"] li,
 nav[itemprop="breadcrumb"] > span,
-nav ul li {
+nav ul li,
+dt > a {
 	display: inline-block;
 }
 
 nav[itemprop="breadcrumb"] ol {
-	margin: -.25em 0;
+	margin: -.25em;
 	padding: 0;
 }
 
@@ -321,6 +368,16 @@ h1 {
 		hyphens: auto;
 		padding: 0 8px;
 	}
+
+	li > a,
+	nav[itemprop="breadcrumb"] a,
+	nav[itemprop="breadcrumb"] > span {
+		padding: .25em;
+	}
+
+	hr {
+		margin: .25em 0;
+	}
 }
 
 /* <kbd> should be distinguished from <code> and surrounding text
@@ -396,7 +453,6 @@ span[itemtype="https://schema.org/Person"] {
 
 /* Narrow screens: allow horizontal scroll in a pre block. */
 pre {
-	contain: content;
 	overflow: auto;
 	padding: .5em;
 }

assets/css/print.css

@@ -8,19 +8,19 @@
 
 	/* Hide screen-only content */
 	a[href="#h1"], /* Skip link */
+	a[role="doc-backlink"], /* can't navigate back on print. */
 	aside:not([role="note"]),
 	/* An un-opened summary inside an article has no use in print.
 	 * Outside an article it's used in my webring list where it has some
 	 * use, see below. */
 	article summary,
 	section[aria-labelledby="webmentions"],
-  /* You can't navigate in a printout. */
+  /* You can't navigate across the site in a printout. */
 	footer,
 	/* splitting up sections with <hr> is unnecesary if those
 	 * sections are removed */
 	body > hr,
-	nav a:not([rel="home"]) span,
+	nav:not([itemprop="breadcrumb"]) a:not([rel="home"]) {
-	nav[itemprop="breadcrumb"] {
 		display: none;
 	}
 }
@@ -28,6 +28,7 @@
 /* Print: don't break up self-contained items. */
 figure,
 section[itemprop="mentions"],
+blockquote,
 li {
 	break-inside: avoid;
 }

layouts/partials/breadcrumblist.html

@@ -3,7 +3,7 @@
 <hr />
 <nav aria-labelledby="bc-label"
 	itemscope="" itemprop="breadcrumb" itemtype="https://schema.org/BreadcrumbList">
-	<span id="bc-label">You are here:</span>
+	<span id="bc-label">You are here:&#160;</span>
 	<ol>
 		{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
 	</ol>

linter-configs/hintrc

@@ -15,16 +15,26 @@
 	"hints": {
 		"apple-touch-icons": "off",
 		"axe/aria": "off",
+		"axe/color": "off",
+		"axe/forms": "off",
+		"axe/keyboard": "off",
+		"axe/language": "off",
+		"axe/name-role-value": "off",
+		"axe/semantics": "off",
+		"axe/sensory-and-visual-cues": "off",
+		"axe/structure": "off",
+		"axe/tables": "off",
+		"axe/text-alternatives": "off",
+		"axe/time-and-media": "off",
 		"compat-api/css": [
 			"error",
 			{
 				"ignore": [
-					"filter",
 					"contain",
-					"image-rendering: pixelated",
 					"contain-intrinsic-size",
-					"content-visibility",
+					"content-visibility: auto",
-					"text-size-adjust"
+					"image-rendering: pixelated",
+					"text-size-adjust: none"
 				]
 			}
 		],
@@ -54,16 +64,27 @@
 		],
 		"http-compression": "off",
 		"https-only": "error",
+		"sri": "error",
+		"manifest-exists": "error",
 		"manifest-file-extension": "error",
 		"manifest-is-valid": "error",
+		"manifest-app-name": "error",
+		"minified-js": "off",
 		"meta-viewport": "error",
 		"no-bom": "error",
 		"no-p3p": "error",
+		"no-protocol-relative-urls": "error",
+		"no-friendly-error-pages": "error",
+		"no-vulnerable-javascript-libraries": "off",
 		"html-checker": "off",
+		"image-optimization-cloudinary": "off",
+		"no-disallowed-headers": "error",
+		"meta-charset-utf-8": "error",
+		"disown-opener": "error",
 		"content-type": ["error", {
 			".*\\.svg": "image/svg+xml"
 		}],
-		"no-html-only-headers": [ "warning",
+		"no-html-only-headers": [ "error",
 			{
 				"ignore": ["content-security-policy"]
 			}],
@@ -74,6 +95,16 @@
 				"loadTime": 10
 			}
 		],
+		"css-prefix-order": "error",
+		"scoped-svg-styles": "error",
+		"button-type": "error",
+		"strict-transport-security": "error",
+		"x-content-type-options": "error",
+		"typescript-config/is-valid": "off",
+		"typescript-config/no-comment": "off",
+		"typescript-config/target": "off",
+		"typescript-config/strict": "off",
+		"typescript-config/import-helpers": "off",
 		"stylesheet-limits": [
 			"error",
 			{

linter-configs/vnu_filter.jq

@@ -18,6 +18,10 @@
 				.message == "CSS: “contain-intrinsic-size”: Property “contain-intrinsic-size” doesn't exist."
 			)
 			or
+			( # see https://github.com/w3c/css-validator/issues/370
+				.message == "CSS: “contain”: “inline-size” is not a “contain” value."
+			)
+			or
 			( # the search page has raw templates, let those slide. I validate the final dynamic search page manually.
 				.url | test ("/search/index.")
 			)