16
16
--secondary-color : # 246b4b ; /* A darker, muted green */
17
17
--text-color : # 333 ;
18
18
--background-color : # f8f9fa ;
19
+ --code-block-background-color : # f0f4f8 ;
20
+ --code-block-border-color : # d1d5da ;
19
21
--link-color : # 246b4b ; /* A muted teal-green color */
20
22
--link-hover-color : # 25a28a ; /* A slightly brighter teal-green */
21
23
--border-color : # e0e0e0 ;
22
24
--sidebar-text-color : # 2c3e50 ; /* Dark blue-gray for contrast */
25
+
26
+ /* Font family variables */
27
+ --font-primary : 'Lato' , -apple-system, BlinkMacSystemFont, 'Segoe UI' , Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue' , sans-serif;
28
+ --font-heading : 'Helvetica Neue' , Arial, sans-serif;
29
+ --font-code : 'Source Code Pro' , Consolas, Monaco, 'Andale Mono' , 'Ubuntu Mono' , monospace;
23
30
}
24
31
25
32
/* 2. Global Styles */
26
33
body {
27
34
background : var (--background-color );
28
- font-family : 'Lato' , -apple-system , BlinkMacSystemFont , 'Segoe UI' , Roboto , Oxygen-Sans , Ubuntu , Cantarell , 'Helvetica Neue' , sans-serif ;
35
+ font-family : var ( --font-primary ) ;
29
36
font-weight : 400 ;
30
37
color : var (--text-color );
31
38
line-height : 1.6 ;
@@ -97,9 +104,9 @@ h6:target {
97
104
/* 5. Code and Pre */
98
105
code ,
99
106
pre {
100
- font-family : 'Source Code Pro' , Consolas , Monaco , 'Andale Mono' , 'Ubuntu Mono' , monospace ;
101
- background-color : # f0f4f8 ; /* Slightly darker gray background */
102
- border : 1px solid # d1d5da ;
107
+ font-family : var ( --font-code ) ;
108
+ background-color : var ( --code-block- background-color );
109
+ border : 1px solid var ( --code-block-border-color ) ;
103
110
border-radius : 6px ;
104
111
padding : 16px ;
105
112
overflow-x : auto;
@@ -130,15 +137,15 @@ table tr:nth-child(even) td {
130
137
131
138
/* 7. Navigation and Sidebar */
132
139
nav {
133
- font-family : 'Helvetica Neue' , Arial , sans-serif ;
140
+ font-family : var ( --font-heading ) ;
134
141
font-size : 16px ;
135
142
border-right : 1px solid var (--border-color );
136
143
position : fixed;
137
144
top : 0 ;
138
145
bottom : 0 ;
139
146
left : 0 ;
140
147
width : var (--sidebar-width );
141
- background : var (--sidebar- background , # f8f9fa );
148
+ background : var (--background-color );
142
149
overflow-y : auto;
143
150
z-index : 10 ;
144
151
display : flex;
@@ -164,7 +171,7 @@ nav h2 {
164
171
margin : 0 0 0.5em ;
165
172
padding : 0.5em 0 ;
166
173
font-size : 1.2em ;
167
- color : var (--primary -color , # 333333 );
174
+ color : var (--text -color );
168
175
border-bottom : 1px solid var (--border-color );
169
176
}
170
177
@@ -173,7 +180,7 @@ nav h3,
173
180
margin : 0 ;
174
181
padding : 0.5em 0 ;
175
182
font-size : 1em ;
176
- color : var (--text-color , # 333333 );
183
+ color : var (--text-color );
177
184
}
178
185
179
186
nav ul ,
@@ -201,7 +208,7 @@ nav ul ul ul ul {
201
208
}
202
209
203
210
nav a {
204
- color : var (--link-color , # 0366d6 );
211
+ color : var (--link-color );
205
212
text-decoration : none;
206
213
}
207
214
@@ -271,7 +278,7 @@ main h3,
271
278
main h4 ,
272
279
main h5 ,
273
280
main h6 {
274
- font-family : Helvetica , sans-serif ;
281
+ font-family : var ( --font-heading ) ;
275
282
}
276
283
277
284
@media (min-width : 1024px ) {
@@ -288,7 +295,7 @@ main h6 {
288
295
/* 9. Search */
289
296
# search-section {
290
297
padding : 1em ;
291
- background-color : var (--sidebar- background , # f8f9fa );
298
+ background-color : var (--background-color );
292
299
border-bottom : 1px solid var (--border-color );
293
300
}
294
301
@@ -306,15 +313,15 @@ main h6 {
306
313
font-size : 14px ;
307
314
outline : none;
308
315
transition : border-color 0.3s ease;
309
- background-color : var (--background-color , # ffffff );
316
+ background-color : var (--background-color );
310
317
}
311
318
312
319
# search-field : focus {
313
- border-color : var (--primary-color , # 333333 );
320
+ border-color : var (--primary-color );
314
321
}
315
322
316
323
# search-field ::placeholder {
317
- color : var (--text-color , # 333333 );
324
+ color : var (--text-color );
318
325
opacity : 0.6 ;
319
326
}
320
327
@@ -325,7 +332,7 @@ main h6 {
325
332
top : 50% ;
326
333
transform : translateY (-50% );
327
334
font-size : 14px ;
328
- color : var (--text-color , # 333333 );
335
+ color : var (--text-color );
329
336
opacity : 0.6 ;
330
337
}
331
338
@@ -543,7 +550,7 @@ main header h3 {
543
550
.constants-list > dl dt {
544
551
margin-bottom : 0.75em ;
545
552
padding-left : 0 ;
546
- font-family : "Source Code Pro" , Monaco , monospace ;
553
+ font-family : var ( --font-code ) ;
547
554
font-size : 110% ;
548
555
}
549
556
@@ -590,7 +597,7 @@ main .method-source-code.active-menu {
590
597
}
591
598
592
599
main .method-description .method-calls-super {
593
- color : # 333 ;
600
+ color : var ( --text-color ) ;
594
601
font-weight : bold;
595
602
}
596
603
@@ -606,10 +613,10 @@ main .method-detail:target {
606
613
607
614
main .method-heading {
608
615
position : relative;
609
- font-family : "Source Code Pro" , Monaco , monospace ;
616
+ font-family : var ( --font-code ) ;
610
617
font-size : 110% ;
611
618
font-weight : bold;
612
- color : # 333 ;
619
+ color : var ( --text-color ) ;
613
620
}
614
621
main .method-heading : link ,
615
622
main .method-heading : visited {
@@ -637,7 +644,7 @@ main .method-alias .method-heading {
637
644
main .method-description ,
638
645
main .aliases {
639
646
margin-top : 0.75em ;
640
- color : # 333 ;
647
+ color : var ( --text-color ) ;
641
648
}
642
649
643
650
main .aliases {
@@ -663,12 +670,12 @@ main .attribute-access-type {
663
670
664
671
/* @group search results */
665
672
# search-results {
666
- font-family : Lato , sans-serif ;
673
+ font-family : var ( --font-primary ) ;
667
674
font-weight : 300 ;
668
675
}
669
676
670
677
# search-results .search-match {
671
- font-family : Helvetica , sans-serif ;
678
+ font-family : var ( --font-heading ) ;
672
679
font-weight : normal;
673
680
}
674
681
@@ -704,7 +711,7 @@ main .attribute-access-type {
704
711
705
712
# search-results pre {
706
713
margin : 0.5em ;
707
- font-family : "Source Code Pro" , Monaco , monospace ;
714
+ font-family : var ( --font-code ) ;
708
715
}
709
716
710
717
/* @end */
0 commit comments