style.css (2225B)
1 :root {
2 --accent-color: #700000;
3 --background-color: #f7f3e3;
4 --text-color: #2e2d2b;
5 --code-background-color: #e3dacb;
6 --border-1-color: #e7e3d3;
7 --border-2-color: #d7d3c3;
8 }
9
10 {{ partial "css/chroma_light.css" . | safeCSS}}
11
12 @media (prefers-color-scheme: dark) {
13 :root {
14 --accent-color: #8fffff;
15 --background-color: #080c1c;
16 --text-color: #d1d2d4;
17 --code-background-color: #1c2534;
18 --border-1-color: #181c2c;
19 --border-2-color: #282c3c;
20 }
21
22 {{ partial "css/chroma_dark.css" . | safeCSS}}
23 }
24
25 body {
26 color: var(--text-color);
27 background: var(--background-color);
28 max-width: 70ch;
29 margin: auto;
30 padding: 0 1em 1em 1em;
31 line-height: 1.5em;
32 }
33 /* header and footer areas */
34 .menu {
35 padding: 0;
36 }
37 .menu li {
38 display: inline-block;
39 }
40 .article-meta, .menu a {
41 background: var(--border-1-color);
42 padding: 5px;
43 border-radius: 5px;
44 }
45 .menu, .article-meta, footer {
46 text-align: center;
47 }
48 .title {
49 font-size: 2em;
50 line-height: 1.1em;
51 }
52 header time {
53 font-size: larger;
54 font-weight: bold;
55 }
56 hr {
57 border: 1px dashed var(--border-2-color);
58 }
59 .subtitle {
60 color: var(--accent-color);
61 font-style: italic;
62 }
63 a {
64 text-decoration: none;
65 color: var(--accent-color);
66 }
67 a:hover {
68 text-decoration: underline;
69 }
70 /* code */
71 pre {
72 border: 1px solid var(--border-2-color);
73 padding: 1em;
74 border-radius: 5px;
75 overflow-x: auto;
76 }
77 code {
78 background: var(--code-background-color);
79 }
80 pre code {
81 background: none;
82 }
83 kbd {
84 color: var(--background-color);
85 background: var(--text-color);
86 display: inline-block;
87 padding: 0 3px 0 3px;
88 border-radius: 5px;
89 }
90 /* misc elements */
91 img, iframe, video {
92 max-width: 100%;
93 }
94 main {
95 hyphens: manual;
96 }
97 blockquote {
98 background: var(--border-1-color);
99 border-left: 5px solid var(--border-2-color);
100 border-radius: 5px;
101 padding: 3px 1em 3px;
102 }
103 table {
104 background: var(--border-1-color);
105 border-radius: 5px;
106 border-collapse: collapse;
107 margin: auto;
108 overflow: hidden;
109 }
110 th, td {
111 padding: 5px;
112 }
113 thead, tfoot, tr:nth-child(even) {
114 background: var(--border-2-color);
115 }