css/base.css 6.7 KiB raw
1
@charset "utf-8";
2
3
:root {
4
  --foreground-color: #eee;
5
  --dim-color: #ccc;
6
  --highlight-color: aquamarine;
7
  --subtle-color: #2c4146;
8
  --scrollbar-width: 0.5rem;
9
}
10
11
* {
12
  margin: 0;
13
  padding: 0;
14
  box-sizing: border-box;
15
}
16
17
html {
18
  font-size: 100%;
19
}
20
21
body {
22
  color: var(--foreground-color);
23
  background-color: #05050c;
24
  max-width: 800px;
25
  margin: 0 auto;
26
  padding: 4rem 0 4rem 0;
27
  line-height: 1.4em;
28
  font-size: 125%;
29
  scrollbar-width: thin;
30
  scrollbar-height: thin;
31
  scrollbar-color: var(--highlight-color) transparent;
32
  -webkit-font-smoothing: antialiased;
33
  -moz-osx-font-smoothing: greyscale;
34
}
35
36
body, code, pre, p, kbd, h1, h2, h3, h4, h5, input, strong, em {
37
  font-family: "Consolas", "Inconsolata", monospace, "Emoji";
38
}
39
40
/* Chrome/Edge/Safari scrollbar */
41
*::-webkit-scrollbar {
42
  width: var(--scrollbar-width);
43
  height: var(--scrollbar-width);
44
}
45
*::-webkit-scrollbar-track {
46
  background: transparent;
47
}
48
*::-webkit-scrollbar-thumb {
49
  background: transparent;
50
  border-radius: 4px;
51
}
52
*::-webkit-scrollbar-corner {
53
  background: transparent;
54
}
55
*:hover::-webkit-scrollbar-thumb,
56
body::-webkit-scrollbar-thumb {
57
  background-color: var(--highlight-color);
58
}
59
60
::selection {
61
  color: black;
62
  background: #ffeebb;
63
}
64
65
:focus {
66
  outline: none;
67
  text-decoration: underline;
68
}
69
70
ul, li {
71
  display: inline-block;
72
}
73
74
li {
75
  margin: 5px 0;
76
  display: block;
77
}
78
79
li::marker {
80
  color: grey;
81
}
82
83
a {
84
  color: var(--highlight-color);
85
  text-decoration: none;
86
}
87
a:hover {
88
  text-decoration: underline;
89
}
90
91
strong {
92
  font-weight: 900;
93
}
94
95
video, img {
96
  color: grey;
97
  font-style: italic;
98
  outline: none;
99
}
100
101
hr {
102
  border: none;
103
  border-top: 1px solid var(--subtle-color);
104
  margin: 2rem 0;
105
}
106
107
section.body {
108
  margin-bottom: 36rem;
109
}
110
111
footer {
112
  font-size: 1rem;
113
  color: var(--subtle-color);
114
}
115
116
body > footer {
117
  display: none;
118
  padding: 1rem 1rem 0 1rem;
119
}
120
121
blockquote {
122
  border-left: 1px solid #444;
123
  padding-left: 1rem;
124
  color: grey;
125
  font-style: italic;
126
}
127
128
/*
129
 * HEADERS
130
 */
131
132
h1, h2, h3, h4 {
133
  font-family: "Space Mono", "Consolas", monospace;
134
  font-weight: bold;
135
  color: var(--highlight-color);
136
}
137
h3, h4, h5 {
138
  font-weight: normal !important;
139
}
140
141
h1 {
142
  font-size: 1.5rem;
143
  line-height: 1.4em;
144
  font-weight: bold;
145
  margin: 2.25rem 0;
146
}
147
h2 {
148
  font-size: 1.3rem;
149
  line-height: 1.4em;
150
  margin-top: 1.5rem;
151
  margin-bottom: 1.25rem;
152
}
153
h3 {
154
  font-size: 1.25rem;
155
  margin-top: 2.5rem;
156
  margin-bottom: 1rem;
157
}
158
159
header a:hover {
160
  text-decoration: none;
161
}
162
header .meta {
163
  display: flex;
164
  justify-content: space-between;
165
  align-items: center;
166
  flex-wrap: nowrap;
167
}
168
header .badges {
169
  display: flex;
170
  gap: 1rem;
171
  margin-right: 1rem;
172
}
173
header .badges a {
174
  line-height: 0;
175
}
176
177
/*
178
 * CODE
179
 */
180
181
pre {
182
  padding: 1rem;
183
  border-radius: 4px;
184
  background-color: #060f11;
185
  overflow-x: scroll !important;
186
}
187
pre code {
188
  white-space: pre;
189
}
190
p code {
191
  padding: 0.125rem 0.25rem;
192
  background-color: #060f11;
193
  border-radius: 4px;
194
}
195
code {
196
  color: #bbb;
197
  white-space: nowrap;
198
  font-style: normal;
199
}
200
code.language-rust {
201
  color: #ddd;
202
  font-style: normal;
203
}
204
code.language-rust .comment {
205
  color: #4b6267;
206
  font-style: italic;
207
}
208
code.language-rust .op {
209
  color: #8b9297;
210
}
211
code.language-rust .keyword {
212
  color: #eee;
213
  font-weight: bold;
214
}
215
code.language-rust .trait {
216
  color: #8b9297;
217
  font-weight: bold;
218
}
219
code.language-rust .ref {
220
  color: #9bb2b7;
221
}
222
code.language-rust .macro {
223
  color: #eee;
224
  font-weight: bold;
225
}
226
code.language-rust .special {
227
  color: #eee;
228
  font-weight: bold;
229
}
230
code.language-rust .attr {
231
  color: #4b6267;
232
  font-weight: bold;
233
}
234
code.language-rust .string {
235
  color: #aaa;
236
}
237
code.language-rust .number {
238
  color: #fff897;
239
}
240
241
img[alt="crates.io"], img[alt="docs.rs"], img[alt="github.com"] {
242
  height: 1.25rem;
243
}
244
245
p + p img {
246
  margin-top: 1.5rem;
247
  margin-bottom: 1.5rem;
248
}
249
p img[alt="diagram"] {
250
  width: 100%;
251
}
252
253
/*
254
 * NOTE
255
 */
