Add SerenityOS screenshot

obv gotta show off that awesome retro desktop

assets/css/main.css

@@ -2,9 +2,9 @@
  * Nothing here exists purely for aesthetics except the unstyled-list;
  * everything else addresses a specific a11y, compatibility, or critical
  * usability need.
- * I also don't use any classes besides unstyled-list. My HTML contains
- * microformats2 classnames for IndieWeb parsers, but I don't actually use
- * those. */
+ * I also don't use any classes besides unstyled-list and pixelated. My
+ * HTML contains microformats2 classnames for IndieWeb parsers, but I
+ * don't actually use those. */
 
 html {
 	/* Mobile screens benefit from greater line-spacing so links are
@@ -188,6 +188,10 @@ pre,
 	border: 1px solid;
 }
 
+.pix {
+	image-rendering: pixelated;
+}
+
 /* A black border is too harsh. */
 :not(pre) > code,
 :not(pre) > samp {

content/posts/website-best-practices.md

@@ -728,7 +728,7 @@ Underlines also make it easy for color-blind readers to distinguish both the beg
 Readers already expect underlined text to signify a hyperlink. Don't break fundamental affordances for aesthetics.
 
 Image op­timiza­tion {#image-optimization}
------------------------
+----------------------------
 
 Some image optimization tools I use:
 
@@ -990,7 +990,7 @@ Another example: outside the Web, I prefer indenting code with tabs instead of s
 Small phones typically support display rotation. When phones switch to landscape-mode, vertical space becomes precious. Fixed elements (e.g. dickbars) become a major usability hazard. Ironically, the WCAG's own interactive Techniques reference is a perfect example of how fixed elements impact usability on short screens.
 
 <figure>
-{{< picture name="wcag_quickref" alt="Website with banner covering top half of screen." sf=1.2 >}}
+{{< picture name="wcag_quickref" alt="Website with banner covering top half of screen." sf=1.75 >}}
 <figcaption>
 
 When filtering criteria on [the Quickref Reference page](https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_customize&showtechniques=134%2C124&levels=a&technologies=js%2Cserver%2Csmil%2Cpdf%2Cflash%2Csl), a dickbar lists active filters. I increased the zoom level; you may have to add more filters to fill the screen with a smaller font.
@@ -1052,7 +1052,7 @@ Line spacing (leading) is at least space-and-a-half within paragraphs, and parag
 The <abbr title="Web Accessibility Initiative">WAI</abbr>'s Cognitive and Learning Disabilities Accessibility Task Force [recommends changing this Success Criterion's level](https://w3c.github.io/coga/extension/#changedlevels), finding it too important to be relegated to AAA status.
 
 Non-<wbr>brow&shy;sers: reading mode {#non-browsers-reading-mode}
--------------------------------
+------------------------------------
 
 Fully standards-compliant browsers aren't the only programs people use. They also use "reading mode" tools and services.
 
@@ -1293,6 +1293,15 @@ These tests begin reasonably, but gradually grow absurd. Once again, use your ju
 
 I'm still on step 14, trying to find new ways to break this page. If you come up with a new test, please [share it](mailto:~seirdy/seirdy.one-comments@lists.sr.ht).
 
+<figure>
+{{< picture name="serenity" alt="Retro-looking web browser with bitmap fonts showing this article's \"Code snippet 7\"." sf=2 >}}
+<figcaption>
+
+This page in the [SerenityOS](https://serenityos.org/) web browser. TLS&nbsp;1.2 support isn't finished yet; I loaded it from a mirror with a compatible cipher suite.
+
+</figcaption>
+</figure>
+
 Future updates
 --------------
 

layouts/shortcodes/picture.html

@@ -9,13 +9,17 @@
 {{ $dark_avif := resources.GetMatch (printf "/p/%s_dark.avif" (.Get "name")) -}}
 {{ $dark_jxl := resources.GetMatch (printf "/p/%s_dark.jxl" (.Get "name")) -}}
 
+{{- $isPix := false -}}
 {{- $img_width := $light_png.Width -}}
 {{- $img_height := $light_png.Height -}}
 {{- with (.Get "sf") -}}
 	{{- $img_width = (mul $img_width . ) -}}
 	{{- $img_height = (mul $img_height . ) -}}
+	{{- if eq . 2 -}}
+		{{- $isPix = true -}}
+	{{- end -}}
 {{- end -}}
-<picture>
+<picture{{ if $isPix }} class="pix"{{ end }}>
 	{{ with $dark_svg -}}
 	{{ $dark_svg_src := . | resources.Fingerprint "md5" -}}
 	<source
@@ -82,10 +86,9 @@
 	<img
 		width="{{ $img_width }}" height="{{ $img_height }}"
 		src="{{ $light_png.RelPermalink }}" alt='{{ .Get "alt" }}'
-		{{- with .Parent -}}
+		{{ with .Parent -}}
 		{{- with .Get "id" -}}
-		aria-describedby="transcript-{{ . }}"	
-		{{- end -}}
-		{{- end }}
+		aria-describedby="transcript-{{ . }}"
+		{{ end }}{{ end -}}
 		decoding="async">
 </picture>{{- /* Strip trailing newline: https://github.com/gohugoio/hugo/issues/1753 */ -}}