|
diff --git a/templates/base.html b/templates/base.html
|
| ... |
| 12 |
|
12 |
|
| 13 |
<style> |
13 |
<style> |
| 14 |
:root { |
14 |
:root { |
|
|
15 |
--base-background: white; |
|
|
16 |
--base-color: black; |
|
|
17 |
--link-color: blue; |
| 15 |
--first-child-width: 150px; |
18 |
--first-child-width: 150px; |
| 16 |
--primary-color: gainsboro; |
19 |
--primary-color: gainsboro; |
| 17 |
--secondary-color: black; |
20 |
--secondary-color: black; |
| 18 |
--tertiary-color: #eee; |
21 |
--tertiary-color: #eee; |
| 19 |
--code-color: #f9f9f9; |
22 |
--code-color: #f9f9f9; |
| 20 |
--border-width: 1px; |
23 |
--border-width: 1px; |
|
|
24 |
--header-color: black; |
| 21 |
--header-border-width: 2px; |
25 |
--header-border-width: 2px; |
| 22 |
} |
26 |
} |
| 23 |
|
27 |
|
|
|
28 |
@media (prefers-color-scheme: dark) { |
|
|
29 |
:root { |
|
|
30 |
--base-background: black; |
|
|
31 |
--base-color: white; |
|
|
32 |
--link-color: white; |
|
|
33 |
--primary-color: white; |
|
|
34 |
--secondary-color: white; |
|
|
35 |
--code-color: black; |
|
|
36 |
--header-color: black; |
|
|
37 |
} |
|
|
38 |
} |
|
|
39 |
|
| 24 |
* { box-sizing: border-box; } |
40 |
* { box-sizing: border-box; } |
| 25 |
|
41 |
|
| 26 |
html { scroll-padding-top: 1.5em; } |
42 |
html { scroll-padding-top: 1.5em; } |
| 27 |
body { font-family: sans-serif; padding: 0 1em; line-height: 160%; display: flex; flex-direction: column; gap: 4em; } |
43 |
body { font-family: sans-serif; padding: 0 1em; line-height: 160%; display: flex; flex-direction: column; gap: 4em; background: var(--base-background); color: var(--base-color); } |
| 28 |
table { width: 100%; border: var(--border-width) solid var(--primary-color); border-collapse: collapse; } |
44 |
table { width: 100%; border: var(--border-width) solid var(--primary-color); border-collapse: collapse; } |
| 29 |
table thead { background: var(--primary-color); border: var(--border-width) solid var(--secondary-color); } |
45 |
table thead { background: var(--primary-color); border: var(--border-width) solid var(--secondary-color); color: var(--header-color); } |
| 30 |
table td, table th { text-align: left; padding: 0.3em 0.5em; } |
46 |
table td, table th { text-align: left; padding: 0.3em 0.5em; } |
| 31 |
table tbody tr { border-bottom: var(--border-width) solid var(--primary-color); vertical-align: middle; } |
47 |
table tbody tr { border-bottom: var(--border-width) solid var(--primary-color); vertical-align: middle; } |
| 32 |
table tr td:first-child { width: var(--first-child-width); } |
48 |
table tr td:first-child { width: var(--first-child-width); } |
| 33 |
table td.tags { display: flex; gap: 0.5em; justify-content: flex-end; align-items: center; } |
49 |
table td.tags { display: flex; gap: 0.5em; justify-content: flex-end; align-items: center; } |
| 34 |
table td.tags mark { padding: 0 0.4em; background: var(--primary-color); font-size: small; } |
50 |
table td.tags mark { padding: 0 0.4em; background: var(--primary-color); font-size: small; } |
| 35 |
|
51 |
|
| 36 |
a { color: blue; text-decoration: none; } |
52 |
a { color: var(--link-color); text-decoration: none; } |
| 37 |
a:hover { text-decoration: underline; } |
53 |
a:hover { text-decoration: underline; } |
| 38 |
|
54 |
|
| 39 |
header { border-bottom: var(--header-border-width) solid var(--secondary-color); padding: 0.5em 0; display: flex; } |
55 |
header { border-bottom: var(--header-border-width) solid var(--secondary-color); padding: 0.5em 0; display: flex; } |
| 40 |
header nav:first-child { display: flex; width: var(--first-child-width); } |
56 |
header nav:first-child { display: flex; width: var(--first-child-width); } |
| 41 |
header nav:last-child { display: flex; gap: 1.5em; } |
57 |
header nav:last-child { display: flex; gap: 1.5em; } |
| 42 |
header nav:last-child a { color: black; } |
58 |
header nav:last-child a { color: var(--base-color); } |
| 43 |
|
59 |
|
| 44 |
footer { color: gray; } |
60 |
footer { color: gray; } |
| 45 |
footer a { color: gray; text-decoration: underline; } |
61 |
footer a { color: gray; text-decoration: underline; } |
| ... |