55 --font-weight : 500 ;
66 --scrollbar-color : # c00000 ;
77 --header-height : 48px ;
8- --header-background : # 444 ;
8+ --header-background : # 404040 ;
99 --header-color : # ffffff ;
1010 --body-background : # fafafa ;
11- --body-color : # 444 ;
11+ --body-color : # 555 ;
1212 --max-content-width : 1024px ;
1313 --menu-color : # fff ;
1414 --menu-background : # 222 ;
2121 --section-background : # ffffff ;
2222 --footer-color : # fafafa ;
2323 --footer-background : # 444 ;
24- --border-radius : 4px ;
24+ --border-radius : 6px ;
25+ --pre-background : # f0f0f0 ;
26+ --code-background : # f0f0f0 ;
2527 --link-color : # d00000 ;
28+ --button-hover-color : # f0f0f0 ;
29+ --button-hover-background : # b05050 ;
30+ }
31+
32+ [data-theme = "dark" ]
33+ {
34+ --header-background : # 444 ;
35+ --header-color : # ffffff ;
36+ --body-background : # 302020 ;
37+ --body-color : # c0d0c0 ;
38+ --menu-color : # fff ;
39+ --menu-background : # 222 ;
40+ --menu-hover-color : # fff ;
41+ --menu-hover-background : # c00000 ;
42+ --vmenu-color : # fff ;
43+ --vmenu-background : # 222 ;
44+ --vmenu-hover-color : # fff ;
45+ --vmenu-hover-background : var (--menu-hover-background );
46+ --section-background : # 111 ;
47+ --footer-color : # fafafa ;
48+ --footer-background : # 444 ;
49+ --pre-background : # 404040 ;
50+ --code-background : # 404040 ;
51+ --link-color : # ff6060 ;
52+ --button-hover-color : # f0f0f0 ;
53+ --button-hover-background : # b05050 ;
2654}
2755
2856html , body
@@ -38,6 +66,7 @@ html, body
3866 height : 100vh ;
3967 display : flex;
4068 flex-direction : column;
69+ transition : background-color 0.3s linear, color 0.3s linear;
4170}
4271
4372form
@@ -229,6 +258,18 @@ header button.menu-toggle.image-button
229258 display : none;
230259}
231260
261+ header button .theme-toggle .image-button
262+ {
263+ position : fixed;
264+ background : none;
265+ color : white;
266+ padding : 0 ;
267+ top : 0 ;
268+ right : 0 ;
269+ width : var (--header-height );
270+ height : var (--header-height );
271+ }
272+
232273a
233274{
234275 text-decoration : none;
@@ -248,9 +289,10 @@ code
248289 overflow-wrap : break-word;
249290 word-break : break-word;
250291 white-space : normal;
251- background : # f0f0f0 ;
292+ background : var ( --code-background ) ;
252293 border-radius : var (--border-radius );
253- padding : 4px ;
294+ padding : 2px 4px 2px 4px ;
295+ transition : background-color 0.3s linear, color 0.3s linear;
254296}
255297
256298.flex
@@ -263,24 +305,61 @@ code
263305 flex-grow : 1 ;
264306}
265307
308+ .m-1
309+ {
310+ margin : 0.25rem ;
311+ }
312+
266313.ml-1
267314{
268- margin-left : 0.5 rem ;
315+ margin-left : 0.25 rem ;
269316}
270317
271318.mr-1
272319{
273- margin-right : 0.5 rem ;
320+ margin-right : 0.25 rem ;
274321}
275322
276323.mt-1
277324{
278- margin-top : 0.5 rem ;
325+ margin-top : 0.25 rem ;
279326}
280327
281328.mb-1
282329{
283- margin-bottom : 0.5rem ;
330+ margin-bottom : 0.25rem ;
331+ }
332+
333+ .p-1
334+ {
335+ padding : 0.25rem ;
336+ }
337+
338+ .pl-1
339+ {
340+ padding-left : 0.25rem ;
341+ }
342+
343+ .pr-1
344+ {
345+ padding-right : 0.25rem ;
346+ }
347+
348+ .pt-1
349+ {
350+ padding-top : 0.25rem ;
351+ }
352+
353+ .pb-1
354+ {
355+ padding-bottom : 0.25rem ;
356+ }
357+
358+ p .featured
359+ {
360+ font-size : 20px ;
361+ font-weight : bold;
362+ margin : 0.2rem ;
284363}
285364
286365section
@@ -292,6 +371,47 @@ section
292371 box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.1 );
293372}
294373
374+ section .download
375+ {
376+ display : flex;
377+ }
378+
379+ section .download > span
380+ {
381+ margin-top : 22px ;
382+ margin-right : 6px ;
383+ }
384+
385+ a .link-button
386+ {
387+ border : 1px solid var (--link-color );
388+ border-radius : var (--border-radius );
389+ display : inline-flex;
390+ text-decoration : none;
391+ padding : 6px ;
392+ padding-right : 12px ;
393+ vertical-align : middle;
394+ transition : background-color 0.2s linear, color 0.2s linear;
395+ }
396+
397+ a .link-button : hover
398+ {
399+ text-decoration : none;
400+ color : var (--button-hover-color );
401+ background-color : var (--button-hover-background );
402+ }
403+
404+ .screenshots
405+ {
406+ margin-top : 20px ;
407+ }
408+
409+ .screenshots img
410+ {
411+ max-width : 100% ;
412+ margin-top : 20px ;
413+ }
414+
295415main ul > li , main ol > li
296416{
297417 margin-bottom : 0.5rem ;
@@ -319,15 +439,17 @@ section > h3
319439
320440pre
321441{
322- background : # f0f0f0 ;
442+ background : var ( --pre-background ) ;
323443 border-radius : var (--border-radius );
324444 max-width : 100% ;
325445 overflow-x : auto;
326446 overflow-y : hidden;
447+ padding : 2px ;
327448}
328449
329450.language-yaml
330451{
452+ padding : 0 ;
331453 font-family : monospace;
332454 white-space : pre;
333455 margin : 1em 0 ;
@@ -369,7 +491,7 @@ nav.pagination
369491
370492a .github
371493{
372- display : flex;
494+ display : inline- flex;
373495 align-items : center;
374496 justify-content : center;
375497}
0 commit comments