@intergrav/dev.css 3.6.1 → 4.0.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 +140 -30
- package/addon/header-oneline.css +14 -42
- package/addon/header-sticky.css +15 -7
- package/addon/scroll-to-top.js +2 -1
- package/dev.css +211 -186
- package/package.json +31 -32
- package/theme/boilerplate.user.css +30 -0
- package/theme/catppuccin-frappe.user.css +26 -0
- package/theme/catppuccin-macchiato.user.css +26 -0
- package/theme/catppuccin-mocha.user.css +26 -0
- package/theme/day.user.css +26 -0
- package/theme/night.user.css +26 -0
- package/theme/terminal.user.css +29 -0
- package/addon/header-sidebar.css +0 -97
- package/demo.html +0 -290
- package/theme/boilerplate-auto.css +0 -54
- package/theme/boilerplate.css +0 -23
- package/theme/catppuccin-frappe.css +0 -50
- package/theme/catppuccin-macchiato.css +0 -50
- package/theme/catppuccin-mocha.css +0 -50
- package/theme/day.css +0 -18
- package/theme/night.css +0 -18
- package/theme/terminal.css +0 -24
package/dev.css
CHANGED
|
@@ -1,100 +1,59 @@
|
|
|
1
|
-
/* dev.css
|
|
1
|
+
/* dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
|
|
2
2
|
/* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
|
|
3
3
|
|
|
4
4
|
/* table of contents
|
|
5
|
-
1.
|
|
6
|
-
2.
|
|
7
|
-
3.
|
|
8
|
-
4.
|
|
9
|
-
5.
|
|
10
|
-
6.
|
|
11
|
-
7.
|
|
12
|
-
8.
|
|
13
|
-
9.
|
|
14
|
-
10.
|
|
15
|
-
11.
|
|
16
|
-
12.
|
|
17
|
-
13.
|
|
18
|
-
14.
|
|
19
|
-
15.
|
|
20
|
-
16. horizontal rules
|
|
21
|
-
17. fieldsets
|
|
22
|
-
18. tables
|
|
23
|
-
19. lists
|
|
5
|
+
1. configurable variables
|
|
6
|
+
2. color scheme
|
|
7
|
+
3. css reset
|
|
8
|
+
4. margins for most elements
|
|
9
|
+
5. typography
|
|
10
|
+
6. document
|
|
11
|
+
7. blockquotes
|
|
12
|
+
8. buttons and inputs
|
|
13
|
+
9. code and keyboards
|
|
14
|
+
10. details
|
|
15
|
+
11. description lists
|
|
16
|
+
12. horizontal rules
|
|
17
|
+
13. fieldsets
|
|
18
|
+
14. tables
|
|
19
|
+
15. lists
|
|
24
20
|
*/
|
|
25
21
|
|
|
26
|
-
/* 1.
|
|
22
|
+
/* 1. configurable variables */
|
|
23
|
+
/* adjustable by you! see ./theme/boilerplate.user.css */
|
|
27
24
|
:root {
|
|
28
25
|
/* font families */
|
|
29
|
-
--dc-font
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
--dc-
|
|
37
|
-
--dc-
|
|
38
|
-
--dc-
|
|
39
|
-
--dc-bg-
|
|
40
|
-
--dc-
|
|
41
|
-
--dc-
|
|
42
|
-
--dc-
|
|
43
|
-
--dc-lkb-
|
|
44
|
-
--dc-
|
|
45
|
-
--dc-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
/* dark colors */
|
|
50
|
-
--dc-d-cs: dark;
|
|
51
|
-
--dc-d-tx-1: #ededed;
|
|
52
|
-
--dc-d-tx-2: #a1a1a1;
|
|
53
|
-
--dc-d-bg-1: #000;
|
|
54
|
-
--dc-d-bg-2: #0a0a0a;
|
|
55
|
-
--dc-d-bg-3: #2e2e2e;
|
|
56
|
-
--dc-d-lk-1: #52a8ff;
|
|
57
|
-
--dc-d-lkb-1: #0072f5;
|
|
58
|
-
--dc-d-lkb-2: #0062d1;
|
|
59
|
-
--dc-d-lkb-tx: #ededed;
|
|
60
|
-
--dc-d-ac-1: #8e4ec6;
|
|
61
|
-
--dc-d-ac-tx: #ededed;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/* 2. dark mode handling */
|
|
65
|
-
@media (prefers-color-scheme: dark) {
|
|
66
|
-
:root {
|
|
67
|
-
--dc-cs: var(--dc-d-cs);
|
|
68
|
-
--dc-tx-1: var(--dc-d-tx-1);
|
|
69
|
-
--dc-tx-2: var(--dc-d-tx-2);
|
|
70
|
-
--dc-bg-1: var(--dc-d-bg-1);
|
|
71
|
-
--dc-bg-2: var(--dc-d-bg-2);
|
|
72
|
-
--dc-bg-3: var(--dc-d-bg-3);
|
|
73
|
-
--dc-lk-1: var(--dc-d-lk-1);
|
|
74
|
-
--dc-lkb-1: var(--dc-d-lkb-1);
|
|
75
|
-
--dc-lkb-2: var(--dc-d-lkb-2);
|
|
76
|
-
--dc-lkb-tx: var(--dc-d-lkb-tx);
|
|
77
|
-
--dc-ac-1: var(--dc-d-ac-1);
|
|
78
|
-
--dc-ac-tx: var(--dc-d-ac-tx);
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
/* 3. root color scheme */
|
|
26
|
+
--dc-font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
27
|
+
--dc-font-mono: "Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro",
|
|
28
|
+
Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
|
29
|
+
|
|
30
|
+
/* light/dark colors */
|
|
31
|
+
--dc-cs: light dark; /* light and dark scrollbars, inputs, etc */
|
|
32
|
+
--dc-tx-1: light-dark(#171717, #ededed); /* primary text */
|
|
33
|
+
--dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */
|
|
34
|
+
--dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */
|
|
35
|
+
--dc-bg-2: light-dark(#fafafa, #000); /* secondary background */
|
|
36
|
+
--dc-bg-3: light-dark(#ebebeb, #2e2e2e); /* border */
|
|
37
|
+
--dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */
|
|
38
|
+
--dc-lkb-1: light-dark(#006bff, #006efe); /* link button */
|
|
39
|
+
--dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */
|
|
40
|
+
--dc-lkb-tx: light-dark(#fff, #fff); /* text over link button */
|
|
41
|
+
--dc-ac-1: light-dark(#a000f8, #9440d5); /* accent color */
|
|
42
|
+
--dc-ac-tx: light-dark(#fff, #fff); /* text over accent color */
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* 2. color scheme */
|
|
83
46
|
:root {
|
|
84
|
-
color-scheme:
|
|
47
|
+
color-scheme: var(--dc-cs);
|
|
85
48
|
}
|
|
86
49
|
|
|
87
|
-
/*
|
|
50
|
+
/* 3. css reset */
|
|
51
|
+
/* modified from https://www.joshwcomeau.com/css/custom-css-reset */
|
|
88
52
|
*,
|
|
89
53
|
*::before,
|
|
90
54
|
*::after {
|
|
91
55
|
box-sizing: border-box;
|
|
92
56
|
margin: 0;
|
|
93
|
-
word-break: break-word;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
body {
|
|
97
|
-
line-height: 1.5;
|
|
98
57
|
}
|
|
99
58
|
|
|
100
59
|
img,
|
|
@@ -113,16 +72,38 @@ select {
|
|
|
113
72
|
font: inherit;
|
|
114
73
|
}
|
|
115
74
|
|
|
75
|
+
p,
|
|
76
|
+
h1,
|
|
77
|
+
h2,
|
|
78
|
+
h3,
|
|
79
|
+
h4,
|
|
80
|
+
h5,
|
|
81
|
+
h6 {
|
|
82
|
+
overflow-wrap: break-word;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
p {
|
|
86
|
+
text-wrap: pretty;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
h1,
|
|
90
|
+
h2,
|
|
91
|
+
h3,
|
|
92
|
+
h4,
|
|
93
|
+
h5,
|
|
94
|
+
h6 {
|
|
95
|
+
text-wrap: balance;
|
|
96
|
+
}
|
|
97
|
+
|
|
116
98
|
#root,
|
|
117
99
|
#__next {
|
|
118
100
|
isolation: isolate;
|
|
119
101
|
}
|
|
120
102
|
|
|
121
|
-
/*
|
|
103
|
+
/* 4. margins for most elements */
|
|
122
104
|
address,
|
|
123
105
|
area,
|
|
124
106
|
article,
|
|
125
|
-
aside,
|
|
126
107
|
audio,
|
|
127
108
|
blockquote,
|
|
128
109
|
datalist,
|
|
@@ -130,10 +111,14 @@ details,
|
|
|
130
111
|
dl,
|
|
131
112
|
fieldset,
|
|
132
113
|
figure,
|
|
114
|
+
footer,
|
|
133
115
|
form,
|
|
116
|
+
header,
|
|
117
|
+
hr,
|
|
134
118
|
input,
|
|
135
119
|
iframe,
|
|
136
120
|
img,
|
|
121
|
+
main,
|
|
137
122
|
meter,
|
|
138
123
|
nav,
|
|
139
124
|
ol,
|
|
@@ -152,9 +137,12 @@ video {
|
|
|
152
137
|
margin-bottom: 1rem;
|
|
153
138
|
}
|
|
154
139
|
|
|
155
|
-
/*
|
|
156
|
-
|
|
157
|
-
|
|
140
|
+
/* 5. typography */
|
|
141
|
+
|
|
142
|
+
body {
|
|
143
|
+
font-family: var(--dc-font);
|
|
144
|
+
color: var(--dc-tx-2);
|
|
145
|
+
line-height: 1.5;
|
|
158
146
|
}
|
|
159
147
|
|
|
160
148
|
code,
|
|
@@ -162,52 +150,7 @@ pre,
|
|
|
162
150
|
kbd,
|
|
163
151
|
samp {
|
|
164
152
|
font-family: var(--dc-font-mono);
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
/* 7. body and selection styling */
|
|
168
|
-
body {
|
|
169
|
-
margin: 0 auto;
|
|
170
|
-
max-width: 48rem;
|
|
171
|
-
padding: 2rem;
|
|
172
|
-
background: var(--dc-bg-1);
|
|
173
|
-
color: var(--dc-tx-2);
|
|
174
|
-
overflow-wrap: break-word;
|
|
175
|
-
overflow-x: hidden;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
::selection {
|
|
179
|
-
background: var(--dc-ac-1);
|
|
180
|
-
color: var(--dc-ac-tx);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
/* 8. typography */
|
|
184
|
-
h1 {
|
|
185
|
-
font-size: 2rem;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
h2 {
|
|
189
|
-
font-size: 1.5rem;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
h3 {
|
|
193
|
-
font-size: 1.17rem;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
h4 {
|
|
197
|
-
font-size: 1rem;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
h5 {
|
|
201
|
-
font-size: 0.83rem;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
h6 {
|
|
205
|
-
font-size: 0.67rem;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
p,
|
|
209
|
-
a {
|
|
210
|
-
font-size: 1rem;
|
|
153
|
+
font-size: 0.9rem;
|
|
211
154
|
}
|
|
212
155
|
|
|
213
156
|
h1,
|
|
@@ -216,19 +159,26 @@ h3,
|
|
|
216
159
|
h4,
|
|
217
160
|
h5,
|
|
218
161
|
h6 {
|
|
219
|
-
line-height: 1;
|
|
220
162
|
color: var(--dc-tx-1);
|
|
221
|
-
|
|
163
|
+
line-height: 1;
|
|
164
|
+
padding-top: 0.5rem;
|
|
222
165
|
}
|
|
223
166
|
|
|
224
167
|
h1,
|
|
225
168
|
h2,
|
|
226
169
|
h3 {
|
|
227
|
-
padding-bottom: 0.25rem;
|
|
228
170
|
margin-bottom: 0.5rem;
|
|
171
|
+
padding-bottom: 0.25rem;
|
|
229
172
|
border-bottom: 1px solid var(--dc-bg-3);
|
|
230
173
|
}
|
|
231
174
|
|
|
175
|
+
article h1,
|
|
176
|
+
article h2,
|
|
177
|
+
article h3 {
|
|
178
|
+
padding-bottom: 0;
|
|
179
|
+
border-bottom: none;
|
|
180
|
+
}
|
|
181
|
+
|
|
232
182
|
h4,
|
|
233
183
|
h5,
|
|
234
184
|
h6 {
|
|
@@ -244,75 +194,152 @@ a:hover {
|
|
|
244
194
|
text-decoration: underline;
|
|
245
195
|
}
|
|
246
196
|
|
|
197
|
+
@supports not (color: light-dark(#fff, #000)) {
|
|
198
|
+
a {
|
|
199
|
+
text-decoration: underline;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
247
203
|
mark {
|
|
204
|
+
border-radius: 0.375rem;
|
|
248
205
|
padding: 0.125rem 0.25rem;
|
|
249
206
|
background: var(--dc-ac-1);
|
|
250
207
|
color: var(--dc-ac-tx);
|
|
251
|
-
border-radius: 0.25rem;
|
|
252
208
|
}
|
|
253
209
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
background: var(--dc-bg-2);
|
|
258
|
-
border: 1px solid var(--dc-bg-3);
|
|
259
|
-
border-left: 5px solid var(--dc-bg-3);
|
|
260
|
-
border-radius: 0.25rem;
|
|
210
|
+
::selection {
|
|
211
|
+
background: var(--dc-ac-1);
|
|
212
|
+
color: var(--dc-ac-tx);
|
|
261
213
|
}
|
|
262
214
|
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
215
|
+
/* 6. document */
|
|
216
|
+
body {
|
|
217
|
+
max-width: 48rem;
|
|
218
|
+
margin: 1rem auto 0;
|
|
219
|
+
padding: 0 1rem;
|
|
220
|
+
background: var(--dc-bg-2);
|
|
221
|
+
overflow-x: hidden;
|
|
266
222
|
}
|
|
267
223
|
|
|
268
|
-
/* 10. header - make sure header addons dont break when modifying */
|
|
269
224
|
header {
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
margin: -2rem calc(50% - 50vw) 2rem;
|
|
225
|
+
padding: 1rem calc(50vw - 50%);
|
|
226
|
+
margin: 0 calc(50% - 50vw) 0;
|
|
227
|
+
margin-top: -1rem;
|
|
274
228
|
}
|
|
275
229
|
|
|
276
230
|
header * {
|
|
277
|
-
padding
|
|
278
|
-
|
|
279
|
-
|
|
231
|
+
padding: 0;
|
|
232
|
+
margin: 0;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
header > *:not(:last-child) {
|
|
280
236
|
margin-bottom: 0.25rem;
|
|
281
237
|
}
|
|
282
238
|
|
|
283
239
|
header h1,
|
|
284
240
|
header h2,
|
|
285
241
|
header h3 {
|
|
286
|
-
border-bottom:
|
|
242
|
+
border-bottom: none;
|
|
243
|
+
padding-bottom: 0;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
footer > *:last-child {
|
|
247
|
+
margin-bottom: 0;
|
|
287
248
|
}
|
|
288
249
|
|
|
289
|
-
header nav ul
|
|
250
|
+
header nav ul,
|
|
251
|
+
footer nav ul {
|
|
252
|
+
display: flex;
|
|
253
|
+
flex-wrap: wrap;
|
|
254
|
+
list-style: none;
|
|
290
255
|
padding: 0;
|
|
291
256
|
}
|
|
292
257
|
|
|
293
|
-
header nav ul li
|
|
294
|
-
|
|
258
|
+
header nav ul li,
|
|
259
|
+
footer nav ul li {
|
|
295
260
|
margin: 0;
|
|
261
|
+
display: flex;
|
|
296
262
|
}
|
|
297
263
|
|
|
298
|
-
header nav ul li:not(:first-child)::before
|
|
299
|
-
|
|
264
|
+
header nav ul li:not(:first-child)::before,
|
|
265
|
+
footer nav ul li:not(:first-child)::before {
|
|
266
|
+
content: "•";
|
|
267
|
+
margin: 0 0.25em;
|
|
300
268
|
}
|
|
301
269
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
270
|
+
main,
|
|
271
|
+
article {
|
|
272
|
+
padding: 1.5rem;
|
|
273
|
+
background: var(--dc-bg-1);
|
|
274
|
+
border: 1px solid var(--dc-bg-3);
|
|
275
|
+
border-radius: 0.25rem;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
main article {
|
|
279
|
+
background: var(--dc-bg-2);
|
|
280
|
+
border-radius: 0.375rem;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
main > *:last-child,
|
|
284
|
+
article > *:last-child {
|
|
285
|
+
margin-bottom: 0;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
@media only screen and (max-width: 48rem) {
|
|
289
|
+
main {
|
|
290
|
+
margin: -1rem;
|
|
291
|
+
background: none;
|
|
292
|
+
border: none;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
header {
|
|
296
|
+
background-color: var(--dc-bg-1);
|
|
297
|
+
border-bottom: 1px solid var(--dc-bg-3);
|
|
298
|
+
margin-bottom: 1rem;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
footer {
|
|
302
|
+
margin-top: 1rem;
|
|
303
|
+
padding-top: 1rem;
|
|
304
|
+
border-top: 1px solid var(--dc-bg-3);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
main,
|
|
308
|
+
article {
|
|
309
|
+
padding: 1rem;
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
@media only screen and (min-width: 82rem) {
|
|
314
|
+
aside {
|
|
315
|
+
position: absolute;
|
|
316
|
+
width: 16rem;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
aside:nth-child(even) {
|
|
320
|
+
left: calc(50% - ((48rem) / 2) - (16rem));
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
aside:nth-child(odd) {
|
|
324
|
+
right: calc(50% - ((48rem) / 2) - (16rem));
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
/* 7. blockquotes */
|
|
329
|
+
blockquote {
|
|
330
|
+
padding: 1.25rem;
|
|
331
|
+
background: var(--dc-bg-2);
|
|
332
|
+
border: 1px solid var(--dc-bg-3);
|
|
333
|
+
border-left: 5px solid var(--dc-bg-3);
|
|
334
|
+
border-radius: 0.375rem;
|
|
307
335
|
}
|
|
308
336
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
border-bottom: 0;
|
|
337
|
+
blockquote > *:last-child {
|
|
338
|
+
padding-bottom: 0;
|
|
339
|
+
margin-bottom: 0;
|
|
313
340
|
}
|
|
314
341
|
|
|
315
|
-
/*
|
|
342
|
+
/* 8. buttons and inputs */
|
|
316
343
|
a button,
|
|
317
344
|
button,
|
|
318
345
|
input[type="submit"],
|
|
@@ -326,7 +353,7 @@ input[type="button"] {
|
|
|
326
353
|
background: var(--dc-lkb-1);
|
|
327
354
|
color: var(--dc-lkb-tx);
|
|
328
355
|
border: 0;
|
|
329
|
-
border-radius: 0.
|
|
356
|
+
border-radius: 0.375rem;
|
|
330
357
|
box-sizing: border-box;
|
|
331
358
|
cursor: pointer;
|
|
332
359
|
}
|
|
@@ -361,7 +388,7 @@ input {
|
|
|
361
388
|
background: var(--dc-bg-2);
|
|
362
389
|
color: var(--dc-tx-2);
|
|
363
390
|
border: 1px solid var(--dc-bg-3);
|
|
364
|
-
border-radius: 0.
|
|
391
|
+
border-radius: 0.375rem;
|
|
365
392
|
box-shadow: none;
|
|
366
393
|
box-sizing: border-box;
|
|
367
394
|
}
|
|
@@ -375,16 +402,15 @@ progress {
|
|
|
375
402
|
accent-color: var(--dc-ac-1);
|
|
376
403
|
}
|
|
377
404
|
|
|
378
|
-
/*
|
|
405
|
+
/* 9. code and keyboards */
|
|
379
406
|
code,
|
|
380
407
|
samp,
|
|
381
408
|
kbd,
|
|
382
409
|
pre {
|
|
383
410
|
background: var(--dc-bg-2);
|
|
384
411
|
border: 1px solid var(--dc-bg-3);
|
|
385
|
-
border-radius: 0.
|
|
412
|
+
border-radius: 0.375rem;
|
|
386
413
|
padding: 0.125rem 0.25rem;
|
|
387
|
-
font-size: 0.9rem;
|
|
388
414
|
tab-size: 2;
|
|
389
415
|
}
|
|
390
416
|
|
|
@@ -403,12 +429,12 @@ pre code {
|
|
|
403
429
|
border: 0;
|
|
404
430
|
}
|
|
405
431
|
|
|
406
|
-
/*
|
|
432
|
+
/* 10. details */
|
|
407
433
|
details {
|
|
408
434
|
padding: 0.5rem 1rem;
|
|
409
435
|
background: var(--dc-bg-2);
|
|
410
436
|
border: 1px solid var(--dc-bg-3);
|
|
411
|
-
border-radius: 0.
|
|
437
|
+
border-radius: 0.375rem;
|
|
412
438
|
}
|
|
413
439
|
|
|
414
440
|
summary {
|
|
@@ -430,7 +456,7 @@ details[open] > *:last-child {
|
|
|
430
456
|
padding-bottom: 0;
|
|
431
457
|
}
|
|
432
458
|
|
|
433
|
-
/*
|
|
459
|
+
/* 11. description lists */
|
|
434
460
|
dt {
|
|
435
461
|
font-weight: bold;
|
|
436
462
|
}
|
|
@@ -439,26 +465,25 @@ dd::before {
|
|
|
439
465
|
content: "→ ";
|
|
440
466
|
}
|
|
441
467
|
|
|
442
|
-
/*
|
|
468
|
+
/* 12. horizontal rules */
|
|
443
469
|
hr {
|
|
444
470
|
border: 0;
|
|
445
|
-
border-bottom:
|
|
446
|
-
margin: 1rem auto;
|
|
471
|
+
border-bottom: 2px solid var(--dc-bg-3);
|
|
447
472
|
}
|
|
448
473
|
|
|
449
|
-
/*
|
|
474
|
+
/* 13. fieldsets */
|
|
450
475
|
fieldset {
|
|
451
476
|
margin-top: 1rem;
|
|
452
477
|
padding: 2rem;
|
|
453
478
|
border: 1px solid var(--dc-bg-3);
|
|
454
|
-
border-radius: 0.
|
|
479
|
+
border-radius: 0.375rem;
|
|
455
480
|
}
|
|
456
481
|
|
|
457
482
|
legend {
|
|
458
483
|
padding: auto 0.5rem;
|
|
459
484
|
}
|
|
460
485
|
|
|
461
|
-
/*
|
|
486
|
+
/* 14. tables */
|
|
462
487
|
table {
|
|
463
488
|
border-collapse: collapse;
|
|
464
489
|
width: 100%;
|
|
@@ -484,7 +509,7 @@ table caption {
|
|
|
484
509
|
margin-bottom: 0.5rem;
|
|
485
510
|
}
|
|
486
511
|
|
|
487
|
-
/*
|
|
512
|
+
/* 15. lists */
|
|
488
513
|
ol,
|
|
489
514
|
ul {
|
|
490
515
|
padding-left: 2rem;
|
package/package.json
CHANGED
|
@@ -1,32 +1,31 @@
|
|
|
1
|
-
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@intergrav/dev.css",
|
|
3
|
+
"version": "4.0.0",
|
|
4
|
+
"description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"css",
|
|
7
|
+
"stylesheet",
|
|
8
|
+
"framework",
|
|
9
|
+
"classless",
|
|
10
|
+
"minimal",
|
|
11
|
+
"lightweight",
|
|
12
|
+
"vercel",
|
|
13
|
+
"geist",
|
|
14
|
+
"open-source"
|
|
15
|
+
],
|
|
16
|
+
"homepage": "https://devcss.devins.page",
|
|
17
|
+
"bugs": {
|
|
18
|
+
"url": "https://github.com/intergrav/dev.css/issues"
|
|
19
|
+
},
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"author": "intergrav <intergrav@proton.me> (https://devins.page)",
|
|
22
|
+
"files": [
|
|
23
|
+
"theme",
|
|
24
|
+
"addon"
|
|
25
|
+
],
|
|
26
|
+
"main": "dev.css",
|
|
27
|
+
"repository": "github:intergrav/dev.css",
|
|
28
|
+
"prettier": {
|
|
29
|
+
"useTabs": true
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/* ==userstyle==
|
|
2
|
+
@name boilerplate for dev.css
|
|
3
|
+
@description a template that you can modify. mostly copied from dev.css defaults. removing lines will revert to the dev.css default, for example the font lines
|
|
4
|
+
@namespace author
|
|
5
|
+
@version 1.0.0
|
|
6
|
+
@author author <author@example.com> (https://example.com)
|
|
7
|
+
@homepageURL https://example.com
|
|
8
|
+
@supportURL https://example.com/issues
|
|
9
|
+
@license MIT
|
|
10
|
+
==/userstyle== */
|
|
11
|
+
|
|
12
|
+
:root {
|
|
13
|
+
/* font families */
|
|
14
|
+
--dc-font: sans-serif;
|
|
15
|
+
--dc-font-mono: monospace;
|
|
16
|
+
|
|
17
|
+
/* light/dark colors */
|
|
18
|
+
--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
|
|
19
|
+
--dc-tx-1: light-dark(#171717, #ededed); /* primary text */
|
|
20
|
+
--dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */
|
|
21
|
+
--dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */
|
|
22
|
+
--dc-bg-2: light-dark(#fafafa, #000); /* secondary background */
|
|
23
|
+
--dc-bg-3: light-dark(#ebebeb, #2e2e2e); /* border */
|
|
24
|
+
--dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */
|
|
25
|
+
--dc-lkb-1: light-dark(#006bff, #006efe); /* link button */
|
|
26
|
+
--dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */
|
|
27
|
+
--dc-lkb-tx: light-dark(#fff, #fff); /* text over link button */
|
|
28
|
+
--dc-ac-1: light-dark(#a000f8, #9440d5); /* accent color */
|
|
29
|
+
--dc-ac-tx: light-dark(#fff, #fff); /* text over accent color */
|
|
30
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/* ==userstyle==
|
|
2
|
+
@name catppuccin frappé and latte for dev.css
|
|
3
|
+
@description dev.css theme based on catppuccin's frappé and latte colors - https://github.com/catppuccin
|
|
4
|
+
@namespace intergrav
|
|
5
|
+
@version 1.0.0
|
|
6
|
+
@author intergrav <intergrav@proton.me> (https://devins.page)
|
|
7
|
+
@homepageURL https://devcss.devins.page
|
|
8
|
+
@supportURL https://github.com/intergrav/dev.css/issues
|
|
9
|
+
@license MIT
|
|
10
|
+
==/userstyle== */
|
|
11
|
+
|
|
12
|
+
:root {
|
|
13
|
+
/* colors - latte and frappé */
|
|
14
|
+
--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
|
|
15
|
+
--dc-tx-1: light-dark(#4c4f69, #c6d0f5); /* primary text | Text */
|
|
16
|
+
--dc-tx-2: light-dark(#4c4f69, #c6d0f5); /* secondary text | Text */
|
|
17
|
+
--dc-bg-1: light-dark(#eff1f5, #303446); /* primary background | Base */
|
|
18
|
+
--dc-bg-2: light-dark(#e6e9ef, #292c3c); /* secondary background | Mantle */
|
|
19
|
+
--dc-bg-3: light-dark(#ccd0da, #414559); /* border | Surface0 */
|
|
20
|
+
--dc-lk-1: light-dark(#1e66f5, #8caaee); /* link text | Blue */
|
|
21
|
+
--dc-lkb-1: light-dark(#bcc0cc, #51576d); /* link button | Surface1 */
|
|
22
|
+
--dc-lkb-2: light-dark(#ccd0da, #414559); /* link button hover | Surface0 */
|
|
23
|
+
--dc-lkb-tx: light-dark(#4c4f69, #c6d0f5); /* text over link button | Text */
|
|
24
|
+
--dc-ac-1: light-dark(#8839ef, #ca9ee6); /* accent color | Mauve */
|
|
25
|
+
--dc-ac-tx: light-dark(#eff1f5, #303446); /* text over accent color | Base */
|
|
26
|
+
}
|