Mercurial > p > roundup > code
comparison doc/_static/style.css @ 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 | dcf37ca1a47d |
| children | c1ef0827705a |
comparison
equal
deleted
inserted
replaced
| 7507:f3c456e9a6c2 | 7508:055f47b41b8b |
|---|---|
| 176 | 176 |
| 177 /* style */ | 177 /* style */ |
| 178 | 178 |
| 179 :link { color: rgb(220,0,0); text-decoration: none;} | 179 :link { color: rgb(220,0,0); text-decoration: none;} |
| 180 :link:hover { | 180 :link:hover { |
| 181 text-decoration: underline; | 181 text-decoration: underline solid .3ex; |
| 182 text-underline-position: under; | 182 text-underline-position: under; |
| 183 text-decoration-thickness: .3ex; | 183 } |
| 184 } | 184 :visited { color: rgb(200,0,0); text-decoration: none;} |
| 185 :visited { color: rgb(187,0,0); text-decoration: none;} | 185 :visited:hover { |
| 186 /* would like to change from solid line to dashed, but | |
| 187 because of privacy abusing people I can't change that | |
| 188 value. So settle for darkgrey underline. | |
| 189 */ | |
| 190 text-decoration-color: darkgrey; | |
| 191 } | |
| 192 | |
| 186 a.toc-backref { color: #000000; } | 193 a.toc-backref { color: #000000; } |
| 187 | 194 |
| 188 .header h1 { margin-left: 1em; } | 195 .header h1 { margin-left: 1em; } |
| 189 | 196 |
| 190 .menu { padding: 0; margin-right: 1em;} | 197 .menu { padding: 0; margin-right: 1em;} |