Update Weasyprint compatibility

Reflects recent changes to styling of <details>.

assets/css/main.css

@@ -1,7 +1,7 @@
 /* CSS that adds the bare minimum for a simple, accessible,
- * touch-friendly layout.
+ * touch-friendly layout compatible with as many UAs as possible.
  * Nothing here exists purely for cosmetics; everything addresses a
- * specific a11y, compatibility, or critical
+ * specific accessibility, compatibility, or critical
  * usability need.
  *
  * Three exceptions:
@@ -36,9 +36,9 @@
  * years.
  *
  * To keep myself from caring about minute details, I limited myself to
- * only defining spacing in increments of .25em. Pixels are 1px or
+ * only defining spacing in increments of .25em. Pixels are multiples of
- * multiples of 3px. This also improves compression. No more "finding
+ * 3px. This also improves compression.
- * the perfect value".
+ * No more "finding the perfect value".
  *
  * I cite WCAG 2.2 success criteria with "SC". I also tried to meet
  * the Google a11y requirement of 48px tap targets separated by atl
@@ -449,7 +449,10 @@ h1 {
 	body {
 		-webkit-hyphens: auto;
 		hyphens: auto;
-		padding: 0 8px;
+		/* Use an absolute unit for side margins so they don't increase with zoom.
+		 * I computed this based on the thickness I saw in scrollbars and
+		 * bezels on some watches. */
+		padding: 0 6px;
 	}
 
 	li > a,
@@ -564,20 +567,51 @@ img,
 mark, /* borders provide a distinguishing factor besides color */
 pre,
 summary {
-	border: 1px solid;
+	border: thin solid;
 }
 
+/* Putting a border around <details> makes summaries and
+ * the toggled details linked together as a sort of non-semantic
+ * section. I did this because in some situations (such as print layouts
+ * or PDF generators), <summary> receives no styling; it looks like
+ * ordinary text! There's no indication that it represents a toggle. Of
+ * course, you can't actually toggle things on a printed page, so I
+ * understand why they had to do this. Still, I think it's necessary to
+ * provide an indicator that you're looking at a section that was
+ * toggled somehow. Assistive technologies expose the button semantics
+ * of the <summary> and read its contents (which on seirdy.one start
+ * with the word "toggle"; interactive mouse/keyboard users can click it
+ * and see the list-style-type; print users should also have some
+ * indication.
+ *
+ * We still have more work to do, though. The contents of <details> are
+ * smooshed up against the border, so introduce some padding. This
+ * padding should apply to all top-level children of `details` *except*
+ * the `summary`, since we don't want a double-border.
+ *
+ * By applying this padding, we also happen to ensure that `details`
+ * children never protrude outside the `details` container. We can then
+ * apply some CSS containment for free without consequences. */
+
 /* A black border is too harsh; the extra visual noise is distracting
  * to users with eye-tracking or ADHD. Only special items like headings
- * should draw gaze. */
+ * should draw gaze.
+ *
+ * We also need padding around inline code snippets so the border
+ * doesn't touch the letters and screw up readability. */
+details,
 :not(pre) > code,
 :not(pre) > samp {
-	border: 1px solid #999;
+	border: thin solid #999;
 
 	/* borders shouldn't touch text */
 	padding: 0 .25em;
 }
 
+summary {
+	margin: 0 -0.25em;
+}
+
 /* center standalone images; same justification as
  * for centering the body contents. Also makes images easier to see
  * for people holding a device with one hand. */
