theme/static/styles.css
335 lines · 5436 bytes
1:root {
2 --bg: #fafafa;
3 --bg-light: #f0f0f0;
4 --fg: #1b2229;
5 --fg-light: #383a42;
6 --link: #0f62fe;
7 --code: #8c2117;
8}
9
10body {
11 background-color: var(--bg);
12 color: var(--fg-light);
13 font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
14 font-size: 0.85rem;
15 line-height: 1.4;
16 margin: 0 auto;
17 max-width: 45em;
18 padding: 1.5rem;
19}
20
21a,
22a:active {
23 color: var(--link);
24}
25
26a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"]) {
27 display: inline;
28}
29
30a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::before {
31 background-color: var(--bg);
32 color: var(--fg);
33 content: "[";
34 display: inline-block;
35 padding-right: 0.15em;
36 pointer-events: none;
37 position: relative;
38 text-decoration: none;
39 z-index: 1;
40}
41
42a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::after {
43 background-color: var(--bg);
44 color: var(--fg);
45 content: "]";
46 display: inline-block;
47 padding-left: 0.15em;
48 pointer-events: none;
49 position: relative;
50 text-decoration: none;
51 z-index: 1;
52}
53
54h1,
55h2,
56h3,
57h4,
58h5,
59h6,
60nav,
61time,
62code,
63pre,
64.metadata-block {
65 font-family: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
66}
67
68h1,
69h2,
70h3,
71h4,
72h5,
73h6 {
74 color: var(--fg);
75 font-size: 0.85rem;
76 font-weight: bold;
77 margin-bottom: 1rem;
78 margin-top: 1rem;
79}
80
81h1 {
82 font-size: 0.85rem;
83}
84
85.skip-link {
86 height: 1px;
87 left: -10000px;
88 overflow: hidden;
89 position: absolute;
90 top: auto;
91 width: 1px;
92}
93
94.skip-link:focus {
95 height: auto;
96 position: static;
97 width: auto;
98}
99
100nav {
101 align-items: center;
102 display: flex;
103 justify-content: space-around;
104 margin: 3rem 0;
105 width: 100%;
106}
107
108nav ul {
109 display: flex;
110 list-style-type: none;
111 margin: 0;
112 padding: 0;
113 width: 100%;
114}
115
116nav ul li {
117 height: 100%;
118 margin-bottom: 0.5rem;
119 margin-right: 1rem;
120 text-align: center;
121}
122
123.context-box {
124 background-color: var(--bg-light);
125 color: var(--fg);
126 display: grid;
127 font-size: 0.85rem;
128 grid-template-columns: auto 1fr;
129 gap: 0.5rem 1rem;
130 margin-bottom: 3rem;
131 margin-top: 3rem;
132 padding: 1rem;
133}
134
135.context-label {
136 color: var(--link);
137 font-weight: bold;
138 text-transform: uppercase;
139}
140
141blockquote {
142 background-color: var(--bg-light);
143 border-left: 8px solid var(--link);
144 margin: 1rem 0;
145 padding: 0.5rem 1rem;
146}
147
148blockquote p {
149 margin: 0;
150}
151
152.reply-link {
153 border: 1px dotted var(--fg-light);
154 margin-top: 3rem;
155 padding: 0.5rem 1rem;
156}
157
158img {
159 border-style: none;
160 width: 100%;
161}
162
163table {
164 border: 1px dotted var(--fg);
165 border-collapse: collapse;
166 width: 100%;
167}
168
169colgroup,
170thead,
171tbody {
172 border: 1px dotted var(--fg);
173}
174
175pre,
176pre>code,
177code {
178 font-size: 0.85rem;
179}
180
181pre {
182 background-color: var(--bg-light);
183 margin: 0.5rem 0;
184 overflow-x: auto;
185 padding: 0.5rem;
186}
187
188time {
189 margin-right: 0.5rem;
190}
191
192:not(pre)>code {
193 color: var(--code);
194}
195
196.post {
197 align-items: flex-start;
198 display: flex;
199 margin: 0.5rem 0;
200}
201
202.post time {
203 flex-shrink: 0;
204 font-size: 0.85rem;
205 margin-right: 1rem;
206}
207
208article {
209 border-bottom: 1px dotted var(--fg-light);
210 margin-bottom: 3rem;
211 padding-bottom: 3rem;
212}
213
214p {
215 margin-top: 0.5rem;
216 margin-bottom: 1rem;
217}
218
219footer {
220 margin: 3rem 0;
221}
222
223#table-of-contents {
224 border: 1px dotted var(--fg-light);
225 font-family: Menlo, Consolas, Monaco, "Liberation Mono", monospace;
226 font-size: 0.85rem;
227 margin-bottom: 3rem;
228 margin-top: 3rem;
229 max-width: 100%;
230 padding: 3rem;
231}
232
233#table-of-contents h2 {
234 border: none;
235 font-family: inherit;
236 font-size: 0.85rem;
237 text-transform: none;
238 font-weight: normal;
239 margin-bottom: 1rem;
240 margin-top: 0;
241 padding: 0;
242}
243
244#text-table-of-contents ul {
245 list-style: none;
246 padding-left: 0;
247 margin: 0;
248}
249
250#text-table-of-contents ul ul {
251 padding-left: 2ch;
252}
253
254#text-table-of-contents li a {
255 align-items: baseline;
256 display: flex;
257 padding: 0.2rem 0;
258}
259
260#text-table-of-contents li a::after {
261 background-image: radial-gradient(circle, var(--fg-light) 1px, transparent 1px);
262 background-position: 0 bottom;
263 background-repeat: repeat-x;
264 background-size: 8px 100%;
265 border-bottom: none;
266 content: "";
267 flex-grow: 1;
268 height: 4px;
269 margin-left: 1ch;
270 opacity: 0.6;
271 padding-left: 1ch;
272 text-align: right;
273}
274
275#text-table-of-contents li a:hover {
276 background-color: transparent;
277 color: var(--link);
278}
279
280#text-table-of-contents ul {
281 list-style: none;
282 margin: 0;
283 padding-left: 0;
284}
285
286#text-table-of-contents ul ul {
287 margin-top: 0.2rem;
288 padding-left: 3ch;
289}
290
291.outline-2 ul li {
292 list-style: none;
293}
294
295.outline-2 ul li::before {
296 color: var(--fg-light);
297 content: "- ";
298}
299
300.outline-2 {
301
302 p,
303 ul,
304 ol,
305 blockquote,
306 pre,
307 table {
308 margin-left: 3ch;
309 }
310
311 blockquote p {
312 margin-left: 0;
313 }
314}
315
316.recent-posts {
317 h2 {
318 margin-bottom: 1.5rem;
319 }
320
321 p {
322 margin-top: 1.5rem;
323 }
324}
325
326@media (prefers-color-scheme: dark) {
327 :root {
328 --bg: #000000;
329 --bg-light: #1B2229;
330 --fg: #DFDFDF;
331 --fg-light: #BBC2CF;
332 --link: #67C0FF;
333 --code: #FF6C6B;
334 }
335}