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 f72d0ddd..7118c3b1 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);
}
}
--
GitLab