Skip to content

Commit f2167ed

Browse files
xcatliuxcatliu
committed
deploy: 34f5a25 
1 parent c60e2c3 commit f2167ed

File tree

3 files changed

+423
-174
lines changed

3 files changed

+423
-174
lines changed

‎assets/index.css

Lines changed: 56 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,18 @@
1-
/* #region variables */
2-
:root {
3-
--color-text: #333;
4-
--color-muted: #777;
5-
--color-link: hsl(210, 70%, 50%);
6-
--color-background: white;
7-
--color-background-faded: #f2f2f2;
8-
--color-background-sidebar: #fafafa;
9-
--color-background-code: #f2f2f2;
10-
--color-border: #eee;
11-
--color-header-shadow: rgba(0, 0, 0, 0.1);
12-
13-
--font-size: 16px;
14-
--font-size-small: 14px;
15-
--line-height: 1.5;
16-
--line-height-small: 1.25;
17-
18-
--height-header: 3rem;
19-
--width-sidebar: 18rem;
20-
/* 42 words per line is the best, 42 * 16 + 48 + 48 = 48 * 16 = 48rem */
21-
--width-article: 48rem;
22-
--width-article-padding: 3rem;
23-
--width-toc: 12rem;
24-
25-
--opacity: 0.7;
26-
}
27-
28-
html.is_dark {
29-
--color-text: #aaa;
30-
--color-muted: #777;
31-
--color-link: hsl(210, 60%, 60%);
32-
--color-background: #222;
33-
--color-background-faded: #111;
34-
--color-background-sidebar: #1a1a1a;
35-
--color-background-code: #333;
36-
--color-border: #333;
37-
--color-header-shadow: rgba(0, 0, 0, 0.8);
38-
}
39-
/* #endregion */
40-
41-
/* #region reset */
42-
* {
43-
box-sizing: border-box;
44-
}
45-
html {
46-
color: var(--color-text);
47-
background-color: var(--color-background);
48-
font-size: var(--font-size);
49-
line-height: var(--line-height);
50-
}
51-
body {
52-
margin: 0;
53-
padding: 0;
54-
}
55-
h1 {
56-
font-size: 32px;
57-
}
58-
h2 {
59-
font-size: 24px;
60-
}
61-
h3 {
62-
font-size: 18px;
63-
}
64-
h4,
65-
h5,
66-
h6 {
67-
font-size: var(--font-size);
68-
}
69-
hr {
70-
display: block;
71-
height: 2px;
72-
border: 0;
73-
border-top: 1px solid var(--color-border);
74-
}
75-
76-
a {
77-
color: var(--color-link);
78-
text-decoration: none;
79-
}
80-
a:hover {
81-
text-decoration: underline;
82-
}
83-
84-
blockquote {
85-
border-left: 5px solid var(--color-border);
86-
overflow: auto;
87-
color: var(--color-muted);
88-
}
89-
90-
code {
91-
font-size: 85%;
92-
padding: 0.2em 0.3em;
93-
background-color: var(--color-background-code);
94-
}
95-
pre,
96-
pre[class*='language-'] {
97-
font-size: 13px !important;
98-
}
99-
pre code {
100-
padding: 0;
101-
}
1+
@import 'variables.css';
2+
@import 'reset.css';
1023

1034
html.is_dark img {
1045
opacity: var(--opacity);
105-
transition: opacity 0.3s ease-in-out;
6+
transition: opacity var(--transition-duration);
1067
}
1078
html.is_dark img:hover {
1089
opacity: 1;
10910
}
110-
/* #endregion */
11111

112-
/* #region common */
12+
/* #region Common */
11313
.nav_link,
11414
.nav_link_container a {
115-
color: var(--color-muted);
15+
color: var(--color-text-muted);
11616
text-decoration: none;
11717
}
11818
.nav_link:hover,
@@ -122,61 +22,20 @@ html.is_dark img:hover {
12222
}
12323
.nav_link.active,
12424
.nav_link_container a.active {
125-
color: var(--color-link);
25+
color: var(--color-primary);
12626
}
12727

12828
.popover {
12929
position: absolute;
13030
background-color: var(--color-background);
13131
border: 1px solid var(--color-border);
132-
box-shadow: 0 0 0.5rem var(--color-header-shadow);
32+
box-shadow: var(--box-shadow);
13333
padding: 1rem;
134-
z-index: 200;
135-
}
136-
/* #endregion */
137-
138-
/* #region paddings */
139-
h1,
140-
h2,
141-
h3,
142-
h4,
143-
h5,
144-
h6 {
145-
margin: 2rem 0 0 0;
146-
}
147-
p,
148-
ul,
149-
ol,
150-
blockquote,
151-
pre {
152-
margin: 1rem 0 0 0;
153-
}
154-
ul ul,
155-
ul ol,
156-
ol ul,
157-
ol ol {
158-
margin: 0;
159-
}
160-
ul,
161-
ol {
162-
padding: 0 0 0 2rem;
163-
}
164-
hr {
165-
margin: 2rem 0 2rem 0;
166-
}
167-
pre,
168-
pre[class*='language-'] {
169-
margin: 1rem 0 0 0 !important;
170-
}
171-
blockquote {
172-
padding: 0.5rem 0 0.5rem 1rem;
173-
}
174-
blockquote > *:first-child {
175-
margin-top: 0;
34+
z-index: var(--z-index-popover);
17635
}
17736
/* #endregion */
17837

