@intergrav/dev.css 3.0.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +120 -90
  2. package/addon/header-sidebar.css +35 -0
  3. package/addon/header-sticky.css +8 -0
  4. package/demo.html +294 -286
  5. package/dev.css +487 -474
  6. package/package.json +30 -33
  7. package/theme/boilerplate.css +19 -19
  8. package/theme/night.css +16 -16
  9. package/theme/terminal.css +21 -21
package/dev.css CHANGED
@@ -1,474 +1,487 @@
1
- /* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
-
3
- /* Table of Contents
4
- 1. Configuration
5
- 2. Dark Mode Handling
6
- 3. CSS Reset
7
- 4. Margins for Most Elements
8
- 5. Font Family
9
- 6. Body and Selection Styling
10
- 7. Typography
11
- 8. Blockquotes
12
- 9. Header
13
- 10. Footer
14
- 11. Buttons and Inputs
15
- 12. Code and Keyboards
16
- 13. Details
17
- 14. Description Lists
18
- 15. Horizontal Rules
19
- 16. Fieldsets
20
- 17. Tables
21
- 18. Lists
22
- */
23
-
24
- /* 1. Configuration */
25
- :root {
26
- /* Font families */
27
- --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
28
- "Segoe UI", sans-serif;
29
- --dc-font-mono: "Geist Mono", monospace;
30
-
31
- /* Light colors */
32
- --dc-tx-1: #000000;
33
- --dc-tx-2: #1a1a1a;
34
- --dc-bg-1: #fafafa;
35
- --dc-bg-2: #fff;
36
- --dc-bg-3: #ebebeb;
37
- --dc-lk-1: #0068d6;
38
- --dc-lkb-1: #0072f5;
39
- --dc-lkb-2: #0062d1;
40
- --dc-lkb-tx: #ededed;
41
- --dc-ac-1: #8e4ec6;
42
- --dc-ac-tx: #ededed;
43
-
44
- /* Dark colors */
45
- --dc-d-tx-1: #ededed;
46
- --dc-d-tx-2: #a1a1a1;
47
- --dc-d-bg-1: #000;
48
- --dc-d-bg-2: #0a0a0a;
49
- --dc-d-bg-3: #2e2e2e;
50
- --dc-d-lk-1: #52a8ff;
51
- --dc-d-lkb-1: #0072f5;
52
- --dc-d-lkb-2: #0062d1;
53
- --dc-d-lkb-tx: #ededed;
54
- --dc-d-ac-1: #8e4ec6;
55
- --dc-d-ac-tx: #ededed;
56
- }
57
-
58
- /* 2. Dark Mode Handling */
59
- @media (prefers-color-scheme: dark) {
60
- :root {
61
- --dc-tx-1: var(--dc-d-tx-1);
62
- --dc-tx-2: var(--dc-d-tx-2);
63
- --dc-bg-1: var(--dc-d-bg-1);
64
- --dc-bg-2: var(--dc-d-bg-2);
65
- --dc-bg-3: var(--dc-d-bg-3);
66
- --dc-lk-1: var(--dc-d-lk-1);
67
- --dc-lkb-1: var(--dc-d-lkb-1);
68
- --dc-lkb-2: var(--dc-d-lkb-2);
69
- --dc-lkb-tx: var(--dc-d-lkb-tx);
70
- --dc-ac-1: var(--dc-d-ac-1);
71
- --dc-ac-tx: var(--dc-d-ac-tx);
72
- }
73
- }
74
-
75
- /* 3. CSS Reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
76
- *,
77
- *::before,
78
- *::after {
79
- box-sizing: border-box;
80
- margin: 0;
81
- word-break: break-word;
82
- }
83
-
84
- body {
85
- line-height: 1.5;
86
- }
87
-
88
- img,
89
- picture,
90
- video,
91
- canvas,
92
- svg {
93
- display: block;
94
- max-width: 100%;
95
- }
96
-
97
- input,
98
- button,
99
- textarea,
100
- select {
101
- font: inherit;
102
- }
103
-
104
- #root,
105
- #__next {
106
- isolation: isolate;
107
- }
108
-
109
- /* 4. Margins for Most Elements */
110
- address,
111
- area,
112
- article,
113
- aside,
114
- audio,
115
- blockquote,
116
- datalist,
117
- details,
118
- dl,
119
- fieldset,
120
- figure,
121
- form,
122
- input,
123
- iframe,
124
- img,
125
- meter,
126
- nav,
127
- ol,
128
- optgroup,
129
- option,
130
- output,
131
- p,
132
- pre,
133
- progress,
134
- ruby,
135
- section,
136
- table,
137
- textarea,
138
- ul,
139
- video {
140
- margin-bottom: 1rem;
141
- }
142
-
143
- /* 5. Font Family */
144
- html {
145
- font-family: var(--dc-font-sans);
146
- }
147
-
148
- code,
149
- pre,
150
- kbd,
151
- samp {
152
- font-family: var(--dc-font-mono);
153
- }
154
-
155
- /* 6. Body and Selection Styling */
156
- body {
157
- margin: 0 auto;
158
- max-width: 48rem;
159
- padding: 2rem;
160
- background: var(--dc-bg-1);
161
- color: var(--dc-tx-2);
162
- }
163
-
164
- ::selection {
165
- background: var(--dc-ac-1);
166
- color: var(--dc-ac-tx);
167
- }
168
-
169
- /* 7. Typography */
170
- h1,
171
- h2,
172
- h3,
173
- h4,
174
- h5,
175
- h6 {
176
- line-height: 1;
177
- color: var(--dc-tx-1);
178
- padding-top: 1rem;
179
- }
180
-
181
- h1,
182
- h2,
183
- h3 {
184
- padding-bottom: 0.25rem;
185
- margin-bottom: 0.5rem;
186
- border-bottom: 1px solid var(--dc-bg-3);
187
- }
188
-
189
- h4,
190
- h5,
191
- h6 {
192
- margin-bottom: 0.25rem;
193
- }
194
-
195
- a {
196
- color: var(--dc-lk-1);
197
- text-decoration: none;
198
- }
199
-
200
- a:hover {
201
- text-decoration: underline;
202
- }
203
-
204
- mark {
205
- padding: 0.125rem 0.25rem;
206
- background: var(--dc-ac-1);
207
- color: var(--dc-ac-tx);
208
- border-radius: 0.25rem;
209
- }
210
-
211
- /* 8. Blockquotes */
212
- blockquote {
213
- padding: 1.25rem;
214
- background: var(--dc-bg-2);
215
- border: 1px solid var(--dc-bg-3);
216
- border-left: 5px solid var(--dc-bg-3);
217
- border-radius: 0.25rem;
218
- }
219
-
220
- blockquote *:last-child {
221
- padding-bottom: 0;
222
- margin-bottom: 0;
223
- }
224
-
225
- /* 9. Header */
226
- header {
227
- background: var(--dc-bg-2);
228
- border-bottom: 1px solid var(--dc-bg-3);
229
- padding: 0.5rem calc(50vw - 50%);
230
- margin: -2rem calc(50% - 50vw) 2rem;
231
- }
232
-
233
- header * {
234
- padding-top: 0rem;
235
- padding-bottom: 0rem;
236
- margin-top: 0.25rem;
237
- margin-bottom: 0.25rem;
238
- }
239
-
240
- header h1,
241
- header h2,
242
- header h3 {
243
- border-bottom: 0;
244
- }
245
-
246
- header h1 {
247
- font-size: 1.6rem;
248
- }
249
-
250
- header h2 {
251
- font-size: 1.4rem;
252
- }
253
-
254
- header h3 {
255
- font-size: 1.2rem;
256
- }
257
-
258
- header h4 {
259
- font-size: 1rem;
260
- }
261
-
262
- header h5 {
263
- font-size: 0.9rem;
264
- }
265
-
266
- header p {
267
- font-size: 1rem;
268
- }
269
-
270
- header nav {
271
- font-size: 0.9rem;
272
- }
273
-
274
- header h6 {
275
- font-size: 0.8rem;
276
- }
277
-
278
- /* 10. Footer */
279
- footer {
280
- border-top: 1px solid var(--dc-bg-3);
281
- padding: 0.5rem calc(50vw - 50%);
282
- margin: 2rem calc(50% - 50vw) -2rem;
283
- }
284
-
285
- footer * {
286
- padding-top: 0rem;
287
- padding-bottom: 0rem;
288
- margin-top: 0.25rem;
289
- margin-bottom: 0.25rem;
290
- }
291
-
292
- footer h1,
293
- footer h2,
294
- footer h3 {
295
- border-bottom: 0;
296
- }
297
-
298
- /* 11. Buttons and Inputs */
299
- a button,
300
- button,
301
- input[type="submit"],
302
- input[type="reset"],
303
- input[type="button"] {
304
- display: inline-block;
305
- padding: 0.25rem 0.75rem;
306
- text-align: center;
307
- text-decoration: none;
308
- white-space: nowrap;
309
- background: var(--dc-lkb-1);
310
- color: var(--dc-lkb-tx);
311
- border: 0;
312
- border-radius: 0.25rem;
313
- box-sizing: border-box;
314
- cursor: pointer;
315
- }
316
-
317
- a button[disabled],
318
- button[disabled],
319
- input[type="submit"][disabled],
320
- input[type="reset"][disabled],
321
- input[type="button"][disabled] {
322
- cursor: not-allowed;
323
- opacity: 0.5;
324
- }
325
-
326
- .button:focus,
327
- .button:enabled:hover,
328
- button:focus,
329
- button:enabled:hover,
330
- input[type="submit"]:focus,
331
- input[type="submit"]:enabled:hover,
332
- input[type="reset"]:focus,
333
- input[type="reset"]:enabled:hover,
334
- input[type="button"]:focus,
335
- input[type="button"]:enabled:hover {
336
- background: var(--dc-lkb-2);
337
- }
338
-
339
- textarea,
340
- select,
341
- input {
342
- padding: 0.25rem 0.5rem;
343
- margin-bottom: 0.5rem;
344
- background: var(--dc-bg-2);
345
- color: var(--dc-tx-2);
346
- border: 1px solid var(--dc-bg-3);
347
- border-radius: 0.25rem;
348
- box-shadow: none;
349
- box-sizing: border-box;
350
- }
351
-
352
- textarea {
353
- max-width: 100%;
354
- }
355
-
356
- /* 12. Code and Keyboards */
357
- code,
358
- samp,
359
- kbd,
360
- pre {
361
- background: var(--dc-bg-2);
362
- border: 1px solid var(--dc-bg-3);
363
- border-radius: 0.25rem;
364
- padding: 0.125rem 0.25rem;
365
- font-size: 0.9rem;
366
- }
367
-
368
- kbd {
369
- border-bottom: 3px solid var(--dc-bg-3);
370
- }
371
-
372
- pre {
373
- padding: 1rem 1.5rem;
374
- max-width: 100%;
375
- overflow: auto;
376
- }
377
-
378
- /* 13. Details */
379
- details {
380
- padding: 0.5rem 1rem;
381
- background: var(--dc-bg-2);
382
- border: 1px solid var(--dc-bg-3);
383
- border-radius: 0.25rem;
384
- }
385
-
386
- summary {
387
- cursor: pointer;
388
- font-weight: bold;
389
- }
390
-
391
- details[open] summary {
392
- margin-bottom: 0.5rem;
393
- }
394
-
395
- details[open] > *:first-child {
396
- margin-top: 0;
397
- padding-top: 0;
398
- }
399
-
400
- details[open] > *:last-child {
401
- margin-bottom: 0;
402
- padding-bottom: 0;
403
- }
404
-
405
- /* 14. Description Lists */
406
- dt {
407
- font-weight: bold;
408
- }
409
-
410
- dd::before {
411
- content: "→ ";
412
- }
413
-
414
- /* 15. Horizontal Rules */
415
- hr {
416
- border: 0;
417
- border-bottom: 1px solid var(--dc-bg-3);
418
- margin: 1rem auto;
419
- }
420
-
421
- /* 16. Fieldsets */
422
- fieldset {
423
- margin-top: 1rem;
424
- padding: 2rem;
425
- border: 1px solid var(--dc-bg-3);
426
- border-radius: 0.25rem;
427
- }
428
-
429
- legend {
430
- padding: auto 0.5rem;
431
- }
432
-
433
- /* 17. Tables */
434
- table {
435
- border-collapse: collapse;
436
- width: 100%;
437
- }
438
-
439
- td,
440
- th {
441
- border: 1px solid var(--dc-bg-3);
442
- text-align: left;
443
- padding: 0.5rem;
444
- }
445
-
446
- th {
447
- background: var(--dc-bg-2);
448
- }
449
-
450
- tr:nth-child(even) {
451
- background: var(--dc-bg-2);
452
- }
453
-
454
- table caption {
455
- font-weight: bold;
456
- margin-bottom: 0.5rem;
457
- }
458
-
459
- /* 18. Lists */
460
- ol,
461
- ul {
462
- padding-left: 2rem;
463
- }
464
-
465
- li {
466
- margin-top: 0.4rem;
467
- }
468
-
469
- ul ul,
470
- ol ul,
471
- ul ol,
472
- ol ol {
473
- margin-bottom: 0;
474
- }
1
+ /* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+
3
+ /* Table of Contents
4
+ 1. Configuration
5
+ 2. Dark Mode Handling
6
+ 3. CSS Reset
7
+ 4. Margins for Most Elements
8
+ 5. Font Family
9
+ 6. Body and Selection Styling
10
+ 7. Typography
11
+ 8. Blockquotes
12
+ 9. Header
13
+ 10. Footer
14
+ 11. Buttons and Inputs
15
+ 12. Code and Keyboards
16
+ 13. Details
17
+ 14. Description Lists
18
+ 15. Horizontal Rules
19
+ 16. Fieldsets
20
+ 17. Tables
21
+ 18. Lists
22
+ */
23
+
24
+ /* 1. Configuration */
25
+ :root {
26
+ /* Font families */
27
+ --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
28
+ "Segoe UI", sans-serif;
29
+ --dc-font-mono: "Geist Mono", monospace;
30
+
31
+ /* Light colors */
32
+ --dc-tx-1: #000000;
33
+ --dc-tx-2: #1a1a1a;
34
+ --dc-bg-1: #fafafa;
35
+ --dc-bg-2: #fff;
36
+ --dc-bg-3: #ebebeb;
37
+ --dc-lk-1: #0068d6;
38
+ --dc-lkb-1: #0072f5;
39
+ --dc-lkb-2: #0062d1;
40
+ --dc-lkb-tx: #ededed;
41
+ --dc-ac-1: #8e4ec6;
42
+ --dc-ac-tx: #ededed;
43
+
44
+ /* Dark colors */
45
+ --dc-d-tx-1: #ededed;
46
+ --dc-d-tx-2: #a1a1a1;
47
+ --dc-d-bg-1: #000;
48
+ --dc-d-bg-2: #0a0a0a;
49
+ --dc-d-bg-3: #2e2e2e;
50
+ --dc-d-lk-1: #52a8ff;
51
+ --dc-d-lkb-1: #0072f5;
52
+ --dc-d-lkb-2: #0062d1;
53
+ --dc-d-lkb-tx: #ededed;
54
+ --dc-d-ac-1: #8e4ec6;
55
+ --dc-d-ac-tx: #ededed;
56
+ }
57
+
58
+ /* 2. Dark Mode Handling */
59
+ @media (prefers-color-scheme: dark) {
60
+ :root {
61
+ --dc-tx-1: var(--dc-d-tx-1);
62
+ --dc-tx-2: var(--dc-d-tx-2);
63
+ --dc-bg-1: var(--dc-d-bg-1);
64
+ --dc-bg-2: var(--dc-d-bg-2);
65
+ --dc-bg-3: var(--dc-d-bg-3);
66
+ --dc-lk-1: var(--dc-d-lk-1);
67
+ --dc-lkb-1: var(--dc-d-lkb-1);
68
+ --dc-lkb-2: var(--dc-d-lkb-2);
69
+ --dc-lkb-tx: var(--dc-d-lkb-tx);
70
+ --dc-ac-1: var(--dc-d-ac-1);
71
+ --dc-ac-tx: var(--dc-d-ac-tx);
72
+ }
73
+ }
74
+
75
+ /* 3. CSS Reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
76
+ *,
77
+ *::before,
78
+ *::after {
79
+ box-sizing: border-box;
80
+ margin: 0;
81
+ word-break: break-word;
82
+ }
83
+
84
+ body {
85
+ line-height: 1.5;
86
+ }
87
+
88
+ img,
89
+ picture,
90
+ video,
91
+ canvas,
92
+ svg {
93
+ display: block;
94
+ max-width: 100%;
95
+ }
96
+
97
+ input,
98
+ button,
99
+ textarea,
100
+ select {
101
+ font: inherit;
102
+ }
103
+
104
+ #root,
105
+ #__next {
106
+ isolation: isolate;
107
+ }
108
+
109
+ /* 4. Margins for Most Elements */
110
+ address,
111
+ area,
112
+ article,
113
+ aside,
114
+ audio,
115
+ blockquote,
116
+ datalist,
117
+ details,
118
+ dl,
119
+ fieldset,
120
+ figure,
121
+ form,
122
+ input,
123
+ iframe,
124
+ img,
125
+ meter,
126
+ nav,
127
+ ol,
128
+ optgroup,
129
+ option,
130
+ output,
131
+ p,
132
+ pre,
133
+ progress,
134
+ ruby,
135
+ section,
136
+ table,
137
+ textarea,
138
+ ul,
139
+ video {
140
+ margin-bottom: 1rem;
141
+ }
142
+
143
+ /* 5. Font Family */
144
+ html {
145
+ font-family: var(--dc-font-sans);
146
+ }
147
+
148
+ code,
149
+ pre,
150
+ kbd,
151
+ samp {
152
+ font-family: var(--dc-font-mono);
153
+ }
154
+
155
+ /* 6. Body and Selection Styling */
156
+ body {
157
+ margin: 0 auto;
158
+ max-width: 48rem;
159
+ padding: 2rem;
160
+ background: var(--dc-bg-1);
161
+ color: var(--dc-tx-2);
162
+ }
163
+
164
+ ::selection {
165
+ background: var(--dc-ac-1);
166
+ color: var(--dc-ac-tx);
167
+ }
168
+
169
+ /* 7. Typography */
170
+ h1,
171
+ h2,
172
+ h3,
173
+ h4,
174
+ h5,
175
+ h6 {
176
+ line-height: 1;
177
+ color: var(--dc-tx-1);
178
+ padding-top: 1rem;
179
+ }
180
+
181
+ h1,
182
+ h2,
183
+ h3 {
184
+ padding-bottom: 0.25rem;
185
+ margin-bottom: 0.5rem;
186
+ border-bottom: 1px solid var(--dc-bg-3);
187
+ }
188
+
189
+ h4,
190
+ h5,
191
+ h6 {
192
+ margin-bottom: 0.25rem;
193
+ }
194
+
195
+ a {
196
+ color: var(--dc-lk-1);
197
+ text-decoration: none;
198
+ }
199
+
200
+ a:hover {
201
+ text-decoration: underline;
202
+ }
203
+
204
+ mark {
205
+ padding: 0.125rem 0.25rem;
206
+ background: var(--dc-ac-1);
207
+ color: var(--dc-ac-tx);
208
+ border-radius: 0.25rem;
209
+ }
210
+
211
+ /* 8. Blockquotes */
212
+ blockquote {
213
+ padding: 1.25rem;
214
+ background: var(--dc-bg-2);
215
+ border: 1px solid var(--dc-bg-3);
216
+ border-left: 5px solid var(--dc-bg-3);
217
+ border-radius: 0.25rem;
218
+ }
219
+
220
+ blockquote *:last-child {
221
+ padding-bottom: 0;
222
+ margin-bottom: 0;
223
+ }
224
+
225
+ /* 9. Header */
226
+ header {
227
+ background: var(--dc-bg-2);
228
+ border-bottom: 1px solid var(--dc-bg-3);
229
+ padding: 0.5rem calc(50vw - 50%);
230
+ margin: -2rem calc(50% - 50vw) 2rem;
231
+ }
232
+
233
+ header * {
234
+ padding-top: 0rem;
235
+ padding-bottom: 0rem;
236
+ margin-top: 0.25rem;
237
+ margin-bottom: 0.25rem;
238
+ }
239
+
240
+ header h1,
241
+ header h2,
242
+ header h3 {
243
+ border-bottom: 0;
244
+ }
245
+
246
+ header h1 {
247
+ font-size: 1.6rem;
248
+ }
249
+
250
+ header h2 {
251
+ font-size: 1.4rem;
252
+ }
253
+
254
+ header h3 {
255
+ font-size: 1.2rem;
256
+ }
257
+
258
+ header h4 {
259
+ font-size: 1rem;
260
+ }
261
+
262
+ header h5 {
263
+ font-size: 0.9rem;
264
+ }
265
+
266
+ header p {
267
+ font-size: 1rem;
268
+ }
269
+
270
+ header nav {
271
+ font-size: 0.9rem;
272
+ }
273
+
274
+ header h6 {
275
+ font-size: 0.8rem;
276
+ }
277
+
278
+ header nav ul {
279
+ padding: 0;
280
+ }
281
+
282
+ header nav ul li {
283
+ display: inline-block;
284
+ margin: 0;
285
+ }
286
+
287
+ header nav ul li:not(:first-child)::before {
288
+ content: "• ";
289
+ }
290
+
291
+ /* 10. Footer */
292
+ footer {
293
+ border-top: 1px solid var(--dc-bg-3);
294
+ padding: 0.5rem calc(50vw - 50%);
295
+ margin: 2rem calc(50% - 50vw) -2rem;
296
+ }
297
+
298
+ footer * {
299
+ padding-top: 0rem;
300
+ padding-bottom: 0rem;
301
+ margin-top: 0.25rem;
302
+ margin-bottom: 0.25rem;
303
+ }
304
+
305
+ footer h1,
306
+ footer h2,
307
+ footer h3 {
308
+ border-bottom: 0;
309
+ }
310
+
311
+ /* 11. Buttons and Inputs */
312
+ a button,
313
+ button,
314
+ input[type="submit"],
315
+ input[type="reset"],
316
+ input[type="button"] {
317
+ display: inline-block;
318
+ padding: 0.25rem 0.75rem;
319
+ text-align: center;
320
+ text-decoration: none;
321
+ white-space: nowrap;
322
+ background: var(--dc-lkb-1);
323
+ color: var(--dc-lkb-tx);
324
+ border: 0;
325
+ border-radius: 0.25rem;
326
+ box-sizing: border-box;
327
+ cursor: pointer;
328
+ }
329
+
330
+ a button[disabled],
331
+ button[disabled],
332
+ input[type="submit"][disabled],
333
+ input[type="reset"][disabled],
334
+ input[type="button"][disabled] {
335
+ cursor: not-allowed;
336
+ opacity: 0.5;
337
+ }
338
+
339
+ .button:focus,
340
+ .button:enabled:hover,
341
+ button:focus,
342
+ button:enabled:hover,
343
+ input[type="submit"]:focus,
344
+ input[type="submit"]:enabled:hover,
345
+ input[type="reset"]:focus,
346
+ input[type="reset"]:enabled:hover,
347
+ input[type="button"]:focus,
348
+ input[type="button"]:enabled:hover {
349
+ background: var(--dc-lkb-2);
350
+ }
351
+
352
+ textarea,
353
+ select,
354
+ input {
355
+ padding: 0.25rem 0.5rem;
356
+ margin-bottom: 0.5rem;
357
+ background: var(--dc-bg-2);
358
+ color: var(--dc-tx-2);
359
+ border: 1px solid var(--dc-bg-3);
360
+ border-radius: 0.25rem;
361
+ box-shadow: none;
362
+ box-sizing: border-box;
363
+ }
364
+
365
+ textarea {
366
+ max-width: 100%;
367
+ }
368
+
369
+ /* 12. Code and Keyboards */
370
+ code,
371
+ samp,
372
+ kbd,
373
+ pre {
374
+ background: var(--dc-bg-2);
375
+ border: 1px solid var(--dc-bg-3);
376
+ border-radius: 0.25rem;
377
+ padding: 0.125rem 0.25rem;
378
+ font-size: 0.9rem;
379
+ }
380
+
381
+ kbd {
382
+ border-bottom: 3px solid var(--dc-bg-3);
383
+ }
384
+
385
+ pre {
386
+ padding: 1rem 1.5rem;
387
+ max-width: 100%;
388
+ overflow: auto;
389
+ }
390
+
391
+ /* 13. Details */
392
+ details {
393
+ padding: 0.5rem 1rem;
394
+ background: var(--dc-bg-2);
395
+ border: 1px solid var(--dc-bg-3);
396
+ border-radius: 0.25rem;
397
+ }
398
+
399
+ summary {
400
+ cursor: pointer;
401
+ font-weight: bold;
402
+ }
403
+
404
+ details[open] summary {
405
+ margin-bottom: 0.5rem;
406
+ }
407
+
408
+ details[open] > *:first-child {
409
+ margin-top: 0;
410
+ padding-top: 0;
411
+ }
412
+
413
+ details[open] > *:last-child {
414
+ margin-bottom: 0;
415
+ padding-bottom: 0;
416
+ }
417
+
418
+ /* 14. Description Lists */
419
+ dt {
420
+ font-weight: bold;
421
+ }
422
+
423
+ dd::before {
424
+ content: "→ ";
425
+ }
426
+
427
+ /* 15. Horizontal Rules */
428
+ hr {
429
+ border: 0;
430
+ border-bottom: 1px solid var(--dc-bg-3);
431
+ margin: 1rem auto;
432
+ }
433
+
434
+ /* 16. Fieldsets */
435
+ fieldset {
436
+ margin-top: 1rem;
437
+ padding: 2rem;
438
+ border: 1px solid var(--dc-bg-3);
439
+ border-radius: 0.25rem;
440
+ }
441
+
442
+ legend {
443
+ padding: auto 0.5rem;
444
+ }
445
+
446
+ /* 17. Tables */
447
+ table {
448
+ border-collapse: collapse;
449
+ width: 100%;
450
+ }
451
+
452
+ td,
453
+ th {
454
+ border: 1px solid var(--dc-bg-3);
455
+ text-align: left;
456
+ padding: 0.5rem;
457
+ }
458
+
459
+ th {
460
+ background: var(--dc-bg-2);
461
+ }
462
+
463
+ tr:nth-child(even) {
464
+ background: var(--dc-bg-2);
465
+ }
466
+
467
+ table caption {
468
+ font-weight: bold;
469
+ margin-bottom: 0.5rem;
470
+ }
471
+
472
+ /* 18. Lists */
473
+ ol,
474
+ ul {
475
+ padding-left: 2rem;
476
+ }
477
+
478
+ li {
479
+ margin-top: 0.4rem;
480
+ }
481
+
482
+ ul ul,
483
+ ol ul,
484
+ ul ol,
485
+ ol ol {
486
+ margin-bottom: 0;
487
+ }