1
1
/*
2
- * "Darkfish" Rdoc CSS
3
- * $Id: rdoc.css 54 2009-01-27 01:09:48Z deveiant $
2
+ * RoRvsWild Theme – Rdoc CSS
4
3
*
5
- * Author: Michael Granger <ged@FaerieMUD.org>
4
+ * Authors: Antoine Marguerie & Alexis Bernard (rorvswild.com)
6
5
*
7
6
*/
8
7
9
- /* vim: ft=css et sw=2 ts=2 sts=2 */
10
- /* Base Green is: #6C8C22 */
11
-
12
- /* 1. Variables and Root Styles */
13
8
: root {
14
9
--sidebar-width : 240px ;
15
-
10
+
16
11
--color-primary : oklch (0.5 0.18 29 );
17
12
--color-primary-hover : oklch (0.4 0.18 29 );
18
-
19
13
--color-strong-background : oklch (0.97 0.03 59 );
20
-
21
14
--color-topbar : var (--color-primary );
22
15
--color-topbar-text : var (--color-background );
23
-
24
16
--color-text : oklch (0.4 0.03 269 );
25
17
--color-text-light : oklch (0.5 0.03 269 );
26
18
--color-title : oklch (0.27 0.03 269 );
29
21
--color-th-background : oklch (0.95 0.002 269 );
30
22
--color-border : oklch (0.91 0.002 269 );
31
23
32
- /* fonts */
33
24
--font-sans : "Inter" , system-ui, sans-serif;
34
25
--font-mono : "Monaspace" , ui-monospace, 'Cascadia Code' , 'Source Code Pro' , Menlo, Consolas, 'DejaVu Sans Mono' , monospace;
35
26
}
@@ -42,24 +33,19 @@ html {
42
33
font-optical-sizing : auto;
43
34
scroll-padding-top : calc (40px + 1em );
44
35
scroll-behavior : smooth;
45
- font-feature-settings : 'liga' 1 , 'calt' 1 ; /* fix for Chrome */
36
+ font-feature-settings : 'liga' 1 , 'calt' 1 ;
46
37
}
47
38
48
- /* 2. Global Styles */
49
39
body {
50
40
background : var (--color-background );
51
41
font-family : var (--font-sans );
52
-
53
- /* Layout */
54
42
display : flex;
55
43
flex-direction : column;
56
44
min-height : 100vh ;
57
45
margin : 0 ;
58
46
padding-top : 35px ;
59
47
}
60
48
61
- /* 3. Typography */
62
-
63
49
h1 span ,
64
50
h2 span ,
65
51
h3 span ,
@@ -90,7 +76,6 @@ h6:hover span {
90
76
display : inline;
91
77
}
92
78
93
- /* 4. Links */
94
79
: any-link {
95
80
color : var (--color-primary );
96
81
text-decoration : underline;
@@ -100,7 +85,6 @@ h6:hover span {
100
85
101
86
: any-link : hover { color : var (--color-primary-hover ); }
102
87
103
- /* 5. Code and Pre */
104
88
code ,
105
89
pre {
106
90
font-family : var (--font-mono );
@@ -109,12 +93,11 @@ pre {
109
93
border-radius : 6px ;
110
94
padding : 16px ;
111
95
overflow-x : auto;
112
- font-size : 1rem ; /* Increased from 14px */
113
- line-height : 1.5 ; /* Slightly increased for better readability with larger font */
114
- margin : 1em 0 ; /* Add some vertical margin */
96
+ font-size : 1rem ;
97
+ line-height : 1.5 ;
98
+ margin : 1em 0 ;
115
99
}
116
100
117
- /* 6. Tables */
118
101
table {
119
102
margin : 0 ;
120
103
border-spacing : 0 ;
@@ -126,7 +109,7 @@ table tr th, table tr td {
126
109
border : 1px solid var (--color-border );
127
110
}
128
111
129
- table tr th { background-color : var (--color-th-background ); /* todo */ }
112
+ table tr th { background-color : var (--color-th-background ); }
130
113
131
114
table tr : nth-child (even) td { background-color : var (--color-code-background ); }
132
115
189
172
ol ol { margin : 0 ; }
190
173
191
174
details > summary {
192
- list-style : none; /* Remove the default marker */
193
- position : relative; /* So that the open/close triangle can position itself absolutely inside */
175
+ list-style : none;
176
+ position : relative;
194
177
display : flex;
195
178
width : calc (100% - 0.25rem );
196
179
gap : 4px ;
@@ -225,7 +208,6 @@ details > summary::after {
225
208
226
209
details [open ] > summary ::after { content : '-' ; }
227
210
228
- /* Main Content */
229
211
main {
230
212
padding : 1em ;
231
213
width : calc (100% - 2em );
@@ -339,7 +321,6 @@ main header h3 {
339
321
font-size : 120% ;
340
322
}
341
323
342
- /* Navigation and Sidebar */
343
324
.topbar {
344
325
width : 100% ;
345
326
padding : 0.5em 1rem ;
@@ -452,17 +433,13 @@ nav p {
452
433
margin : 0.5em 0 0 ;
453
434
}
454
435
455
- nav .contextual {
456
- display : none
457
- }
436
+ nav .contextual { display : none }
458
437
459
438
# validator-badges {
460
439
margin : 1em 1em 2em ;
461
440
font-size : smaller;
462
441
}
463
442
464
- /* 9. Search */
465
-
466
443
.search-button {
467
444
background-color : var (--color-background );
468
445
border : none;
@@ -507,9 +484,7 @@ nav.contextual {
507
484
backdrop-filter : blur (4px );
508
485
}
509
486
510
- .search-dialog [open ] {
511
- display : flex;
512
- }
487
+ .search-dialog [open ] { display : flex; }
513
488
514
489
.search-dialog form {
515
490
overflow : hidden;
@@ -531,9 +506,7 @@ nav.contextual {
531
506
padding : 1rem ;
532
507
}
533
508
534
- .search-dialog form : has (li ) # search-field-wrapper {
535
- box-shadow : 0 1px 0 0 var (--color-border );
536
- }
509
+ .search-dialog form : has (li ) # search-field-wrapper { box-shadow : 0 1px 0 0 var (--color-border ); }
537
510
538
511
# search-field {
539
512
width : 100% ;
@@ -613,39 +586,37 @@ nav.contextual {
613
586
614
587
pre ,
615
588
code {
616
- /* syntax highlighting */
617
- --color-constant : oklch (0.5 0.18 269 ); /* Bright blue for constants */
618
- --color-keyword : var (--color-primary ); /* Red for keywords */
619
- --color-ivar : oklch (0.5 0.18 59 ); /* Orange for instance variables */
620
- --color-operator : oklch (0.38 0.18 269 ); /* Dark blue for operators */
621
- --color-identifier : var (--color-title ); /* Dark gray for identifiers */
622
- --color-node : oklch (0.5 0.18 149 ); /* Green for interpolation */
623
- --color-comment : oklch (0.5 0.03 269 ); /* Gray for comments */
624
- --color-regexp : oklch (0.5 0.18 299 ); /* purple for regular expressions */
625
- --color-value : var (--color-operator ); /* Dark blue for numeric values */
626
- --color-string : oklch (0.5 0.18 149 ); /* Green for strings */
589
+ --color-constant : oklch (0.5 0.18 269 );
590
+ --color-keyword : var (--color-primary );
591
+ --color-ivar : oklch (0.5 0.18 59 );
592
+ --color-operator : oklch (0.38 0.18 269 );
593
+ --color-identifier : var (--color-title );
594
+ --color-node : oklch (0.5 0.18 149 );
595
+ --color-comment : oklch (0.5 0.03 269 );
596
+ --color-regexp : oklch (0.5 0.18 299 );
597
+ --color-value : var (--color-operator );
598
+ --color-string : oklch (0.5 0.18 149 );
627
599
}
628
600
629
601
code {
630
- background-color : var (--color-code-background ); /* Match pre background */
602
+ background-color : var (--color-code-background );
631
603
padding : 0em 0.4em ;
632
604
border-radius : 3px ;
633
605
font-size : 1em ;
634
606
line-height : 1em ;
635
607
text-transform : initial;
636
608
}
637
609
638
- /* 13. Syntax Highlighting */
639
- .ruby-constant { color : var (--color-constant ); } /* Bright blue for constants */
640
- .ruby-keyword { color : var (--color-keyword ); } /* Red for keywords */
641
- .ruby-ivar { color : var (--color-ivar ); } /* Orange for instance variables */
642
- .ruby-operator { color : var (--color-operator ); } /* Dark blue for operators */
643
- .ruby-identifier { color : var (--color-identifier ); } /* Dark gray for identifiers */
644
- .ruby-node { color : var (--color-node ); } /* Green for interpolation */
645
- .ruby-comment { color : var (--color-comment ); } /* Gray for comments */
646
- .ruby-regexp { color : var (--color-regexp ); } /* Navy for regular expressions */
647
- .ruby-value { color : var (--color-value ); } /* Dark blue for numeric values */
648
- .ruby-string { color : var (--color-string ); } /* Green for strings */
610
+ .ruby-constant { color : var (--color-constant ); }
611
+ .ruby-keyword { color : var (--color-keyword ); }
612
+ .ruby-ivar { color : var (--color-ivar ); }
613
+ .ruby-operator { color : var (--color-operator ); }
614
+ .ruby-identifier { color : var (--color-identifier ); }
615
+ .ruby-node { color : var (--color-node ); }
616
+ .ruby-comment { color : var (--color-comment ); }
617
+ .ruby-regexp { color : var (--color-regexp ); }
618
+ .ruby-value { color : var (--color-value ); }
619
+ .ruby-string { color : var (--color-string ); }
649
620
650
621
em {
651
622
text-decoration-color : var (--color-border );
658
629
background-color : var (--color-strong-background );
659
630
}
660
631
661
- /* 14. Specific Component Styles */
662
-
663
632
.note-list {
664
633
padding : 1em 1em 2em ;
665
634
box-shadow : 0 0 0 1px var (--color-border ) inset;
738
707
color : var (--color-title );
739
708
}
740
709
741
- pre + .toggle-source {
742
- margin-top : 0.5rem ;
743
- }
710
+ pre + .toggle-source { margin-top : 0.5rem ; }
744
711
745
712
.method-description ,
746
713
.aliases {
@@ -768,8 +735,6 @@ pre + .toggle-source {
768
735
padding : 0 1em ;
769
736
}
770
737
771
- /* 11. Media Queries */
772
-
773
738
@media (max-width : 480px ) {
774
739
main {
775
740
margin : 1em auto;
@@ -862,15 +827,15 @@ pre + .toggle-source {
862
827
863
828
pre ,
864
829
code {
865
- --color-constant : oklch (0.84 0.09 260 ); /* Bright blue for constants */
866
- --color-keyword : var (--color-primary ); /* Red for keywords */
867
- --color-ivar : oklch (0.85 0.09 59 ); /* Orange for instance variables */
868
- --color-operator : oklch (0.91 0.04 269 ); /* Dark blue for operators */
869
- --color-identifier : var (--color-title ); /* Dark gray for identifiers */
870
- --color-node : oklch (0.83 0.09 149 ); /* Green for interpolation */
871
- --color-comment : oklch (0.69 0.02 269 ); /* Gray for comments */
872
- --color-regexp : oklch (0.85 0.09 299 ); /* purple for regular expressions */
873
- --color-value : var (--color-operator ); /* Dark blue for numeric values */
874
- --color-string : oklch (0.83 0.09 149 ); /* Green for strings */
830
+ --color-constant : oklch (0.84 0.09 260 );
831
+ --color-keyword : var (--color-primary );
832
+ --color-ivar : oklch (0.85 0.09 59 );
833
+ --color-operator : oklch (0.91 0.04 269 );
834
+ --color-identifier : var (--color-title );
835
+ --color-node : oklch (0.83 0.09 149 );
836
+ --color-comment : oklch (0.69 0.02 269 );
837
+ --color-regexp : oklch (0.85 0.09 299 );
838
+ --color-value : var (--color-operator );
839
+ --color-string : oklch (0.83 0.09 149 );
875
840
}
876
841
}
0 commit comments