@intergrav/dev.css 3.4.0 → 3.5.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.
- package/README.md +20 -2
- package/addon/header-oneline.css +50 -0
- package/addon/header-sidebar.css +98 -35
- package/addon/scroll-to-top.js +24 -0
- package/dev.css +539 -510
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -65,7 +65,7 @@ To learn about other HTML elements and how to write HTML, visit [W3Schools/html]
|
|
|
65
65
|
|
|
66
66
|
## Addons
|
|
67
67
|
|
|
68
|
-
dev.css provides a basic set of styles. Addons are small CSS snippets that can be used to adjust or add functionality to dev.css based on your needs.
|
|
68
|
+
dev.css provides a basic set of styles. Addons are small CSS or JS snippets that can be used to adjust or add functionality to dev.css based on your needs. Here are the built-in addons.
|
|
69
69
|
|
|
70
70
|
### `header-sticky.css`
|
|
71
71
|
|
|
@@ -75,14 +75,32 @@ This addon makes the header sticky, always staying at the top of the screen. Not
|
|
|
75
75
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css">
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
+
### `header-oneline.css`
|
|
79
|
+
|
|
80
|
+
This addon lays everything out in the header horizontally. This is ideal if you don't have much in your header and you want it to be more compact. It works great with `header-sticky.css`. I do not recommend adding `<p>` or more than one `<nav>` element in the header if you're using this. To use this addon, add the following line after the `dev.css` import:
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-oneline.min.css">
|
|
84
|
+
```
|
|
85
|
+
|
|
78
86
|
### `header-sidebar.css`
|
|
79
87
|
|
|
80
|
-
This addon turns the header into a sidebar on wide displays. The navigation items are listed vertically in this mode. The sidebar will responsively switch back to the default state if the viewport is too narrow to contain everything. If you are using this addon with `header-sticky.css`, make sure to
|
|
88
|
+
This addon turns the header into a sidebar on wide displays. The navigation items are listed vertically in this mode. The sidebar will responsively switch back to the default state if the viewport is too narrow to contain everything. If you are using this addon with `header-sticky.css` or `header-oneline.css`, make sure to import it **after** those. To use this addon, add the following line after the `dev.css` import:
|
|
81
89
|
|
|
82
90
|
```html
|
|
83
91
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
|
|
84
92
|
```
|
|
85
93
|
|
|
94
|
+
### `scroll-to-top.js`
|
|
95
|
+
|
|
96
|
+
This addon creates a small "scroll to top" button in the bottom right corner of your website when the user scrolls down. The button uses the default dev.css button style. The button is slightly opaque so that you can see it but it doesn't block the view. To use this addon, add the following line after the `dev.css` import:
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<script src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/scroll-to-top.min.js" defer></script>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
```
|
|
103
|
+
|
|
86
104
|
## Themes
|
|
87
105
|
|
|
88
106
|
dev.css supports custom colors and fonts through themes. You can find some pre-made themes in the `/theme` folder. To use a theme, simply apply it after the dev.css stylesheet. There are themes inspired by terminals, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, add the following line after the `dev.css` import:
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: everything in the header on one line, works well with addon/header-sticky.css */
|
|
3
|
+
/* warn: if using with the header-sidebar addon, be sure to include this before it */
|
|
4
|
+
/* warn: i do not recommend using this if you have p or multiple nav elements in header */
|
|
5
|
+
|
|
6
|
+
header {
|
|
7
|
+
align-items: center;
|
|
8
|
+
display: flex;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
header h1,
|
|
12
|
+
header h2,
|
|
13
|
+
header h3,
|
|
14
|
+
header h4,
|
|
15
|
+
header h5,
|
|
16
|
+
header h6 {
|
|
17
|
+
white-space: nowrap;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
header * {
|
|
21
|
+
margin: 0;
|
|
22
|
+
line-height: 1.5;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
header h1,
|
|
26
|
+
header p {
|
|
27
|
+
margin-right: 1rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
header h2,
|
|
31
|
+
header h3,
|
|
32
|
+
header h4,
|
|
33
|
+
header h5,
|
|
34
|
+
header h6 {
|
|
35
|
+
color: var(--dc-tx-2);
|
|
36
|
+
font-weight: normal;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
header h2::after,
|
|
40
|
+
header h3::after,
|
|
41
|
+
header h4::after,
|
|
42
|
+
header h5::after,
|
|
43
|
+
header h6::after {
|
|
44
|
+
content: "/";
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* make sure that all header elements have same font size */
|
|
48
|
+
header * {
|
|
49
|
+
font-size: 1rem !important;
|
|
50
|
+
}
|
package/addon/header-sidebar.css
CHANGED
|
@@ -1,35 +1,98 @@
|
|
|
1
|
-
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
-
/* about: turns the header into a sidebar if the viewport is wide enough */
|
|
3
|
-
/* warn: if using with the header-sticky addon, be sure to include this after it */
|
|
4
|
-
|
|
5
|
-
@media (min-width:
|
|
6
|
-
header {
|
|
7
|
-
all: unset;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
header {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
1
|
+
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: turns the header into a sidebar if the viewport is wide enough */
|
|
3
|
+
/* warn: if using with the header-sticky or header-oneline addon, be sure to include this after it */
|
|
4
|
+
|
|
5
|
+
@media (min-width: 84rem) {
|
|
6
|
+
header {
|
|
7
|
+
all: unset;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
header * {
|
|
11
|
+
margin-top: 0;
|
|
12
|
+
margin-bottom: 0.25rem;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
header {
|
|
16
|
+
padding: 3rem 2rem;
|
|
17
|
+
padding-right: 0;
|
|
18
|
+
position: fixed;
|
|
19
|
+
top: 0;
|
|
20
|
+
left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
|
|
21
|
+
width: 16rem;
|
|
22
|
+
height: calc(100% - 6rem);
|
|
23
|
+
overflow-y: auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
header nav ul {
|
|
27
|
+
padding-left: 1rem;
|
|
28
|
+
border-top: 1px solid var(--dc-bg-3);
|
|
29
|
+
padding-top: 1rem;
|
|
30
|
+
margin-top: 0.75rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
header nav ul li {
|
|
34
|
+
display: list-item;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
header nav ul li:not(:first-child)::before {
|
|
38
|
+
content: unset;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* hacky: reset font sizes to defaults */
|
|
42
|
+
h1 {
|
|
43
|
+
font-size: 2rem !important;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
h2 {
|
|
47
|
+
font-size: 1.5rem !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
h3 {
|
|
51
|
+
font-size: 1.17rem !important;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
h4,
|
|
55
|
+
p,
|
|
56
|
+
a {
|
|
57
|
+
font-size: 1rem !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
h5 {
|
|
61
|
+
font-size: 0.83rem !important;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
h6 {
|
|
65
|
+
font-size: 0.67rem !important;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
header nav {
|
|
69
|
+
font-size: 1rem !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* hacky: reset some other stuff to default incase you are using header-oneline.css */
|
|
73
|
+
header h2 header h3,
|
|
74
|
+
header h4,
|
|
75
|
+
header h5,
|
|
76
|
+
header h6 {
|
|
77
|
+
color: var(--dc-tx-1);
|
|
78
|
+
font-weight: bold;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
header h1,
|
|
82
|
+
header h2,
|
|
83
|
+
header h3,
|
|
84
|
+
header h4,
|
|
85
|
+
header h5,
|
|
86
|
+
header h6 {
|
|
87
|
+
white-space: normal;
|
|
88
|
+
line-height: 1;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
header h2::after,
|
|
92
|
+
header h3::after,
|
|
93
|
+
header h4::after,
|
|
94
|
+
header h5::after,
|
|
95
|
+
header h6::after {
|
|
96
|
+
content: unset;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: shows a "scroll to top" button in the bottom right corner of the screen when scrolling */
|
|
3
|
+
|
|
4
|
+
const scrollToTopButton = document.createElement("button");
|
|
5
|
+
scrollToTopButton.textContent = "▲";
|
|
6
|
+
Object.assign(scrollToTopButton.style, {
|
|
7
|
+
transition: "0.25s",
|
|
8
|
+
opacity: "0",
|
|
9
|
+
padding: "0",
|
|
10
|
+
position: "fixed",
|
|
11
|
+
bottom: "1rem",
|
|
12
|
+
right: "1rem",
|
|
13
|
+
width: "2.5rem",
|
|
14
|
+
height: "2.5rem",
|
|
15
|
+
});
|
|
16
|
+
document.body.appendChild(scrollToTopButton);
|
|
17
|
+
|
|
18
|
+
window.addEventListener("scroll", () => {
|
|
19
|
+
scrollToTopButton.style.opacity = window.scrollY > 0 ? "0.5" : "0";
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
scrollToTopButton.addEventListener("click", () => {
|
|
23
|
+
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
24
|
+
});
|
package/dev.css
CHANGED
|
@@ -1,510 +1,539 @@
|
|
|
1
|
-
/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
-
/* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
|
|
3
|
-
|
|
4
|
-
/* table of contents
|
|
5
|
-
1. default configuration
|
|
6
|
-
2. dark mode handling
|
|
7
|
-
3. root color scheme
|
|
8
|
-
4. css reset
|
|
9
|
-
5. margins for most elements
|
|
10
|
-
6. font family
|
|
11
|
-
7. body and selection styling
|
|
12
|
-
8. typography
|
|
13
|
-
9. blockquotes
|
|
14
|
-
10. header
|
|
15
|
-
11. footer
|
|
16
|
-
12. buttons and inputs
|
|
17
|
-
13. code and keyboards
|
|
18
|
-
14. details
|
|
19
|
-
15. description lists
|
|
20
|
-
16. horizontal rules
|
|
21
|
-
17. fieldsets
|
|
22
|
-
18. tables
|
|
23
|
-
19. lists
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
/* 1. default configuration */
|
|
27
|
-
:root {
|
|
28
|
-
/* font families */
|
|
29
|
-
--dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
|
|
30
|
-
"Segoe UI", sans-serif;
|
|
31
|
-
--dc-font-mono: "Geist Mono", monospace;
|
|
32
|
-
|
|
33
|
-
/* light colors */
|
|
34
|
-
--dc-cs: light;
|
|
35
|
-
--dc-tx-1: #000000;
|
|
36
|
-
--dc-tx-2: #1a1a1a;
|
|
37
|
-
--dc-bg-1: #fafafa;
|
|
38
|
-
--dc-bg-2: #fff;
|
|
39
|
-
--dc-bg-3: #ebebeb;
|
|
40
|
-
--dc-lk-1: #0068d6;
|
|
41
|
-
--dc-lkb-1: #0072f5;
|
|
42
|
-
--dc-lkb-2: #0062d1;
|
|
43
|
-
--dc-lkb-tx: #ededed;
|
|
44
|
-
--dc-ac-1: #8e4ec6;
|
|
45
|
-
--dc-ac-tx: #ededed;
|
|
46
|
-
|
|
47
|
-
/* dark colors */
|
|
48
|
-
--dc-d-cs: dark;
|
|
49
|
-
--dc-d-tx-1: #ededed;
|
|
50
|
-
--dc-d-tx-2: #a1a1a1;
|
|
51
|
-
--dc-d-bg-1: #000;
|
|
52
|
-
--dc-d-bg-2: #0a0a0a;
|
|
53
|
-
--dc-d-bg-3: #2e2e2e;
|
|
54
|
-
--dc-d-lk-1: #52a8ff;
|
|
55
|
-
--dc-d-lkb-1: #0072f5;
|
|
56
|
-
--dc-d-lkb-2: #0062d1;
|
|
57
|
-
--dc-d-lkb-tx: #ededed;
|
|
58
|
-
--dc-d-ac-1: #8e4ec6;
|
|
59
|
-
--dc-d-ac-tx: #ededed;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/* 2. dark mode handling */
|
|
63
|
-
@media (prefers-color-scheme: dark) {
|
|
64
|
-
:root {
|
|
65
|
-
--dc-cs: var(--dc-d-cs);
|
|
66
|
-
--dc-tx-1: var(--dc-d-tx-1);
|
|
67
|
-
--dc-tx-2: var(--dc-d-tx-2);
|
|
68
|
-
--dc-bg-1: var(--dc-d-bg-1);
|
|
69
|
-
--dc-bg-2: var(--dc-d-bg-2);
|
|
70
|
-
--dc-bg-3: var(--dc-d-bg-3);
|
|
71
|
-
--dc-lk-1: var(--dc-d-lk-1);
|
|
72
|
-
--dc-lkb-1: var(--dc-d-lkb-1);
|
|
73
|
-
--dc-lkb-2: var(--dc-d-lkb-2);
|
|
74
|
-
--dc-lkb-tx: var(--dc-d-lkb-tx);
|
|
75
|
-
--dc-ac-1: var(--dc-d-ac-1);
|
|
76
|
-
--dc-ac-tx: var(--dc-d-ac-tx);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
/* 3. root color scheme */
|
|
81
|
-
:root {
|
|
82
|
-
color-scheme: only var(--dc-cs);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/* 4. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
|
|
86
|
-
*,
|
|
87
|
-
*::before,
|
|
88
|
-
*::after {
|
|
89
|
-
box-sizing: border-box;
|
|
90
|
-
margin: 0;
|
|
91
|
-
word-break: break-word;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
body {
|
|
95
|
-
line-height: 1.5;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
img,
|
|
99
|
-
picture,
|
|
100
|
-
video,
|
|
101
|
-
canvas,
|
|
102
|
-
svg {
|
|
103
|
-
display: block;
|
|
104
|
-
max-width: 100%;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
input,
|
|
108
|
-
button,
|
|
109
|
-
textarea,
|
|
110
|
-
select {
|
|
111
|
-
font: inherit;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
#root,
|
|
115
|
-
#__next {
|
|
116
|
-
isolation: isolate;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/* 5. margins for most elements */
|
|
120
|
-
address,
|
|
121
|
-
area,
|
|
122
|
-
article,
|
|
123
|
-
aside,
|
|
124
|
-
audio,
|
|
125
|
-
blockquote,
|
|
126
|
-
datalist,
|
|
127
|
-
details,
|
|
128
|
-
dl,
|
|
129
|
-
fieldset,
|
|
130
|
-
figure,
|
|
131
|
-
form,
|
|
132
|
-
input,
|
|
133
|
-
iframe,
|
|
134
|
-
img,
|
|
135
|
-
meter,
|
|
136
|
-
nav,
|
|
137
|
-
ol,
|
|
138
|
-
optgroup,
|
|
139
|
-
option,
|
|
140
|
-
output,
|
|
141
|
-
p,
|
|
142
|
-
pre,
|
|
143
|
-
progress,
|
|
144
|
-
ruby,
|
|
145
|
-
section,
|
|
146
|
-
table,
|
|
147
|
-
textarea,
|
|
148
|
-
ul,
|
|
149
|
-
video {
|
|
150
|
-
margin-bottom: 1rem;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
/* 6. font family */
|
|
154
|
-
html {
|
|
155
|
-
font-family: var(--dc-font-sans);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
code,
|
|
159
|
-
pre,
|
|
160
|
-
kbd,
|
|
161
|
-
samp {
|
|
162
|
-
font-family: var(--dc-font-mono);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
/* 7. body and selection styling */
|
|
166
|
-
body {
|
|
167
|
-
margin: 0 auto;
|
|
168
|
-
max-width: 48rem;
|
|
169
|
-
padding: 2rem;
|
|
170
|
-
background: var(--dc-bg-1);
|
|
171
|
-
color: var(--dc-tx-2);
|
|
172
|
-
overflow-wrap: break-word;
|
|
173
|
-
overflow-x: hidden;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
::selection {
|
|
177
|
-
background: var(--dc-ac-1);
|
|
178
|
-
color: var(--dc-ac-tx);
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
/* 8. typography */
|
|
182
|
-
h1
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
a {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
padding:
|
|
226
|
-
|
|
227
|
-
border: 1px solid var(--dc-bg-3);
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
padding
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
header
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
header
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
header
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
header
|
|
300
|
-
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
.
|
|
353
|
-
button
|
|
354
|
-
button
|
|
355
|
-
input[type="submit"]
|
|
356
|
-
input[type="
|
|
357
|
-
input[type="
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
border
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
font-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
padding
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
1
|
+
/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
|
|
3
|
+
|
|
4
|
+
/* table of contents
|
|
5
|
+
1. default configuration
|
|
6
|
+
2. dark mode handling
|
|
7
|
+
3. root color scheme
|
|
8
|
+
4. css reset
|
|
9
|
+
5. margins for most elements
|
|
10
|
+
6. font family
|
|
11
|
+
7. body and selection styling
|
|
12
|
+
8. typography
|
|
13
|
+
9. blockquotes
|
|
14
|
+
10. header
|
|
15
|
+
11. footer
|
|
16
|
+
12. buttons and inputs
|
|
17
|
+
13. code and keyboards
|
|
18
|
+
14. details
|
|
19
|
+
15. description lists
|
|
20
|
+
16. horizontal rules
|
|
21
|
+
17. fieldsets
|
|
22
|
+
18. tables
|
|
23
|
+
19. lists
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
/* 1. default configuration */
|
|
27
|
+
:root {
|
|
28
|
+
/* font families */
|
|
29
|
+
--dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
|
|
30
|
+
"Segoe UI", sans-serif;
|
|
31
|
+
--dc-font-mono: "Geist Mono", monospace;
|
|
32
|
+
|
|
33
|
+
/* light colors */
|
|
34
|
+
--dc-cs: light;
|
|
35
|
+
--dc-tx-1: #000000;
|
|
36
|
+
--dc-tx-2: #1a1a1a;
|
|
37
|
+
--dc-bg-1: #fafafa;
|
|
38
|
+
--dc-bg-2: #fff;
|
|
39
|
+
--dc-bg-3: #ebebeb;
|
|
40
|
+
--dc-lk-1: #0068d6;
|
|
41
|
+
--dc-lkb-1: #0072f5;
|
|
42
|
+
--dc-lkb-2: #0062d1;
|
|
43
|
+
--dc-lkb-tx: #ededed;
|
|
44
|
+
--dc-ac-1: #8e4ec6;
|
|
45
|
+
--dc-ac-tx: #ededed;
|
|
46
|
+
|
|
47
|
+
/* dark colors */
|
|
48
|
+
--dc-d-cs: dark;
|
|
49
|
+
--dc-d-tx-1: #ededed;
|
|
50
|
+
--dc-d-tx-2: #a1a1a1;
|
|
51
|
+
--dc-d-bg-1: #000;
|
|
52
|
+
--dc-d-bg-2: #0a0a0a;
|
|
53
|
+
--dc-d-bg-3: #2e2e2e;
|
|
54
|
+
--dc-d-lk-1: #52a8ff;
|
|
55
|
+
--dc-d-lkb-1: #0072f5;
|
|
56
|
+
--dc-d-lkb-2: #0062d1;
|
|
57
|
+
--dc-d-lkb-tx: #ededed;
|
|
58
|
+
--dc-d-ac-1: #8e4ec6;
|
|
59
|
+
--dc-d-ac-tx: #ededed;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* 2. dark mode handling */
|
|
63
|
+
@media (prefers-color-scheme: dark) {
|
|
64
|
+
:root {
|
|
65
|
+
--dc-cs: var(--dc-d-cs);
|
|
66
|
+
--dc-tx-1: var(--dc-d-tx-1);
|
|
67
|
+
--dc-tx-2: var(--dc-d-tx-2);
|
|
68
|
+
--dc-bg-1: var(--dc-d-bg-1);
|
|
69
|
+
--dc-bg-2: var(--dc-d-bg-2);
|
|
70
|
+
--dc-bg-3: var(--dc-d-bg-3);
|
|
71
|
+
--dc-lk-1: var(--dc-d-lk-1);
|
|
72
|
+
--dc-lkb-1: var(--dc-d-lkb-1);
|
|
73
|
+
--dc-lkb-2: var(--dc-d-lkb-2);
|
|
74
|
+
--dc-lkb-tx: var(--dc-d-lkb-tx);
|
|
75
|
+
--dc-ac-1: var(--dc-d-ac-1);
|
|
76
|
+
--dc-ac-tx: var(--dc-d-ac-tx);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* 3. root color scheme */
|
|
81
|
+
:root {
|
|
82
|
+
color-scheme: only var(--dc-cs);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* 4. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
|
|
86
|
+
*,
|
|
87
|
+
*::before,
|
|
88
|
+
*::after {
|
|
89
|
+
box-sizing: border-box;
|
|
90
|
+
margin: 0;
|
|
91
|
+
word-break: break-word;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
body {
|
|
95
|
+
line-height: 1.5;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
img,
|
|
99
|
+
picture,
|
|
100
|
+
video,
|
|
101
|
+
canvas,
|
|
102
|
+
svg {
|
|
103
|
+
display: block;
|
|
104
|
+
max-width: 100%;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
input,
|
|
108
|
+
button,
|
|
109
|
+
textarea,
|
|
110
|
+
select {
|
|
111
|
+
font: inherit;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
#root,
|
|
115
|
+
#__next {
|
|
116
|
+
isolation: isolate;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* 5. margins for most elements */
|
|
120
|
+
address,
|
|
121
|
+
area,
|
|
122
|
+
article,
|
|
123
|
+
aside,
|
|
124
|
+
audio,
|
|
125
|
+
blockquote,
|
|
126
|
+
datalist,
|
|
127
|
+
details,
|
|
128
|
+
dl,
|
|
129
|
+
fieldset,
|
|
130
|
+
figure,
|
|
131
|
+
form,
|
|
132
|
+
input,
|
|
133
|
+
iframe,
|
|
134
|
+
img,
|
|
135
|
+
meter,
|
|
136
|
+
nav,
|
|
137
|
+
ol,
|
|
138
|
+
optgroup,
|
|
139
|
+
option,
|
|
140
|
+
output,
|
|
141
|
+
p,
|
|
142
|
+
pre,
|
|
143
|
+
progress,
|
|
144
|
+
ruby,
|
|
145
|
+
section,
|
|
146
|
+
table,
|
|
147
|
+
textarea,
|
|
148
|
+
ul,
|
|
149
|
+
video {
|
|
150
|
+
margin-bottom: 1rem;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* 6. font family */
|
|
154
|
+
html {
|
|
155
|
+
font-family: var(--dc-font-sans);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
code,
|
|
159
|
+
pre,
|
|
160
|
+
kbd,
|
|
161
|
+
samp {
|
|
162
|
+
font-family: var(--dc-font-mono);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* 7. body and selection styling */
|
|
166
|
+
body {
|
|
167
|
+
margin: 0 auto;
|
|
168
|
+
max-width: 48rem;
|
|
169
|
+
padding: 2rem;
|
|
170
|
+
background: var(--dc-bg-1);
|
|
171
|
+
color: var(--dc-tx-2);
|
|
172
|
+
overflow-wrap: break-word;
|
|
173
|
+
overflow-x: hidden;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
::selection {
|
|
177
|
+
background: var(--dc-ac-1);
|
|
178
|
+
color: var(--dc-ac-tx);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* 8. typography */
|
|
182
|
+
h1 {
|
|
183
|
+
font-size: 2rem;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
h2 {
|
|
187
|
+
font-size: 1.5rem;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
h3 {
|
|
191
|
+
font-size: 1.17rem;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
h4 {
|
|
195
|
+
font-size: 1rem;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
h5 {
|
|
199
|
+
font-size: 0.83rem;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
h6 {
|
|
203
|
+
font-size: 0.67rem;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
p,
|
|
207
|
+
a {
|
|
208
|
+
font-size: 1rem;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
h1,
|
|
212
|
+
h2,
|
|
213
|
+
h3,
|
|
214
|
+
h4,
|
|
215
|
+
h5,
|
|
216
|
+
h6 {
|
|
217
|
+
line-height: 1;
|
|
218
|
+
color: var(--dc-tx-1);
|
|
219
|
+
padding-top: 1rem;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
h1,
|
|
223
|
+
h2,
|
|
224
|
+
h3 {
|
|
225
|
+
padding-bottom: 0.25rem;
|
|
226
|
+
margin-bottom: 0.5rem;
|
|
227
|
+
border-bottom: 1px solid var(--dc-bg-3);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
h4,
|
|
231
|
+
h5,
|
|
232
|
+
h6 {
|
|
233
|
+
margin-bottom: 0.25rem;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
a {
|
|
237
|
+
color: var(--dc-lk-1);
|
|
238
|
+
text-decoration: none;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
a:hover {
|
|
242
|
+
text-decoration: underline;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
mark {
|
|
246
|
+
padding: 0.125rem 0.25rem;
|
|
247
|
+
background: var(--dc-ac-1);
|
|
248
|
+
color: var(--dc-ac-tx);
|
|
249
|
+
border-radius: 0.25rem;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/* 9. blockquotes */
|
|
253
|
+
blockquote {
|
|
254
|
+
padding: 1.25rem;
|
|
255
|
+
background: var(--dc-bg-2);
|
|
256
|
+
border: 1px solid var(--dc-bg-3);
|
|
257
|
+
border-left: 5px solid var(--dc-bg-3);
|
|
258
|
+
border-radius: 0.25rem;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
blockquote *:last-child {
|
|
262
|
+
padding-bottom: 0;
|
|
263
|
+
margin-bottom: 0;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/* 10. header - make sure header addons dont break when modifying */
|
|
267
|
+
header {
|
|
268
|
+
background: var(--dc-bg-2);
|
|
269
|
+
border-bottom: 1px solid var(--dc-bg-3);
|
|
270
|
+
padding: 0.5rem calc(50vw - 50%);
|
|
271
|
+
margin: -2rem calc(50% - 50vw) 2rem;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
header * {
|
|
275
|
+
padding-top: 0rem;
|
|
276
|
+
padding-bottom: 0rem;
|
|
277
|
+
margin-top: 0.25rem;
|
|
278
|
+
margin-bottom: 0.25rem;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
header h1,
|
|
282
|
+
header h2,
|
|
283
|
+
header h3 {
|
|
284
|
+
border-bottom: 0;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
header h1 {
|
|
288
|
+
font-size: 1.6rem;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
header h2 {
|
|
292
|
+
font-size: 1.4rem;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
header h3 {
|
|
296
|
+
font-size: 1.2rem;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
header h4 {
|
|
300
|
+
font-size: 1rem;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
header h5 {
|
|
304
|
+
font-size: 0.9rem;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
header p {
|
|
308
|
+
font-size: 1rem;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
header nav {
|
|
312
|
+
font-size: 0.9rem;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
header h6 {
|
|
316
|
+
font-size: 0.8rem;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
header nav ul {
|
|
320
|
+
padding: 0;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
header nav ul li {
|
|
324
|
+
display: inline-block;
|
|
325
|
+
margin: 0;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
header nav ul li:not(:first-child)::before {
|
|
329
|
+
content: "• ";
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
/* 11. footer */
|
|
333
|
+
footer {
|
|
334
|
+
border-top: 1px solid var(--dc-bg-3);
|
|
335
|
+
padding: 0.5rem calc(50vw - 50%);
|
|
336
|
+
margin: 2rem calc(50% - 50vw) -2rem;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
footer * {
|
|
340
|
+
padding-top: 0rem;
|
|
341
|
+
padding-bottom: 0rem;
|
|
342
|
+
margin-top: 0.25rem;
|
|
343
|
+
margin-bottom: 0.25rem;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
footer h1,
|
|
347
|
+
footer h2,
|
|
348
|
+
footer h3 {
|
|
349
|
+
border-bottom: 0;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* 12. buttons and inputs */
|
|
353
|
+
a button,
|
|
354
|
+
button,
|
|
355
|
+
input[type="submit"],
|
|
356
|
+
input[type="reset"],
|
|
357
|
+
input[type="button"] {
|
|
358
|
+
display: inline-block;
|
|
359
|
+
padding: 0.25rem 0.75rem;
|
|
360
|
+
text-align: center;
|
|
361
|
+
text-decoration: none;
|
|
362
|
+
white-space: nowrap;
|
|
363
|
+
background: var(--dc-lkb-1);
|
|
364
|
+
color: var(--dc-lkb-tx);
|
|
365
|
+
border: 0;
|
|
366
|
+
border-radius: 0.25rem;
|
|
367
|
+
box-sizing: border-box;
|
|
368
|
+
cursor: pointer;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
a button[disabled],
|
|
372
|
+
button[disabled],
|
|
373
|
+
input[type="submit"][disabled],
|
|
374
|
+
input[type="reset"][disabled],
|
|
375
|
+
input[type="button"][disabled] {
|
|
376
|
+
cursor: not-allowed;
|
|
377
|
+
opacity: 0.5;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.button:focus,
|
|
381
|
+
.button:enabled:hover,
|
|
382
|
+
button:focus,
|
|
383
|
+
button:enabled:hover,
|
|
384
|
+
input[type="submit"]:focus,
|
|
385
|
+
input[type="submit"]:enabled:hover,
|
|
386
|
+
input[type="reset"]:focus,
|
|
387
|
+
input[type="reset"]:enabled:hover,
|
|
388
|
+
input[type="button"]:focus,
|
|
389
|
+
input[type="button"]:enabled:hover {
|
|
390
|
+
background: var(--dc-lkb-2);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
textarea,
|
|
394
|
+
select,
|
|
395
|
+
input {
|
|
396
|
+
padding: 0.25rem 0.5rem;
|
|
397
|
+
margin-bottom: 0.5rem;
|
|
398
|
+
background: var(--dc-bg-2);
|
|
399
|
+
color: var(--dc-tx-2);
|
|
400
|
+
border: 1px solid var(--dc-bg-3);
|
|
401
|
+
border-radius: 0.25rem;
|
|
402
|
+
box-shadow: none;
|
|
403
|
+
box-sizing: border-box;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
textarea {
|
|
407
|
+
max-width: 100%;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
input,
|
|
411
|
+
progress {
|
|
412
|
+
accent-color: var(--dc-ac-1);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
/* 13. code and keyboards */
|
|
416
|
+
code,
|
|
417
|
+
samp,
|
|
418
|
+
kbd,
|
|
419
|
+
pre {
|
|
420
|
+
background: var(--dc-bg-2);
|
|
421
|
+
border: 1px solid var(--dc-bg-3);
|
|
422
|
+
border-radius: 0.25rem;
|
|
423
|
+
padding: 0.125rem 0.25rem;
|
|
424
|
+
font-size: 0.9rem;
|
|
425
|
+
tab-size: 2;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
kbd {
|
|
429
|
+
border-bottom: 3px solid var(--dc-bg-3);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
pre {
|
|
433
|
+
padding: 1rem 1.5rem;
|
|
434
|
+
max-width: 100%;
|
|
435
|
+
overflow: auto;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
pre code {
|
|
439
|
+
padding: 0;
|
|
440
|
+
border: 0;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
/* 14. details */
|
|
444
|
+
details {
|
|
445
|
+
padding: 0.5rem 1rem;
|
|
446
|
+
background: var(--dc-bg-2);
|
|
447
|
+
border: 1px solid var(--dc-bg-3);
|
|
448
|
+
border-radius: 0.25rem;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
summary {
|
|
452
|
+
cursor: pointer;
|
|
453
|
+
font-weight: bold;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
details[open] summary {
|
|
457
|
+
margin-bottom: 0.5rem;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
details[open] > *:first-child {
|
|
461
|
+
margin-top: 0;
|
|
462
|
+
padding-top: 0;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
details[open] > *:last-child {
|
|
466
|
+
margin-bottom: 0;
|
|
467
|
+
padding-bottom: 0;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
/* 15. description lists */
|
|
471
|
+
dt {
|
|
472
|
+
font-weight: bold;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
dd::before {
|
|
476
|
+
content: "→ ";
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
/* 16. horizontal rules */
|
|
480
|
+
hr {
|
|
481
|
+
border: 0;
|
|
482
|
+
border-bottom: 1px solid var(--dc-bg-3);
|
|
483
|
+
margin: 1rem auto;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
/* 17. fieldsets */
|
|
487
|
+
fieldset {
|
|
488
|
+
margin-top: 1rem;
|
|
489
|
+
padding: 2rem;
|
|
490
|
+
border: 1px solid var(--dc-bg-3);
|
|
491
|
+
border-radius: 0.25rem;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
legend {
|
|
495
|
+
padding: auto 0.5rem;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
/* 18. tables */
|
|
499
|
+
table {
|
|
500
|
+
border-collapse: collapse;
|
|
501
|
+
width: 100%;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
td,
|
|
505
|
+
th {
|
|
506
|
+
border: 1px solid var(--dc-bg-3);
|
|
507
|
+
text-align: left;
|
|
508
|
+
padding: 0.5rem;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
th {
|
|
512
|
+
background: var(--dc-bg-2);
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
tr:nth-child(even) {
|
|
516
|
+
background: var(--dc-bg-2);
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
table caption {
|
|
520
|
+
font-weight: bold;
|
|
521
|
+
margin-bottom: 0.5rem;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
/* 19. lists */
|
|
525
|
+
ol,
|
|
526
|
+
ul {
|
|
527
|
+
padding-left: 2rem;
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
li {
|
|
531
|
+
margin-top: 0.4rem;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
ul ul,
|
|
535
|
+
ol ul,
|
|
536
|
+
ul ol,
|
|
537
|
+
ol ol {
|
|
538
|
+
margin-bottom: 0;
|
|
539
|
+
}
|