cobweb/xmitter-11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix anchor link accessibility issue

Browse Source
This commit is contained in:
Zach Leatherman 2023-01-24 09:15:39 -06:00
parent 1f49621084
commit d89ad2cc32
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
eleventy.config.js
View File

@ -76,8 +76,9 @@ module.exports = function(eleventyConfig) {
mdLib.use(markdownItAnchor, { mdLib.use(markdownItAnchor, {
permalink: markdownItAnchor.permalink.ariaHidden({ permalink: markdownItAnchor.permalink.ariaHidden({
placement: "after", placement: "after",
class: "direct-link", class: "header-anchor",
symbol: "#", symbol: "#",
ariaHidden: false,
}), }),
level: [1,2,3,4], level: [1,2,3,4],
slugify: eleventyConfig.getFilter("slugify") slugify: eleventyConfig.getFilter("slugify")

22
public/css/index.css
View File

@ -246,19 +246,21 @@ header {
} }
/* Direct Links / Markdown Headers */ /* Direct Links / Markdown Headers */
.direct-link { .header-anchor {
font-family: sans-serif;
text-decoration: none; text-decoration: none;
font-style: normal; font-style: normal;
font-size: 1em;
margin-left: .1em; margin-left: .1em;
} }
a[href].direct-link, a[href].header-anchor,
a[href].direct-link:visited { a[href].header-anchor:visited {
color: transparent;
}
a[href].direct-link:focus,
a[href].direct-link:focus:visited,
:hover > a[href].direct-link,
:hover > a[href].direct-link:visited {
color: #aaa; color: #aaa;
} }
a[href].header-anchor:focus,
a[href].header-anchor:hover {
text-decoration: underline;
}
h2 + .header-anchor {
font-size: 1.5em;
}