From b5736df037ee19127e895fde5c81efce20a7ef97 Mon Sep 17 00:00:00 2001
From: Leonardo Uieda <email@leouieda.com>
Date: Wed, 18 Oct 2023 09:28:44 -0300
Subject: [PATCH] Underline links for accessibility

---
 _templates/manual.html |  4 ++--
 css/style.css          | 26 ++++++++++++++------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/_templates/manual.html b/_templates/manual.html
index 4e959c4..08fa08d 100644
--- a/_templates/manual.html
+++ b/_templates/manual.html
@@ -37,8 +37,8 @@ <h2>Contents</h2>
             <li>
             {%- for id in site["manual/index"]["toc_table"] %}
               {%- if id == page.id %}
-                <li>
-                  <a class="active" aria-current="page" href="{{ site[id].path|relative_to(page.path) }}">
+                <li class="active">
+                  <a aria-current="page" href="{{ site[id].path|relative_to(page.path) }}">
                     {{ site[id].title }}
                   </a>
                 </li>
diff --git a/css/style.css b/css/style.css
index 3b48a04..d941053 100644
--- a/css/style.css
+++ b/css/style.css
@@ -47,11 +47,11 @@ body {
 
 a {
   color: var(--color-primary);
-  text-decoration: none;
+  text-decoration: underline;
 }
 
 a:hover {
-  text-decoration: underline;
+  color: var(--color-muted);
 }
 
 h1,
@@ -127,14 +127,10 @@ footer {
 
 footer a {
   color: var(--color-light);
-  border-bottom: 2px solid var(--color-light);
-  text-decoration: none;
 }
 
 footer a:hover {
   color: var(--color-medium);
-  border-bottom: 2px solid var(--color-medium);
-  text-decoration: none;
 }
 
 nav a {
@@ -314,21 +310,27 @@ blockquote > * + *, figure > * + *, .callout > * + * {
   --flow-space: 0.75em;
 }
 
-.column-nav a {
-  color: var(--color-muted);
+.column-nav li {
   padding-left: var(--space-2xs);
-  border-left: 2px solid transparent;
+  border-left: 3px solid transparent;
   line-height: 1.2;
 }
 
+.column-nav a {
+  color: var(--color-muted);
+}
+
 .column-nav a:hover {
   color: var(--color-muted);
   text-decoration: none;
-  border-left: 2px solid var(--color-secondary);
 }
 
-.column-nav a.active {
-  border-left: 2px solid var(--color-secondary);
+.column-nav li:hover {
+  border-left: 3px solid var(--color-secondary);
+}
+
+.column-nav li.active {
+  border-left: 3px solid var(--color-secondary);
   font-weight: bold;
 }