From 4c2d50965c56329ee951038b79643e911320e60f Mon Sep 17 00:00:00 2001
From: Matt Wang <matt@matthewwang.me>
Date: Tue, 20 Sep 2022 10:51:35 -0700
Subject: [PATCH] Fixes link styling to use native `text-decoration` properties
 (#967)

Change link/anchor styling to use `text-decoration`, `text-decoration-color`, `text-underline-offset`.

Looking to tackle some low-hanging fruit! Closes #636.

[Link to deploy preview](https://deploy-preview-967--just-the-docs.netlify.app/).

Old behaviour:

<img width="582" alt="Screen Shot 2022-09-16 at 11 56 26 AM" src="https://user-images.githubusercontent.com/14893287/190711440-8e56c3a2-250f-4121-8c57-8e6e20c4ae07.png">

New behaviour:

<img width="546" alt="Screen Shot 2022-09-16 at 11 56 19 AM" src="https://user-images.githubusercontent.com/14893287/190711520-2cc7fd4d-d449-4e14-9e75-96545f9f578d.png">


Some notes:

- the only visible change should be minor differences in the thickness of the line (browser defaults) + how underhangs (ex a "g") interact with the line
- color-wise, this is a no-op :)
- I added an offset to mimic the behaviour of `background-size: 1px 1px;`

Let me know what we think!
---
 _sass/base.scss | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/_sass/base.scss b/_sass/base.scss
index f72d0dd..7118c3b 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -65,18 +65,12 @@ a {
 }
 
 a:not([class]) {
-  text-decoration: none;
-  background-image: linear-gradient($border-color 0%, $border-color 100%);
-  background-repeat: repeat-x;
-  background-position: 0 100%;
-  background-size: 1px 1px;
+  text-decoration: underline;
+  text-decoration-color: $border-color;
+  text-underline-offset: 2px;
 
   &:hover {
-    background-image: linear-gradient(
-      rgba($link-color, 0.45) 0%,
-      rgba($link-color, 0.45) 100%
-    );
-    background-size: 1px 1px;
+    text-decoration-color: rgba($link-color, 0.45);
   }
 }