@@ -675,4 +709,7 @@ form :focus {
 /* Todo:
  * - Wait till Webkit fixes its broken-ass default dark stylesheet
  *   then consider trimming the dark stylesheet I provide.
+ *   (UPDATE: they did! now I'll wait maybe three years for it to roll
+ *   out as much as possible before removing my dark styles or
+ *   relegating them to an optional stylesheet.)
  * */

content/meta/badges.md

@@ -99,7 +99,7 @@ Sites that link back to me:
 <a href="https://daudix.codeberg.page/about/">{{<picture name="b/daudix" alt="Daudix." width="162" height="62" class="pix">}}</a>
 <a href="https://dj-chase.com/">{{<picture name="b/dj-chase" alt="DJ Chase." width="162" height="62" class="pix">}}</a>
 
-### Other
+### Other cool sites
 
 <a href="https://keithhacks.cyou/">{{<picture name="b/keith" alt="the word “keith” after a tilde and a bone, with a rainbow border." width="162" height="62" class="pix">}}</a>
 <a href="https://astrid.tech/">{{<picture name="b/astriddottech" alt="astrid dot tech in glitchy distorted letters." width="162" height="62" class="pix">}}</a>
@@ -115,5 +115,6 @@ The Yesterweb is winding down its social activity after admin burnout, but it re
 
 ## Other
 
+{{<picture name="b/lain" alt="Close-up of Lain Iwakura’s eyes with a static filter." width="162" height="62" class="pix">}}
 {{<picture name="b/graphicdesign" alt="The words “graphic design is my passion” next to a bad drawing of a frog. Sarcasm implied." width="162" height="62" class="pix">}}
 {{<picture name="b/ilovehorror" alt="I heart horror." width="162" height="62" class="pix">}}

content/meta/site-design.md

@@ -100,7 +100,7 @@ Mainstream engine forks
 : Pale Moon and recent versions of K-Meleon use Goanna, a single-process fork of Firefox's Gecko engine. Ultralight is a proprietary, source-available fork of WebKit focused on lightweight embedded webviews. My site works in these engines without any noticeable issues.
 
 Alternative engines
-: I test compatibility with current alternative engines: the SerenityOS browser, Servo, NetSurf, Kristall, and litehtml. I have excellent compatibility with litehtml and Servo. The site is usable in NetSurf, and the SerenityOS browser. Servo is the only engine in this category with support for `<details>`. ~~[The SerenityOS browser lacks ECDSA certificate support](https://github.com/SerenityOS/serenity/issues/14160), but the Tildeverse mirror works fine.~~ <ins itemprop="correction" itemscope="" itemtype="https://schema.org/CorrectionComment" cite="https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9">Update <time itemprop="datePublished">2024-01-30</time>: <span itemprop="text">[SerenityOS LibTLS merged support for these ciphers in October 2023](https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9), resolving this incompatibility</span></ins>. The SerenityOS browser also has issues displaying my inline SVG avatar.
+: I test compatibility with current alternative engines: Ladybird (the SerenityOS browser), Servo, NetSurf, Kristall, and litehtml. I have excellent compatibility with litehtml, Ladybird, and Servo. The site is usable in NetSurf. litehtml and NetSurf do not support `<details>`, but remain usable. ~~[The SerenityOS browser lacks ECDSA certificate support](https://github.com/SerenityOS/serenity/issues/14160), but the Tildeverse mirror works fine.~~ <ins itemprop="correction" itemscope="" itemtype="https://schema.org/CorrectionComment" cite="https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9">Update <time itemprop="datePublished">2024-01-30</time>: <span itemprop="text">[SerenityOS LibTLS merged support for these ciphers in October 2023](https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9), resolving this incompatibility</span></ins>.
 
 Textual browsers
 : The site works well with textual browsers. All features except `<details>` work in Lynx and Links2. I include [felinks (an ELinks fork)](https://github.com/rkd77/elinks), edbrowse, and w3m in my tests. [w3m doesn't support soft hyphens](https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=830173), but the site is still otherwise usable in it. I support these engines by making CSS a strictly-optional progressive enhancement and by using semantic markup. I test with Edbrowse less often. No textual browser supports `<details>`.
@@ -108,21 +108,26 @@ Textual browsers
 Abandoned engines
 : I occasionally test abandoned engines, sometimes with a TLS-terminating proxy if necessary. These engines include Tkhtml, KHTML, Dillo,[^1] Internet Explorer[^2] (with and without compatibility mode), Netscape Navigator, old Presto-based Opera versions,[^3] and outdated versions of current browsers. No abandoned engine supports `<details>`. I use Linux, but testing in Internet Explorer depends on my access to a Windows machine. Besides the `<details>` issues, the site works well in Internet Explorer 11 and Opera Presto. The site has layout issues but remains usable in Tkhtml, KHTML, and Netscape.
 
+Others
+: WeasyPrint uses a custom browser engine optimized for print. I test a small selection of representative pages with it. Should I ever stumble across a VR headset, I'll be sure to test Wolvic too.
+
 I support compatibility to the following degrees:
 
-- Works without major issues in mainstream engines, the Tor browser, Goanna, and Ultralight.
+- Works without major issues in mainstream engines, the Tor browser's "Safest" mode (assuming use of the Onion service which does not use SVGs), Ladybird, Goanna, Ultralight, and WeasyPrint.[^0]
 - Fully operable in textual browsers, litehtml, and NetSurf. Some issues (e.g. missing `<details>`) might make the experience unpleasant, but all major functions work.
-- Basic features in abandoned engines, Dillo, the SerenityOS browser. Some ancillary features may not work (e.g. forms for Webmentions and search), but users can browse and read.
+- Basic features in abandoned engines and Dillo. Some ancillary features may not work (e.g. forms for Webmentions and search), but users can browse and read.
+
+[^0]: WeasyPrint doesn't support `details`, but I don't fully count this against my site's support for its engine because WeasyPrint targets non-interactive print media. Instead, I just ensure that the site makes sense in WeasyPrint without special `details` styling. Since my stylesheets define a border around `summary` and `details` elements, and since I they always start with the word "toggle", they mostly make sense even when not rendered with special builtin styles.
 
 Some engines I have not yet tested, but hope to try in the future:
 
 - [Flow Browser](https://www.ekioh.com/flow-browser/)
 - [gngr](https://gngr.info/)
-- [WeasyPrint](https://weasyprint.org/)
 - [Netzhaut](https://web.archive.org/web/20230405031300/http://netzhaut.dev/)
 - [Kozmonaut](https://github.com/twilco/kosmonaut)
 - [Moon](https://github.com/ZeroX-DG/moon)
 - [hastur](https://github.com/robinlinden/hastur)
+- [Wolvic](https://wolvic.org/en/)
 
 ## Machine-friendliness
 
@@ -224,7 +229,7 @@ I'm not opposed to these features, but I probably won't implement support for th
 This site is **privacy-respecting.** Its <abbr title="Content Security Policy">CSP</abbr> blocks all scripts, third-parties, and other problematic features. For details on this site's privacy, [read the privacy policy](../privacy/).
 
 
-[^1]: Although no official announcement of Dillo's demise exists, the browser's development halted years ago. The Dillo website's domain name expired, so [I mirrored the Dillo repository]({{<relref "/notes/dillo-repository-mirror.md">}}).
+[^1]: Although no official announcement of Dillo's demise exists, the browser's development halted years ago. The Dillo website's domain name expired, so [I mirrored the Dillo repository]({{<relref "/notes/dillo-repository-mirror.md">}}). The project has since been picked up by a different team that does not use the original Dillo domain, and [Dillo work continues on GitHub](https://dillo-browser.github.io/).
 
 [^2]: [Internet Explorer's engine isn't abandoned]({{<relref "internet-explorer-is-almost-gone.md">}}). Microsoft discontinued the consumer version, but supports the browser for enterprise users. I used to have access to the latter; I now test with "Internet Explorer Mode" in Edge when I can access a Windows machine.