1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-24 01:42:10 +00:00

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.
This commit is contained in:
Rohan Kumar 2022-05-12 20:51:11 -07:00
parent 29b01ed1a5
commit 86143428f3
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 19 additions and 30 deletions

View file

@ -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[role="doc-endnotes"] {
section[aria-labelledby="webmentions"] {
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

View file

@ -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>` -}}
{{- $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 "" -}}
<!--Descriptive footnote link names, remove unused class-->
{{- $badNoteRef := `class="footnote-ref" role="doc-noteref">([0-9]*)</a>` -}}
{{- $goodNoteRef := `role="doc-noteref">note&nbsp;${1}</a>` -}}
<!--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 -}}

View file

@ -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