7
7
--space-lg : calc (var (--space ) * 2 );
8
8
--space-xl : calc (var (--space ) * 4 );
9
9
10
+ --brand-color : # b61d1d ;
11
+
10
12
--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 ) ;
13
15
--icon-color : # 777777 ;
14
16
15
17
--body-bg : # ffffff ;
@@ -42,14 +44,23 @@ body {
42
44
min-height : 100% ;
43
45
}
44
46
45
- a : link , a : active , a : visited , a : hover {
47
+ a {
46
48
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 ) {
47
58
text-decoration : none;
48
59
}
49
60
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 ) ;
53
64
}
54
65
55
66
.external-link {
@@ -220,7 +231,7 @@ html {
220
231
221
232
.banner {
222
233
height : var (--banner-height );
223
- background-color : # B61D1D ;
234
+ background-color : var ( --brand-color ) ;
224
235
}
225
236
226
237
.banner__segment {
@@ -444,6 +455,13 @@ html {
444
455
vertical-align : middle;
445
456
}
446
457
458
+ @media (hover : hover) {
459
+ .method__permalink : hover img {
460
+ filter : brightness (0 ) invert (1 );
461
+ mix-blend-mode : difference;
462
+ }
463
+ }
464
+
447
465
.method__aka {
448
466
font-style : italic;
449
467
}
@@ -469,8 +487,10 @@ html {
469
487
color : var (--link-color );
470
488
}
471
489
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
+ }
474
494
}
475
495
476
496
.method__source summary .external-link {
@@ -540,11 +560,22 @@ html {
540
560
background : var (--code-bg );
541
561
}
542
562
563
+ /* TODO: Remove this hack when Firefox supports `:has()` */
564
+ .description a code {
565
+ text-decoration : underline var (--code-bg );
566
+ }
567
+
543
568
.description p code {
544
569
padding : 0 0.15em ;
545
570
border-radius : 2px ;
546
571
}
547
572
573
+ @media (hover : hover) {
574
+ .description a : hover code {
575
+ box-shadow : 0 0 0 1px ;
576
+ }
577
+ }
578
+
548
579
.description dt {
549
580
font-weight : bold;
550
581
}
@@ -570,9 +601,11 @@ details.more-less summary {
570
601
color : var (--icon-color );
571
602
}
572
603
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
+ }
576
609
}
577
610
578
611
details .more-less summary {
0 commit comments