steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-10 14:01:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixes link styling to use native text-decoration properties (#967)

Browse Source 
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!
This commit is contained in:
Matt Wang 2022-09-20 10:51:35 -07:00 committed by Matthew Wang
parent 3a77f95280
commit 4c2d50965c
No known key found for this signature in database
GPG Key ID: 0C8DB42BF157DEAB
1 changed files with 4 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_sass/base.scss
View File

@ -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);
}
}