179-
/* #region header */
38+
/* #region Header */
18039
header {
18140
display: flex;
18241
position: fixed;
@@ -185,9 +44,9 @@ header {
18544
width: 100vw;
18645
height: var(--height-header);
18746
border-bottom: 1px solid var(--color-border);
188-
box-shadow: 0 0 0.5rem var(--color-header-shadow);
47+
box-shadow: var(--box-shadow);
18948
background-color: var(--color-background);
190-
z-index: 100;
49+
z-index: var(--z-index-header);
19150
}
19251
header h1 {
19352
margin-top: 0;
@@ -226,7 +85,7 @@ header li a {
22685
color: var(--color-text);
22786
}
22887
header li a:hover {
229-
color: var(--color-link);
88+
color: var(--color-primary);
23089
text-decoration: none;
23190
}
23291
.toggle_dark {
@@ -255,7 +114,7 @@ header li a:hover {
255114
}
256115
/* #endregion */
257116

258-
/* #region sidebar */
117+
/* #region Sidebar */
259118
.sidebar {
260119
position: fixed;
261120
top: var(--height-header);
@@ -266,7 +125,7 @@ header li a:hover {
266125
padding: 2rem 0 2rem 1rem;
267126
background-color: var(--color-background-sidebar);
268127
border-right: 1px solid var(--color-border);
269-
font-size: var(--font-size-small);
128+
font-size: 14px;
270129
line-height: var(--line-height-small);
271130
}
272131
.sidebar ol {
@@ -279,12 +138,12 @@ header li a:hover {
279138
}
280139
.sidebar ol ol {
281140
padding-left: 1rem;
282-
transition: height 0.3s;
141+
transition: height var(--transition-duration);
283142
overflow: hidden;
284143
}
285144
.sidebar .nav_link {
286145
position: relative;
287-
padding: 6px 15px;
146+
padding: 6px calc(1rem - 1px);
288147
display: block;
289148
border: 1px solid transparent;
290149
border-right: none;
@@ -301,15 +160,15 @@ header li a:hover {
301160
position: absolute;
302161
top: 0;
303162
right: 0;
304-
width: 29px;
305-
height: 29px;
163+
width: 30px;
164+
height: 30px;
306165
background-size: 18px;
307166
background-position: center center;
308167
background-repeat: no-repeat;
309168
}
310169
.fold > a,
311170
.unfold > a {
312-
padding-right: 29px;
171+
padding-right: 30px;
313172
}
314173
.czs-angle {
315174
display: none;
@@ -341,12 +200,9 @@ header li a:hover {
341200
margin: 2rem 1rem 2rem 0;
342201
}
343202
.powered_by {
344-
color: var(--color-muted);
203+
color: var(--color-text-muted);
345204
margin-left: 1rem;
346205
}
347-
.is_dark .powered_by:hover {
348-
background-color: black;
349-
}
350206
.powered_by img {
351207
width: 24px;
352208
height: 24px;
@@ -355,7 +211,7 @@ header li a:hover {
355211
}
356212
/* #endregion */
357213

358-
/* #region article */
214+
/* #region Article */
359215
.main {
360216
margin: var(--height-header) 0 0 var(--width-sidebar);
361217
display: flex;
@@ -374,20 +230,17 @@ article.loading {
374230
justify-content: center;
375231
align-items: center;
376232
}
377-
article img {
378-
max-width: 100%;
379-
}
380233

381234
.anchor,
382235
.anchor:hover {
383236
opacity: 0;
384-
color: var(--color-muted);
237+
color: var(--color-text-muted);
385238
text-decoration: none;
386239
font-weight: normal;
387240
margin-left: 0.5em;
388241
}
389242
.anchor:hover {
390-
color: var(--color-link);
243+
color: var(--color-primary);
391244
}
392245

393246
h1:hover .anchor,
@@ -398,13 +251,42 @@ h5:hover .anchor,
398251
h6:hover .anchor {
399252
opacity: 1;
400253
}
254+
255+
table {
256+
/* Reset for nesting within parents with `background-color`. */
257+
background-color: var(--color-background);
258+
border: 0;
259+
border-collapse: collapse;
260+
border-spacing: 0;
261+
width: 100%;
262+
}
263+
table caption {
264+
caption-side: bottom;
265+
color: var(--color-text-muted);
266+
font-size: var(--font-size-small);
267+
padding: 5px 1rem;
268+
text-align: left;
269+
}
270+
271+
table th,
272+
table td {
273+
border: 0;
274+
border-bottom: 1px solid var(--color-border);
275+
padding: 5px 0.5rem;
276+
text-align: left;
277+
}
278+
279+
table th {
280+
background-color: var(--color-background-faded);
281+
font-weight: var(--font-weight-bold);
282+
}
401283
/* #endregion */
402284

403-
/* #region toc */
285+
/* #region Toc */
404286
.main_toc_container {
405287
width: calc(var(--width-toc) + 2rem);
406288
min-width: calc(var(--width-toc) + 2rem);
407-
font-size: var(--font-size-small);
289+
font-size: 14px;
408290
line-height: var(--line-height-small);
409291
padding: 2rem 2rem 2rem 0;
410292
}
@@ -416,7 +298,7 @@ h6:hover .anchor {
416298
}
417299
.is_dark .toc_ad {
418300
opacity: var(--opacity);
419-
transition: opacity 0.3s ease-in-out;
301+
transition: opacity var(--transition-duration);
420302
}
421303
.is_dark .toc_ad:hover {
422304
opacity: 1;
@@ -438,7 +320,7 @@ h6:hover .anchor {
438320
}
439321
/* #endregion */
440322

441-
/* #region gitalk */
323+
/* #region Gitalk */
442324
.gt-container {
443325
margin: 0 auto;
444326
color: var(--color-text);

0 commit comments

Comments
 (0)