From cc86028602a9ae7fd188da947c9b24518910fda9 Mon Sep 17 00:00:00 2001
From: Timo Tijhof <krinkle@fastmail.com>
Date: Sat, 30 Mar 2024 19:42:11 -0700
Subject: [PATCH] Theme: Switch anchor line to text-decoration, enable in
 footer for a11y

There is a relatively new Chrome Lighthouse score penalty (Accessiblity
score is now 96 on qunitjs.com instead of 100) for
"Links rely on color to be distinguishable".

I thought this was about color contrast, but it isn't since the same
colors are fine on the left side of the footer. On the right side,
we have both text and links. Elsewhere, we have underlines for this,
so let's enable these here as well.

Switch anchor lines from border-bottom to native text-decoration
while at it. The full range of our styles can now be expresssed
natively.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
---
 _sass/amethyst.scss | 21 ++++++++++++---------
 index.md            |  5 ++---
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/_sass/amethyst.scss b/_sass/amethyst.scss
index 2111d9b..a84a868 100644
--- a/_sass/amethyst.scss
+++ b/_sass/amethyst.scss
@@ -68,20 +68,22 @@ a {
         text-decoration: underline;
     }
 }
-.content a:not(.button) {
-    border-bottom: 0.1em solid currentColor;
+.content a:not(.button),
+footer a {
+    text-decoration: underline;
+    text-decoration-thickness: 0.1em;
+    text-decoration-skip-ink: auto;
+    text-underline-position: under;
+    text-underline-offset: 0em;
 
     &:active,
     &:hover,
     &:focus {
-        text-decoration: none;
-
-        box-shadow: 0px 0px 0px 4px $color-bright;
+        box-shadow: 0px 2px 0px 4px $color-bright;
         background-color: $color-bright;
         color: $color-accent;
-        border-bottom-color: $color-vibrant;
-        border-bottom-width: 0.13em;
-
+        text-decoration-color: $color-vibrant;
+        text-decoration-thickness: 0.12em;
         code {
             background-color: transparent;
         }
@@ -775,7 +777,8 @@ article > header {
 
 .external-links a {
     // Larger click target for mobile
-    padding: 1rem 0.5rem;
+    display: inline-block;
+    padding: 0 0.5em;
 }
 
 .cta {
diff --git a/index.md b/index.md
index fca2674..95efc9a 100644
--- a/index.md
+++ b/index.md
@@ -42,9 +42,8 @@ home_secondary_btn:
 
 To contribute:
 
-* [Watch the repository](https://github.com/qunitjs/qunit) to learn about release, new requests, or bug reports.
-* The source of this website, is in the [qunitjs.com](https://github.com/qunitjs/qunitjs.com) repository.
-* The source of the Documentation site, is in the ["docs/" directory](https://github.com/qunitjs/qunit/tree/master/docs).
+* [Watch the repository](https://github.com/qunitjs/jekyll-theme-amethyst) to learn about release, new requests, or bug reports.
+* The source of this website, is in the [jekyll-theme-amethyst](https://github.com/qunitjs/jekyll-theme-amethyst) repository.
 
 ---