mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Fix heading permalinks in reading mode
horrible hack, crimes.
This commit is contained in:
parent
9609e4fbb2
commit
7546bd1c20
3 changed files with 20 additions and 9 deletions
|
@ -112,7 +112,7 @@ html {
|
|||
input,
|
||||
dt > a,
|
||||
summary,
|
||||
h2 + a,
|
||||
aside > a, /* Used for section permalinks */
|
||||
li > a {
|
||||
padding: .75em .25em;
|
||||
}
|
||||
|
@ -136,7 +136,7 @@ html {
|
|||
margin-bottom: -1em;
|
||||
}
|
||||
|
||||
h2 + a {
|
||||
aside > a {
|
||||
margin: -.75em -.25em;
|
||||
}
|
||||
|
||||
|
@ -144,7 +144,7 @@ html {
|
|||
header > nav,
|
||||
/* List items with direct hyperlink children should only have one hyperlink. */
|
||||
li > a,
|
||||
h2 + a,
|
||||
aside > a,
|
||||
nav ol a {
|
||||
margin-left: -.25em;
|
||||
display: inline-block;
|
||||
|
|
|
@ -14,9 +14,6 @@
|
|||
* use, see below. */
|
||||
article summary,
|
||||
section[aria-labelledby="webmentions"],
|
||||
/* Currently only used for in-page heading anchors,
|
||||
* useless in printouts. */
|
||||
h2 + a,
|
||||
/* You can't navigate in a printout. */
|
||||
footer,
|
||||
/* splitting up sections with <hr> is unnecesary if those
|
||||
|
|
|
@ -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 }}>
|
||||
{{- if and (eq .Level 2) (eq .Page.Section "posts") }}
|
||||
<a
|
||||
{{- if and (eq .Level 2) (eq .Page.Section "posts") -}}
|
||||
<!--crimes-->
|
||||
<aside role="none"><a
|
||||
id="{{ .Anchor | safeURL }}-anchor" href="#{{ .Anchor | safeURL }}"
|
||||
aria-labelledby="{{ .Anchor | safeURL }}-prefix {{ .Anchor | safeURL }}">
|
||||
<span id="{{ .Anchor | safeURL }}-prefix">Permalink to section</span>
|
||||
</a>
|
||||
</a></aside>
|
||||
{{- end }}
|
||||
|
|
Loading…
Reference in a new issue