fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +00:00
Code Issues Projects Releases Wiki Activity

Fix heading permalinks in reading mode

Browse source 
horrible hack, crimes.
This commit is contained in:
Rohan Kumar 2022-06-22 21:18:32 -07:00
parent 9609e4fbb2
commit 7546bd1c20
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/css/main.css
View file

@ -112,7 +112,7 @@ html {
input, input,
dt > a, dt > a,
summary, summary,
h2 + a, aside > a, /* Used for section permalinks */
li > a { li > a {
padding: .75em .25em; padding: .75em .25em;
} }
@ -136,7 +136,7 @@ html {
margin-bottom: -1em; margin-bottom: -1em;
} }
h2 + a { aside > a {
margin: -.75em -.25em; margin: -.75em -.25em;
} }
@ -144,7 +144,7 @@ html {
header > nav, header > 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, li > a,
h2 + a, aside > a,
nav ol a { nav ol a {
margin-left: -.25em; margin-left: -.25em;
display: inline-block; display: inline-block;

3
assets/css/print.css
View file

@ -14,9 +14,6 @@
* use, see below. */ * use, see below. */
article summary, article summary,
section[aria-labelledby="webmentions"], section[aria-labelledby="webmentions"],
/* Currently only used for in-page heading anchors,
* useless in printouts. */
h2 + a,
/* You can't navigate in a printout. */ /* You can't navigate in a printout. */
footer, footer,
/* splitting up sections with <hr> is unnecesary if those /* splitting up sections with <hr> is unnecesary if those

20
layouts/_default/_markup/render-heading.html
View file

@ -1,8 +1,22 @@
<!--
Intended properties of this render-hook:
1. Headings are focusable, but not from the keyboard. This allows VoiceOver to navigate to a heading from the TOC.
2. <h2> elements are followed by a section permalink, which is useful for sharing a subset of an article.
3. The page looks as similar as possible to graphical-browsers, textual browsers (e.g. Lynx), and assistive technologies.
4. Reading-mode implementations preserve headings without getting confused by the section permalinks.
5. Machine-translation works as intended with or without assistive technologies.
6. All of this applies with or without CSS.
To achieve all these properties, I had to break the first rule of ARIA and misuse <aside>.
I'm a markup criminal now.
-->
<h{{ .Level }} id="{{ .Anchor | safeURL }}" tabindex="-1">{{ .Text | safeHTML -}}</h{{ .Level }}> <h{{ .Level }} id="{{ .Anchor | safeURL }}" tabindex="-1">{{ .Text | safeHTML -}}</h{{ .Level }}>
{{- if and (eq .Level 2) (eq .Page.Section "posts") }} {{- if and (eq .Level 2) (eq .Page.Section "posts") -}}
<a <!--crimes-->
<aside role="none"><a
id="{{ .Anchor | safeURL }}-anchor" href="#{{ .Anchor | safeURL }}" id="{{ .Anchor | safeURL }}-anchor" href="#{{ .Anchor | safeURL }}"
aria-labelledby="{{ .Anchor | safeURL }}-prefix {{ .Anchor | safeURL }}"> aria-labelledby="{{ .Anchor | safeURL }}-prefix {{ .Anchor | safeURL }}">
<span id="{{ .Anchor | safeURL }}-prefix">Permalink to section</span> <span id="{{ .Anchor | safeURL }}-prefix">Permalink to section</span>
</a> </a></aside>
{{- end }} {{- end }}