Mercurial > p > roundup > code
changeset 7508:055f47b41b8b
Try to improve visited link contrast
Tested link/text/background contrast using:
https://contrast-triangle.com/
For unvisited links it was fine. For visited links it was too low.
Bumped visited link to a lighter color. However it is only 20 points
away from unvisited link color now. (Even before visited/unvisited
were not distinguishable.) So tried to make visited/unvisited links
different in some way.
Can't set text-decoration-style to dotted because people are privacy
invading jerks. Other things I attempted (adding an ::after item to
visited links) and other ignored properties on hover didn't work.
So I settled for making the underline-color on visited links darkgrey.
Also use underline shortcut rather than separate props.
| author | John Rouillard <rouilj@ieee.org> |
|---|---|
| date | Sun, 25 Jun 2023 14:08:17 -0400 |
| parents | f3c456e9a6c2 |
| children | 46248c3ca7af |
| files | doc/_static/style.css website/www/_static/style.css |
| diffstat | 2 files changed, 20 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/doc/_static/style.css Wed Jun 21 15:02:01 2023 -0400 +++ b/doc/_static/style.css Sun Jun 25 14:08:17 2023 -0400 @@ -178,11 +178,18 @@ :link { color: rgb(220,0,0); text-decoration: none;} :link:hover { - text-decoration: underline; + text-decoration: underline solid .3ex; text-underline-position: under; - text-decoration-thickness: .3ex; } -:visited { color: rgb(187,0,0); text-decoration: none;} +:visited { color: rgb(200,0,0); text-decoration: none;} +:visited:hover { + /* would like to change from solid line to dashed, but + because of privacy abusing people I can't change that + value. So settle for darkgrey underline. + */ + text-decoration-color: darkgrey; +} + a.toc-backref { color: #000000; } .header h1 { margin-left: 1em; }
--- a/website/www/_static/style.css Wed Jun 21 15:02:01 2023 -0400 +++ b/website/www/_static/style.css Sun Jun 25 14:08:17 2023 -0400 @@ -178,11 +178,18 @@ :link { color: rgb(220,0,0); text-decoration: none;} :link:hover { - text-decoration: underline; + text-decoration: underline solid .3ex; text-underline-position: under; - text-decoration-thickness: .3ex; } -:visited { color: rgb(187,0,0); text-decoration: none;} +:visited { color: rgb(200,0,0); text-decoration: none;} +:visited:hover { + /* would like to change from solid line to dashed, but + because of privacy abusing people I can't change that + value. So settle for darkgrey underline. + */ + text-decoration-color: darkgrey; +} + a.toc-backref { color: #000000; } .header h1 { margin-left: 1em; }