Dark theme and improved markdown style

Julien LepillerTue Aug 10 14:45:45+0200 2021

240de81

Dark theme and improved markdown style

assets/css/git.css

1313 
  --red: #ff5c47;
1414 
}
1515 
16+
@media screen and (prefers-color-scheme: dark) {
17+
  :root {
18+
    --white: #110d0a;
19+
    --darkwhite: #2a2520;
20+
    --gray: #393534;
21+
    --border-dark: #111;
22+
    --black: #ddd;
23+
24+
    --blue: #2c3f4a;
25+
    --orange: #885b0f;
26+
    --green: #316b40;
27+
    --red: #803227;
28+
29+
    --darkgreen: #1c5e08;
30+
    --darkergreen: #1c4e08;
31+
    --darkdarkgreen: #103504;
32+
  }
33+
}
34+
1635 
html, body {
1736 
  margin: 0;
1837 
  padding: 0;
assets/css/gitile.css
55 
 */
66 
77 
:root {
8+
  /* header colors */
89 
  --blue: #6eaee6;
9-
  --darkblue: #176ECB;
10+
  --darkblue: #176ecb;
1011 
  --lightblue: #a1d9f4;
11-
  --darkwhite: #faf5f0;
12-
  --black: #333;
13-
  --lighterblack: #777;
14-
  --white: #fff;
12+
  --top-link-white: #fff;
13+
14+
  /* footer */
1515 
  --darkgreen: #2cae0e;
16-
  --gray: #ccc;
16+
17+
  /* elements */
18+
  --white: #fff;
19+
  --darkwhite: #faf5f0;
1720 
  --darkerwhite: #eae5e0;
18-
  --lighterred: #fbe9eb;
19-
  --lightergreen: #ecfdf0;
20-
  --lightred: #f9d7dc;
21+
  --gray: #ccc;
22+
  --lighterblack: #777;
23+
  --black: #333;
24+
25+
  /* diffs */
2126 
  --lightgreen: #ddfbe6;
27+
  --lightergreen: #ecfdf0;
2228 
  --bordergreen: #b0eab9;
29+
30+
  --lightred: #f9d7dc;
31+
  --lighterred: #fbe9eb;
2332 
  --borderred: #eac0c9;
2433 
25-
  /* syntax highlighting */
26-
  --comment: #777;
27-
  --string: #b22;
28-
  --keyword: #35a;
29-
  --keyword2: #732;
34+
  --hunk-delim: #fafafa;
35+
  --diff-name-background: #cccac5;
36+
37+
  /* code blocks in readme */
38+
  --code-color: #353;
39+
  --code-background: #ded;
40+
  --code-shadow: #efe;
41+
  --code-border: #bdb;
42+
  --pre-shadow: #efe;
43+
  --pre-border: #bdb;
44+
}
45+
46+
@media screen and (prefers-color-scheme: dark) {
47+
  :root {
48+
    --blue: #0e2e46;
49+
    --darkblue: #1e3e56;
50+
    --lightblue: #073766;
51+
    --top-link-white: #d0daff;
52+
53+
    --darkgreen: #2cae0e;
54+
55+
    --white: #000;
56+
    --darkwhite: #110d0a;
57+
    --darkerwhite: #151311;
58+
    --gray: #333;
59+
    --lighterblack: #777;
60+
    --black: #ddd;
61+
62+
    --lightgreen: #0d2b16;
63+
    --lightergreen: #0c1d10;
64+
    --bordergreen: #304a39;
65+
66+
    --lightred: #29070c;
67+
    --lighterred: #1b090b;
68+
    --borderred: #4a3039;
69+
70+
    --hunk-delim: #0a0a0a;
71+
    --diff-name-background: #3c3a35;
72+
73+
    --code-color: #ded;
74+
    --code-background: #111511;
75+
    --code-shadow: #010;
76+
    --code-border: #343;
77+
    --pre-shadow: #232;
78+
    --pre-border: #343;
79+
  }
80+
81+
  a {
82+
    color: #81b9e4;
83+
  }
3084 
}
3185 
3286 
html, body {
…
80134 
header li a {
81135 
  display: inline-block;
82136 
  padding: 1em;
83-
  color: var(--white);
137+
  color: var(--top-link-white);
84138 
}
85139 
86140 
header li a:hover {
…
129183 
  margin: 0;
130184 
  background: var(--white);
131185 
  line-height: 1em;
132-
  font-size: 0.85em;
133186 
  font-family: monospace, monospace;
134187 
}
135188 
189+
pre {
190+
  font-size: 0.85em;
191+
}
192+
136193 
article.formatted-file-content > * {
137-
  max-width: 800px;
138194 
  margin-left: auto;
139195 
  margin-right: auto;
196+
  font-family: noto sans, sans serif;
197+
  font-size: 1.05em;
198+
}
199+
200+
.formatted-file-content ul {
201+
  padding-left: 1em;
140202 
}
141203 
142204 
.formatted-file-content pre {
143-
  border: 1px solid #ddd;
144-
  box-shadow: 1px 1px 0 #eee;
205+
  border: 1px solid var(--pre-border);
206+
  box-shadow: 1px 1px 0 var(--pre-shadow);
145207 
  overflow: auto;
208+
  font-family: noto mono, mono;
209+
  font-size: inherit;
210+
  color: #353;
146211 
}
147212 
148213 
.formatted-file-content h1 {
…
159224 
160225 
article.formatted-file-content {
161226 
  font-family: inherit;
162-
  font-size: 0.85em;
163227 
  line-height: inherit;
164228 
  padding: 1em 5em;
165229 
}
…
199263 
}
200264 
201265 
table.file-diff .hunk-delim {
202-
  background: #fafafa;
266+
  background: var(--hunk-delim);
203267 
  border-bottom: 1px solid var(--darkerwhite);
204268 
  border-top: 1px solid var(--darkerwhite);
205269 
  text-align: center;
…
276340 
}
277341 
278342 
p.diff-file-name {
279-
  background: #cccac5;
343+
  background: var(--diff-name-background);
280344 
  margin: 0;
281345 
  padding: 0.5em;
282346 
  border: 1px solid var(--gray);
…
393457 
  font-family: inherit;
394458 
  padding: 0;
395459 
  background: none;
460+
  box-shadow: none;
396461 
  display: block;
462+
  color: var(--black);
397463 
}
398464 
399465 
.formatted-file-content code {
400-
  background: none;
401-
  padding: 0;
402-
  display: inline;
466+
  background: var(--code-background);
467+
  padding: 0.15em;
468+
  display: inline-block;
469+
  border-radius: 5px;
470+
  box-shadow: 1px 1px 1px var(--code-shadow);
471+
  color: var(--code-color);
403472 
}
404473 
405474 
.clone {