New 8601 image

Updated the 8601 image to a version with a new palette.

assets/css/main.css

@@ -2,16 +2,17 @@
  * touch-friendly layout.
  * Nothing here exists purely for aesthetics; everything addresses a
  * specific a11y, compatibility, or critical
- * usability need. The only exception is the h1's top margin.
+ * usability need.
  *
- * One exception: I re-set the input styles so Safari wouldn't make them
- * pill-shaped.
+ * Two exceptions: I re-set the input styles so Safari wouldn't make
+ * them pill-shaped, and I tweaked some margins to make some things
+ * evenly aligned.
  *
- * 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). 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 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.
  *
  * To keep myself from caring about minute details, I limited myself to
  * only defining spacing in increments of .25em. Pixels are 1px or
@@ -77,7 +78,7 @@ html {
 		 * containing lists of interactives, with 8px in between.
 		 * Don't use relative units here; this margin shouldn't scale with
 		 * zoom, or else text will get narrower with zoom. */
-		padding: 0 24px;
+		padding: 0 16px;
 	}
 
 	/* 45em is too wide for long body text.
@@ -89,6 +90,18 @@ html {
 		max-width: 35em;
 	}
 
+	/* Enable containment, especially useful for achive pages with
+	 * long lists of content. */
+	body > :not(main),
+	main > :not(article),
+	article > * {
+		contain: content;
+		/* 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. */
+		padding: 0 .5em;
+	}
+
 	summary {
 		/* It's not obvious that a <summary> has button semantics.
 		 * "cursor: pointer" is used on MDN, web.dev, GitHub, gov.uk, and
@@ -137,17 +150,13 @@ html {
 		margin: .75em 0;
 	}
 
-	dt > a {
-		margin: -.75em 0 -.75em -.25em;
-		display: inline-block;
-	}
-
 	/* <dt> should not be closer to the previous <dd> than the following <dd>.
 	 * That can happen in webmentions. */
 	dd {
 		padding-bottom: .25em;
 	}
 
+	dt > a,
 	aside > a {
 		margin: -.75em -.25em;
 	}
@@ -155,7 +164,8 @@ html {
 	a[href="#h1"], /* skip link */
 	div[itemprop="comment"] dd > a ,
 	footer > nav,
-	/* List items with direct hyperlink children should only have one hyperlink. */
+	/* List items with direct hyperlink children should only have one
+	 * hyperlink. */
 	li > a,
 	aside > a,
 	nav ol a {
@@ -163,7 +173,8 @@ html {
 		display: inline-block;
 	}
 
-	/* The nav has to be distant-enough from the top to make room for a skip-link. */
+	/* The nav has to be distant-enough from the top to make room for a
+	 * skip-link. */
 	header > nav {
 		margin: .75em 0 0 -.25em;
 		display: block;
@@ -327,15 +338,15 @@ samp {
 /* Some browsers don't support the hidden attr.
  * I use hidden spans in backlinks to provide ARIA labels.
  * Some ancient browsers don't support input[type="hidden"] */
-span[hidden],
+[hidden],
 input[type="hidden"] {
 	display: none;
 }
 
 /* Remove list style from data feeds. */
-main[itemtype="https://schema.org/DataFeed"] > ol {
-	padding: 0;
+[itemtype="https://schema.org/DataFeed"] > ol {
 	list-style-type: none;
+	padding: 0;
 }
 
 /* Narrow screens: long words can cause content to flow out of the
@@ -351,6 +362,7 @@ span[itemtype="https://schema.org/Person"] {
 
 /* Narrow screens: allow horizontal scroll in a pre block. */
 pre {
+	contain: content;
 	overflow: auto;
 	padding: .5em;
 }
@@ -390,6 +402,7 @@ div[itemprop="articleBody"] img {
 	max-width: 100%;
 }
 
+/* Stretch out audio elements so the progress meter is easier to use. */
 audio {
 	width: 100%;
 }
@@ -415,8 +428,8 @@ form > div {
 
 input {
 	/* Browsers like Safari make the submit button pill-shaped which
-	 * clashes with the input box. The only purely-cosmetic change on this
-	 * site. */
+	 * clashes with the input box. One of the only purely-cosmetic changes
+	 * on this site. */
 	appearance: none;
 
 	/* Don't shrink the size of the text in forms or make it system-ui. */
@@ -466,11 +479,6 @@ form :focus {
 }
 
 /* Todo:
- * - Some browsers don't scale SVGs properly; the img container
- *   dimensions crop the image rather than scale it. Investigate
- *   if this only applies to Internet Explorer or if it applies to
- *   other uncommon browsers too. If any non-IE browsers do this and/or
- *   if the spec allows this behavior, try to correct it here.
  * - Wait till Webkit fixes its broken-ass default dark stylesheet
  *   then consider trimming the dark stylesheet I provide.
  * */

content/meta/site-design.md

@@ -71,7 +71,7 @@ The website is built on well structured, semantic, [polygot XHTML5](https://www.
 
 This site sticks to Web standards. I regularly run a local build of [the Nu HTML Checker](https://github.com/validator/validator), `xmllint`, and [html proofer](https://github.com/gjtorikian/html-proofer) on every page in my sitemap, and see no errors. I do [filter out false Nu positives](https://git.sr.ht/~seirdy/seirdy.one/tree/master/item/linter-configs/vnu_filter.jq) and report them upstream when I can.
 
-I also perform cross-browser testing for both HTML and XHTML versions of my pages:
+I also perform cross-browser testing for both HTML and XHTML versions of my pages. I test with, but do not necessarily endorse, a large variety of browsers:
 
 - I maintain excellent compatibility with **mainstream engines:** Blink (Chromium and Edge), WebKit (Safari, Epiphany), and Gecko (Firefox). The hidden service also works well with the Tor Browser.
 
@@ -79,7 +79,7 @@ I also perform cross-browser testing for both HTML and XHTML versions of my page
 
 - I also regularly test compatibility with **current alternative engines:** the SerenityOS browser, Servo, NetSurf, Dillo, Kristall, and Goanna (Pale Moon's Gecko fork). I have excellent compatibility with Goanna and Servo. The site is usable in NetSurf, Dillo, and the SerenityOS browser; the always-expanded `<details>` elements might look odd. [The SerenityOS browser doesn't support ECDSA certificates](https://github.com/SerenityOS/serenity/issues/14160), but the Tildeverse mirror works fine. It also has some issues displaying my SVG avatar; it does not attempt to use the PNG fallback.
 
-- I occasionally test **abandoned engines,** sometimes with a TLS-terminating proxy if necessary. These engines include Tkhtml, KHTML, Internet Explorer (with and without compatibility mode), Netscape Navigator, and outdated versions of current browsers. The aforementioned issue with `<details>` applies to all of these choices. I use Linux, but testing in browsers like Internet Explorer depends on my access to a Windows machine.
+- I occasionally test **abandoned engines,** sometimes with a TLS-terminating proxy if necessary. These engines include Tkhtml, KHTML, Internet Explorer (with and without compatibility mode), Netscape Navigator, Opera Presto,[^1] and outdated versions of current browsers. The aforementioned issue with `<details>` applies to all of these choices. I use Linux, but testing in browsers like Internet Explorer depends on my access to a Windows machine.
 
 Some engines I have not yet tested, but hope to try in the future:
 
@@ -87,6 +87,7 @@ Some engines I have not yet tested, but hope to try in the future:
 - [Kozmonaut](https://github.com/twilco/kosmonaut)
 - [Moon](https://github.com/ZeroX-DG/moon)
 - [hastur](https://github.com/robinlinden/hastur)
+- [Flow Browser](https://www.ekioh.com/flow-browser/)
 
 Machine-friendliness
 --------------------
@@ -163,3 +164,7 @@ Privacy
 
 This site is **privacy-respecting.** Its CSP blocks all scripts, third-party content, and other problematic features. I describe how I go out of my way to reduce the information you can transmit on this site in [my privacy policy](../privacy/).
 
+
+[^1]: Opera Presto isn't really abandoned. Opera Mini's "Extreme" mode still uses a server-side Presto rendering engine; see {{<mention-work itemprop="citation" role="doc-credit" itemtype="Article">}}{{<cited-work name="Opera Browsers, Modes & Engines" url="https://dev.opera.com/articles/browsers-modes-engines/" extraName="headline">}}{{</mention-work>}}. That being said, I do test with the outdated desktop Presto engine in a sandboxed environment.
+
+

layouts/_default/404.html

@@ -69,7 +69,7 @@
 				<a rel="alternate" href="http://wgq3bd2kqoybhstp77i3wrzbfnsyd27wt34psaja4grqiezqircorkyd.onion/">Tor mirror</a>
 			</li>
 			<li>
-				<a href="{{ site.BaseURL }}privacy/">Privacy</a>
+				<a href="{{ site.BaseURL }}meta/privacy/">Privacy</a>
 			</li>
 			<li>
 				<a href="{{ site.BaseURL }}about/#location-seirdy-online">Contact</a>

layouts/_default/_markup/render-heading.html

@@ -19,7 +19,7 @@
 {{- if and (eq .Level 2) (.Page.Section) (ne .Page.Section "notes") -}}
 <!--crimes-->
 <aside role="none"><a
-	id="{{ .Anchor | safeURL }}-anchor" href="#{{ .Anchor | safeURL }}"
+	href="#{{ .Anchor | safeURL }}"
 	aria-labelledby="{{ .Anchor | safeURL }}-prefix {{ .Anchor | safeURL }}">
 	<span id="{{ .Anchor | safeURL }}-prefix">Permalink to section</span>
 </a></aside>

linter-configs/vnu_filter.jq

@@ -15,19 +15,7 @@
 			)
 			or
 			( # the search page has raw templates, let those slide. I validate the final dynamic search page manually.
-				(.url | test ("/search/index."))
-				and (
-					(.message == "Text not allowed in element “ol” in this context.")
-					or
-					(.message == "Bad value “{{ .URL }}” for attribute “href” on element “a”: Illegal character in path segment: “{” is not allowed.")
-					or
-					(.message == "Bad value “{{ .URL }}” for attribute “cite” on element “q”: Illegal character in path segment: “{” is not allowed.")
-				)
-				and (
-					(.extract | test("{{"))
-					or
-					(.extract | test("}}"))
-				)
+				.url | test ("/search/index.")
 			)
 		) | not
 	)