Better backlinks, streamline css

- Streamline CSS to reduce duplication
- Better backlink accessible names for endnotes with multiple backlinks

This required updating a false positive filter in my vnu jq filter.

assets/css/main.css

@@ -211,11 +211,10 @@ section[itemprop="mentions"] > figure {
 	margin: 0;
 }
 
-/* figcaptions should be distinct from surrounding paragraphs tho */
 section[itemtype="https://schema.org/ImageObject"] figcaption,
-figure[itemtype="https://schema.org/ImageObject"] figcaption {
+figure[itemtype="https://schema.org/ImageObject"] figcaption,
+div[itemprop="articleBody"] > figure:not([itemtype="https://schema.org/ImageObject"]) {
 	contain: content;
-	margin: 0 10%;
 }
 
 /* browsers make monospace small and unreadable for some dumb legacy
@@ -269,7 +268,6 @@ pre {
  * for centering the body contents. Also makes images easier to see
  * for people holding a device with one hand. */
 picture > img {
-	/* Don't decode the image until it's near the fold */
 	display: block;
 	height: auto;
 	margin: auto;
@@ -286,17 +284,11 @@ picture > img {
  * Also use "content-visibility: auto" to improve performance by
  * reducing the number of DOM nodes rendered at once. */
 footer,
-section[aria-labelledby="webmentions"],
+section[aria-labelledby="webmentions"] {
-section[role="doc-endnotes"] {
 	border-top: 1px solid;
 	content-visibility: auto;
 }
 
-/* Contain figures that are not images. */
-:not(section[itemprop="mentions"]) > figure:not([itemtype="https://schema.org/ImageObject"]) {
-	contain: content;
-}
-
 
 /* Some browser focus indicators are inaccessible; override them with
  * something more visible. See WCAG 2.x SC 2.4.12. I also tried to
@@ -306,10 +298,10 @@ section[role="doc-endnotes"] {
  * https://www.tempertemper.net/blog/refining-focus-styles-with-focus-visible
  * */
 
-/* For browsers that don't support :focus-visible */
 a:focus,
 summary:focus,
-pre[tabindex]:focus {
+pre[tabindex]:focus,
+:focus-visible {
 	outline: 3px solid;
 }
 
@@ -322,11 +314,6 @@ pre[tabindex]:focus {
 	}
 }
 
-/* Add focus styling back in browsers that do support :focus-visible */
-:focus-visible {
-	outline: 3px solid;
-}
-
 /* Todo:
  * - Some browsers don't scale SVGs properly; the img container
  *   dimensions crop the image rather than scale it. Investigate

layouts/partials/processed-content.html

@@ -10,7 +10,8 @@
 -->
 {{- $referencesWithoutHeading    := `(<div class="footnotes" role="doc-endnotes">
 <hr>)` -}}
-{{- $referencesWithHeading := printf `<section role="doc-endnotes" aria-labelledby="note-hd">
+{{- $referencesWithHeading := printf `<hr>
+<section role="doc-endnotes" aria-labelledby="note-hd">
 <h2 id="note-hd">%s</h2>` ($footnote_heading) -}}
 
 {{- $endnotesClosingDiv := `</a></p>
@@ -23,22 +24,23 @@
 </ol>
 </section>` -}}
 
-{{- $badNoteRef := ` role="doc-noteref">([0-9]*)</a>` -}}
+<!--Descriptive footnote link names, remove unused class-->
-{{- $goodNoteRef := ` role="doc-noteref">note&nbsp;${1}</a>` -}}
+{{- $badNoteRef := `class="footnote-ref" role="doc-noteref">([0-9]*)</a>` -}}
-
+{{- $goodNoteRef := `role="doc-noteref">note&nbsp;${1}</a>` -}}
-<!--Remove deprecated DPUB-ARIA role and unused classes-->
-{{- $endnote := `(role="doc-endnote"|class="footnote-(back)?ref")` -}}
-{{- $noEndnote := printf "" -}}
 
 <!--Move the Table of Contents heading *inside* the <nav> element-->
 {{- $tocHeadingOutside := `<h2>Table of Contents</h2><nav(?:.*)>` -}}
 {{- $tocHeadingInside := `<nav id=TableOfContents role="doc-toc"><h2 id="toc-hd">Table of Contents</h2>` -}}
 
 <!--Give footnote backlinks accessible names-->
-{{- $footnoteBacklinksBad  :=  `<a href="#fnref:([0-9]*)"(.*role="doc-backlink"(?:.*)?)>` -}}
+{{- $footnoteBacklinksBad  :=  `<a href="#fnref:([0-9]*)" class="footnote-backref"(.*role="doc-backlink"(?:.*)?)>` -}}
 {{- $footnoteBacklinksGood :=  `<a href="#fnref:${1}" aria-label="back to reference ${1}"${2}>` -}}
 
-{{- $repeatedFootnoteBacklinksBad  :=  `<a href="#fnref([0-9]):([0-9]*)"(.*role="doc-backlink"(?:.*)?)>` -}}
+<!--
-{{- $repeatedFootnoteBacklinksGood :=  `<a href="#fnref${1}:${2}" aria-label="back to reference ${2}, repeated instance ${1}"${3}>` -}}
+	If two backlinks exist, give them different names.
+	I currently don't have any triple backlinks; if I ever do, I'll implement this properly with a loop.
+-->
+{{- $repeatedFootnoteBacklinksBad  :=  `"back to reference ([0-9]*)"(.*)<a href="#fnref([0-9]):([0-9]*)"(.*role="doc-backlink"(?:.*)?)>` -}}
+{{- $repeatedFootnoteBacklinksGood :=  `"back to reference ${1}, instance 1"${2}<a href="#fnref${3}:${4}" aria-label="back to reference ${4}, instance 2"${5}>` -}}
 
-{{- .Content | replaceRE $referencesWithoutHeading $referencesWithHeading | replaceRE $badNoteRef $goodNoteRef | replaceRE $endnotesClosingDiv $endnotesClosingSection | replaceRE $endnote $noEndnote | replaceRE $tocHeadingOutside $tocHeadingInside | replaceRE $footnoteBacklinksBad $footnoteBacklinksGood | replaceRE $repeatedFootnoteBacklinksBad $repeatedFootnoteBacklinksGood | safeHTML -}}
+{{- .Content | replaceRE $referencesWithoutHeading $referencesWithHeading | replaceRE $badNoteRef $goodNoteRef | replaceRE $endnotesClosingDiv $endnotesClosingSection | replaceRE $tocHeadingOutside $tocHeadingInside | replaceRE $footnoteBacklinksBad $footnoteBacklinksGood | replaceRE $repeatedFootnoteBacklinksBad $repeatedFootnoteBacklinksGood | safeHTML -}}

linter-configs/vnu_filter.jq

@@ -5,7 +5,7 @@
 		(
 			( # See https://github.com/w3c/css-validator/issues/361
 				.message == "CSS: Parse Error."
-				and .extract == "){outline:none}}:focus-visible"
+				and .extract == "){outline:none}}@media(prefers"
 				and .hiliteLength == 1
 			)
 			or