256
257
.note p {
258
  margin: 1.5rem 0;
259
}
260
.note p:first-child {
261
  margin-top: 0;
262
}
263
.note ul {
264
  list-style-type: none;
265
}
266
.note ul, .note ol {
267
  margin-left: 3rem;
268
}
269
.note li {
270
  margin: 0;
271
}
272
.note ol {
273
  list-style-type: decimal;
274
}
275
.note ol li {
276
  display: list-item;
277
}
278
.note ul li:before {
279
  content: '*';
280
  color: grey;
281
  position: absolute;
282
  margin-left: -2rem;
283
}
284
.note footer {
285
  text-align: left;
286
}
287
.note .copy {
288
  color: var(--subtle-color);
289
}
290
291
/*
292
 * NAV
293
 */
294
295
nav {
296
  position: fixed;
297
  left: 1rem;
298
  top: 1rem;
299
  z-index: -1;
300
}
301
nav li {
302
  line-height: 1.25em;
303
}
304
nav footer {
305
  position: fixed;
306
  bottom: 1rem;
307
  left: 1rem;
308
}
309
310
/*
311
 * CLASSES
312
 */
313
314
.date {
315
  color: #2c4146;
316
}
317
.subtle {
318
  color: var(--subtle-color);
319
}
320
.footnotes {
321
  margin-top: 2rem;
322
  padding-top: 2rem;
323
  border-top: 1px solid var(--subtle-color);
324
  font-size: 18px;
325
}
326
.footnotes ol {
327
  margin-left: 2rem;
328
}
329
.footnotes p {
330
  margin: 0 !important;
331
}
332
.footnote-ref a, a[rel="footnote"] {
333
  font-size: 0.875rem;
334
  letter-spacing: -0.125rem;
335
}
336
a.footnote::before {
337
  content: "[";
338
}
339
a.footnote::after {
340
  content: "]";
341
}
342
a.footnote-backref {
343
  font-family: Helvetica, Arial, sans-serif;
344
}
345
346
347
.qr {
348
  margin-bottom: 2em;
349
  text-align: center;
350
  width: 100%;
351
  cursor: pointer;
352
}
353
.qr img {
354
  text-align: center;
355
  display: block;
356
  margin: 0 auto 1rem auto;
357
  max-width: 50%;
358
}
359
360
input.address {
361
  font-size: 100%;
362
  background: none;
363
  border: none;
364
  margin: none;
365
  padding: 0.5rem;
366
  color: var(--highlight-color);
367
  cursor: pointer;
368
  text-decoration: none;
369
  width: 100%;
370
  text-align: center;
371
}
372
373
.copy-message {
374
  vertical-align: middle;
375
  color: var(--highlight-color);
376
  visibility: hidden;
377
  position: fixed;
378
  top: 0;
379
  right: 0;
380
  padding: 1rem;
381
}
382
383
/*
384
 * MEDIA
385
 */
386
387
@media /* Medium desktop */
388
only screen and (max-device-width: 1440px),
389
only screen and (max-width: 1440px) {
390
  nav .subtle {
391
    display: none;
392
  }
393
}
394
395
@media /* Small desktop */
396
only screen and (max-device-width: 1280px),
397
only screen and (max-width: 1280px) {
398
  body {
399
    max-width: 720px;
400
  }
401
}
402
403
@media /* Smaller desktop */
404
only screen and (max-device-width: 960px),
405
only screen and (max-width: 960px) {
406
  body {
407
    max-width: 100%;
408
    padding: 1rem 0rem;
409
  }
410
  nav {
411
    display: block;
412
    position: static;
413
    margin-bottom: 1.5rem;
414
  }
415
  nav footer {
416
    display: none;
417
  }
418
  nav ul {
419
    column-count: 2;
420
    column-gap: 4em;
421
422
    -webkit-column-count: 2;
423
    -webkit-column-gap: 4rem;
424
    -moz-column-count: 2;
425
    -moz-column-gap: 4rem;
426
  }
427
  img[alt="crates.io"], img[alt="docs.rs"], img[alt="github.com"] {
428
    height: 1.25rem;
429
  }
430
  article {
431
    margin: 0 1rem;
432
  }
433
  nav {
434
    padding: 0 1rem;
435
  }
436
  pre {
437
    padding: 1rem;
438
  }
439
  body > footer {
440
    display: block;
441
  }
442
}
443
444
@media /* Mobile */
445
only screen and (max-device-width: 720px) {
446
  body {
447
    font-size: 87.5%;
448
  }
449
  video {
450
    height: auto;
451
    width: 100%;
452
    border-left: none;
453
    border-right: none;
454
  }
455
  pre {
456
    overflow: scroll !important;
457
  }
458
  pre code {
459
    white-space: pre !important;
460
  }
461
}