From d89ad2cc32792a9df822abea20e00c5ce763eb58 Mon Sep 17 00:00:00 2001
From: Zach Leatherman <zachleatherman@gmail.com>
Date: Tue, 24 Jan 2023 09:15:39 -0600
Subject: [PATCH] Fix anchor link accessibility issue

---
 eleventy.config.js   |  3 ++-
 public/css/index.css | 22 ++++++++++++----------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/eleventy.config.js b/eleventy.config.js
index 3a2543f..031fd4b 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -76,8 +76,9 @@ module.exports = function(eleventyConfig) {
 		mdLib.use(markdownItAnchor, {
 			permalink: markdownItAnchor.permalink.ariaHidden({
 				placement: "after",
-				class: "direct-link",
+				class: "header-anchor",
 				symbol: "#",
+				ariaHidden: false,
 			}),
 			level: [1,2,3,4],
 			slugify: eleventyConfig.getFilter("slugify")
diff --git a/public/css/index.css b/public/css/index.css
index fbf7c04..4576e23 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -246,19 +246,21 @@ header {
 }
 
 /* Direct Links / Markdown Headers */
-.direct-link {
-	font-family: sans-serif;
+.header-anchor {
 	text-decoration: none;
 	font-style: normal;
+	font-size: 1em;
 	margin-left: .1em;
 }
-a[href].direct-link,
-a[href].direct-link: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 {
+a[href].header-anchor,
+a[href].header-anchor:visited {
 	color: #aaa;
 }
+a[href].header-anchor:focus,
+a[href].header-anchor:hover {
+	text-decoration: underline;
+}
+
+h2 + .header-anchor {
+	font-size: 1.5em;
+}