Skip to content

Commit 8eb31a2

Browse files
Tweak link styles
This changes links to use the brand (i.e. banner) color. This also changes links to be underlined by default, except for links which have a `<code>` element as their only child. Additionally, this fixes hover styles so that they do not linger after tap on mobile.
1 parent 196e54b commit 8eb31a2

File tree

1 file changed

+45
-12
lines changed
  • lib/rdoc/generator/template/rails/resources/css

1 file changed

+45
-12
lines changed

lib/rdoc/generator/template/rails/resources/css/main.css

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@
77
--space-lg: calc(var(--space) * 2);
88
--space-xl: calc(var(--space) * 4);
99

10+
--brand-color: #b61d1d;
11+
1012
--text-color: #3b3b3b;
11-
--link-color: #cc0000;
12-
--link-hover-color: #990000;
13+
--link-color: var(--brand-color);
14+
--link-hover-color: var(--text-color);
1315
--icon-color: #777777;
1416

1517
--body-bg: #ffffff;
@@ -42,14 +44,23 @@ body {
4244
min-height: 100%;
4345
}
4446

45-
a:link, a:active, a:visited, a:hover {
47+
a {
4648
color: var(--link-color);
49+
}
50+
51+
@media (hover: hover) {
52+
a:hover {
53+
color: var(--link-hover-color);
54+
}
55+
}
56+
57+
a:has(> code:only-child) {
4758
text-decoration: none;
4859
}
4960

50-
a:hover {
51-
color: var(--link-hover-color);
52-
text-decoration: underline;
61+
/* TODO: Remove this hack when Firefox supports `:has()` */
62+
a code {
63+
text-decoration: underline var(--body-bg);
5364
}
5465

5566
.external-link {
@@ -220,7 +231,7 @@ html {
220231

221232
.banner {
222233
height: var(--banner-height);
223-
background-color: #B61D1D;
234+
background-color: var(--brand-color);
224235
}
225236

226237
.banner__segment {
@@ -444,6 +455,13 @@ html {
444455
vertical-align: middle;
445456
}
446457

458+
@media (hover: hover) {
459+
.method__permalink:hover img {
460+
filter: brightness(0) invert(1);
461+
mix-blend-mode: difference;
462+
}
463+
}
464+
447465
.method__aka {
448466
font-style: italic;
449467
}
@@ -469,8 +487,10 @@ html {
469487
color: var(--link-color);
470488
}
471489

472-
.method__source summary .label:hover {
473-
color: var(--link-hover-color);
490+
@media (hover: hover) {
491+
.method__source summary .label:hover {
492+
color: var(--link-hover-color);
493+
}
474494
}
475495

476496
.method__source summary .external-link {
@@ -540,11 +560,22 @@ html {
540560
background: var(--code-bg);
541561
}
542562

563+
/* TODO: Remove this hack when Firefox supports `:has()` */
564+
.description a code {
565+
text-decoration: underline var(--code-bg);
566+
}
567+
543568
.description p code {
544569
padding: 0 0.15em;
545570
border-radius: 2px;
546571
}
547572

573+
@media (hover: hover) {
574+
.description a:hover code {
575+
box-shadow: 0 0 0 1px;
576+
}
577+
}
578+
548579
.description dt {
549580
font-weight: bold;
550581
}
@@ -570,9 +601,11 @@ details.more-less summary {
570601
color: var(--icon-color);
571602
}
572603

573-
details.more-less summary:hover {
574-
cursor: pointer;
575-
color: inherit;
604+
@media (hover: hover) {
605+
details.more-less summary:hover {
606+
cursor: pointer;
607+
color: inherit;
608+
}
576609
}
577610

578611
details.more-less summary {

0 commit comments

Comments
 (0)