Skip to content

Commit 48ec6af

Browse files
committed
documentation redesign.
1 parent 14c5a45 commit 48ec6af

File tree

3 files changed

+324
-146
lines changed

3 files changed

+324
-146
lines changed

styles/css3-github-ribbon.css

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,54 @@
1-
body{background-color:#fff}
2-
.github-ribbon{background-color:#121621;top:3.2em;right:-3.7em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;-moz-box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;box-shadow:0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;color:rgba(255,255,255,0.90)!important;display:block;padding:.6em 3.5em;position:absolute;font:bold .82em sans-serif;text-align:center;text-decoration:none;text-shadow:1px -1px 8px rgba(0,0,0,0.60);-webkit-user-select:none;-moz-user-select:none;user-select:none}
1+
:root {
2+
--background-color-light: #ffffff;
3+
--background-color-dark: #1a202c;
4+
--text-color-light: #1e293b;
5+
--text-color-dark: #ffffff;
6+
}
7+
8+
9+
body {
10+
background-color: var(--background-color-light);
11+
font-family: 'Inter', sans-serif;
12+
margin: 0;
13+
}
14+
15+
.github-ribbon {
16+
background-color: #121621;
17+
top: 3.2em;
18+
right: -1em;
19+
-webkit-transform: rotate(45deg);
20+
-moz-transform: rotate(45deg);
21+
transform: rotate(45deg);
22+
-webkit-box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888;
23+
-moz-box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888;
24+
box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888;
25+
color: rgba(255, 255, 255, 0.90)!important;
26+
display: block;
27+
padding: 10px 30px;
28+
position: absolute;
29+
font-weight: bold;
30+
font-size: 0.82em;
31+
text-align: center;
32+
text-decoration: none;
33+
text-shadow: 1px -1px 8px rgba(0, 0, 0, 0.60);
34+
-webkit-user-select: none;
35+
-moz-user-select: none;
36+
user-select: none;
37+
z-index: 9999;
38+
}
39+
40+
dd {
41+
margin: 0;
42+
}
43+
44+
pre {
45+
margin: 0;
46+
}
47+
48+
49+
@media (prefers-color-scheme: dark) {
50+
body {
51+
background-color: var(--background-color-dark);
52+
}
53+
}
54+

styles/hljs-tomorrow.css

Lines changed: 118 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,24 @@
1-
/*
2-
Copyright 2022 the JSDoc Authors.
3-
4-
Licensed under the Apache License, Version 2.0 (the "License");
5-
you may not use this file except in compliance with the License.
6-
You may obtain a copy of the License at
7-
8-
https://www.apache.org/licenses/LICENSE-2.0
9-
10-
Unless required by applicable law or agreed to in writing, software
11-
distributed under the License is distributed on an "AS IS" BASIS,
12-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13-
See the License for the specific language governing permissions and
14-
limitations under the License.
15-
*/
16-
17-
/* Tomorrow theme for Highlight.js */
18-
/* Based on https://github.com/chriskempson/tomorrow-theme */
19-
201
:root {
21-
--text-color: #3d3d3c;
22-
--tomorrow-blue: #4271ae;
23-
--tomorrow-gray: #8e908c;
24-
--tomorrow-green: #718c00;
25-
--tomorrow-orange: #f5871f;
26-
--tomorrow-purple: #8959a8;
27-
--tomorrow-red: #c82829;
28-
--tomorrow-yellow: #c99e00;
2+
--text-color-light: #1e293b;
3+
--text-color-dark: #ffffff;
4+
--tomorrow-blue: #6366f1;
5+
--tomorrow-gray: #6b7280;
6+
--tomorrow-green: #48bb78;
7+
--tomorrow-orange: #f59e0b;
8+
--tomorrow-purple: #9f7aea;
9+
--tomorrow-red: #ef4444;
10+
--tomorrow-yellow: #f9ca24;
2911
}
3012

3113
.hljs,
3214
.no-hljs {
33-
color: var(--text-color);
15+
color: var(--text-color-light);
16+
font-family: 'Inter', sans-serif;
3417
}
3518

3619
.hljs-code,
3720
.hljs-formula {
38-
color: var(--text-color);
21+
color: var(--text-color-light);
3922
}
4023

4124
.hljs-comment,
@@ -110,3 +93,109 @@
11093
.hljs-strong {
11194
font-weight: bold;
11295
}
96+
97+
98+
@media (prefers-color-scheme: dark) {
99+
:root {
100+
--text-color-light: #ffffff;
101+
--background-color-light: #1e293b;
102+
}
103+
104+
body {
105+
background-color: var(--background-color-light);
106+
}
107+
108+
.github-ribbon {
109+
background-color: #1d212e;
110+
}
111+
112+
pre {
113+
background-color: #1d212e;
114+
}
115+
.hljs,
116+
.no-hljs {
117+
color: var(--text-color-dark);
118+
font-family: 'Inter', sans-serif;
119+
}
120+
121+
.hljs-code,
122+
.hljs-formula {
123+
color: var(--text-color-dark);
124+
}
125+
126+
.hljs-comment,
127+
.hljs-quote {
128+
color: var(--tomorrow-gray);
129+
}
130+
131+
.hljs-deletion,
132+
.hljs-meta .hljs-keyword,
133+
.hljs-name,
134+
.hljs-property,
135+
.hljs-regexp,
136+
.hljs-selector-attr,
137+
.hljs-selector-class,
138+
.hljs-selector-id,
139+
.hljs-selector-pseudo,
140+
.hljs-substr,
141+
.hljs-tag,
142+
.hljs-template-tag,
143+
.hljs-template-variable,
144+
.hljs-variable,
145+
.hljs-variable.language_ {
146+
color: var(--tomorrow-red);
147+
}
148+
149+
.hljs-built_in,
150+
.hljs-char.escape_,
151+
.hljs-link,
152+
.hljs-literal,
153+
.hljs-meta,
154+
.hljs-number,
155+
.hljs-operator,
156+
.hljs-params,
157+
.hljs-type {
158+
color: var(--tomorrow-orange);
159+
}
160+
161+
.hljs-attribute {
162+
color: var(--tomorrow-yellow);
163+
}
164+
165+
.hljs-addition,
166+
.hljs-attr,
167+
.hljs-bullet,
168+
.hljs-meta .hljs-string,
169+
.hljs-string,
170+
.hljs-subst,
171+
.hljs-symbol,
172+
.hljs-title.class_.inherited__,
173+
.hljs-title.function_ {
174+
color: var(--tomorrow-green);
175+
}
176+
177+
.hljs-punctuation,
178+
.hljs-section,
179+
.hljs-title {
180+
color: var(--tomorrow-blue);
181+
}
182+
183+
.hljs-keyword,
184+
.hljs-meta.hljs-keyword,
185+
.hljs-selector-tag,
186+
.hljs-title.class_ {
187+
color: var(--tomorrow-purple);
188+
}
189+
190+
.hljs-emphasis {
191+
font-style: italic;
192+
}
193+
194+
.hljs-doctag,
195+
.hljs-strong {
196+
font-weight: bold;
197+
}
198+
199+
200+
}
201+

0 commit comments

Comments
 (0)