godoc: better distinguish links and link state
There were two issues with links in godoc:
1) They were only distinguished from ordinary text only by color,
affecting those with color-vision deficiencies.
2) The same blue used for links is used by non-links,
affecting everybody.
This change adds a an underline to all links.
Usually, it is safe to skip underlining in locations where it clear
that the only contents are navigational links, such as #pkg-index.
However, (2) prevented this.
To work around this I used some less well supported CSS techniques:
http://caniuse.com/#feat=text-decoration
Less capable browsers, which are unlikely to be used by developers, may
have a less than optimal experience, unfortunately. In more capable
browsers, including those without full support, the experience is quite
pleasant and the additional underlying does not interfere with the godoc
aesthetic.
For golang/go#22171
Change-Id: I5a0d817793e8aa31912ba065b4e5a63d4a3f138c
Reviewed-on: https://go-review.googlesource.com/69150
Reviewed-by: Andrew Bonventre <andybons@golang.org>
diff --git a/godoc/static/static.go b/godoc/static/static.go
index bfbb9d7..e3c8d7f 100644
--- a/godoc/static/static.go
+++ b/godoc/static/static.go
@@ -2925,16 +2925,15 @@
a,
.exampleHeading .text {
color: #375EAB;
- text-decoration: none;
}
-a:hover,
+a,
.exampleHeading .text:hover {
text-decoration: underline;
+ -webkit-text-decoration: skip;
+ text-decoration-skip: ink;
}
-.article a {
- text-decoration: underline;
-}
-.article .title a {
+a:hover,
+.exampleHeading .text {
text-decoration: none;
}
diff --git a/godoc/static/style.css b/godoc/static/style.css
index f65a09c..752d03b 100644
--- a/godoc/static/style.css
+++ b/godoc/static/style.css
@@ -48,16 +48,15 @@
a,
.exampleHeading .text {
color: #375EAB;
- text-decoration: none;
}
-a:hover,
+a,
.exampleHeading .text:hover {
text-decoration: underline;
+ -webkit-text-decoration: skip;
+ text-decoration-skip: ink;
}
-.article a {
- text-decoration: underline;
-}
-.article .title a {
+a:hover,
+.exampleHeading .text {
text-decoration: none;
}
