@intergrav/dev.css 3.6.2 → 4.0.1
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 +212 -186
- package/package.json +4 -5
- 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,23 +159,30 @@ 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 {
|
|
170
|
+
margin-bottom: 0.75rem;
|
|
227
171
|
padding-bottom: 0.25rem;
|
|
228
|
-
margin-bottom: 0.5rem;
|
|
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 {
|
|
235
|
-
margin-bottom: 0.
|
|
185
|
+
margin-bottom: 0.5rem;
|
|
236
186
|
}
|
|
237
187
|
|
|
238
188
|
a {
|
|
@@ -244,74 +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
|
-
|
|
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;
|
|
306
335
|
}
|
|
307
336
|
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
border-bottom: 0;
|
|
337
|
+
blockquote > *:last-child {
|
|
338
|
+
padding-bottom: 0;
|
|
339
|
+
margin-bottom: 0;
|
|
312
340
|
}
|
|
313
341
|
|
|
314
|
-
/*
|
|
342
|
+
/* 8. buttons and inputs */
|
|
315
343
|
a button,
|
|
316
344
|
button,
|
|
317
345
|
input[type="submit"],
|
|
@@ -325,7 +353,7 @@ input[type="button"] {
|
|
|
325
353
|
background: var(--dc-lkb-1);
|
|
326
354
|
color: var(--dc-lkb-tx);
|
|
327
355
|
border: 0;
|
|
328
|
-
border-radius: 0.
|
|
356
|
+
border-radius: 0.375rem;
|
|
329
357
|
box-sizing: border-box;
|
|
330
358
|
cursor: pointer;
|
|
331
359
|
}
|
|
@@ -360,7 +388,7 @@ input {
|
|
|
360
388
|
background: var(--dc-bg-2);
|
|
361
389
|
color: var(--dc-tx-2);
|
|
362
390
|
border: 1px solid var(--dc-bg-3);
|
|
363
|
-
border-radius: 0.
|
|
391
|
+
border-radius: 0.375rem;
|
|
364
392
|
box-shadow: none;
|
|
365
393
|
box-sizing: border-box;
|
|
366
394
|
}
|
|
@@ -374,16 +402,15 @@ progress {
|
|
|
374
402
|
accent-color: var(--dc-ac-1);
|
|
375
403
|
}
|
|
376
404
|
|
|
377
|
-
/*
|
|
405
|
+
/* 9. code and keyboards */
|
|
378
406
|
code,
|
|
379
407
|
samp,
|
|
380
408
|
kbd,
|
|
381
409
|
pre {
|
|
382
410
|
background: var(--dc-bg-2);
|
|
383
411
|
border: 1px solid var(--dc-bg-3);
|
|
384
|
-
border-radius: 0.
|
|
412
|
+
border-radius: 0.375rem;
|
|
385
413
|
padding: 0.125rem 0.25rem;
|
|
386
|
-
font-size: 0.9rem;
|
|
387
414
|
tab-size: 2;
|
|
388
415
|
}
|
|
389
416
|
|
|
@@ -402,12 +429,12 @@ pre code {
|
|
|
402
429
|
border: 0;
|
|
403
430
|
}
|
|
404
431
|
|
|
405
|
-
/*
|
|
432
|
+
/* 10. details */
|
|
406
433
|
details {
|
|
407
434
|
padding: 0.5rem 1rem;
|
|
408
435
|
background: var(--dc-bg-2);
|
|
409
436
|
border: 1px solid var(--dc-bg-3);
|
|
410
|
-
border-radius: 0.
|
|
437
|
+
border-radius: 0.375rem;
|
|
411
438
|
}
|
|
412
439
|
|
|
413
440
|
summary {
|
|
@@ -429,7 +456,7 @@ details[open] > *:last-child {
|
|
|
429
456
|
padding-bottom: 0;
|
|
430
457
|
}
|
|
431
458
|
|
|
432
|
-
/*
|
|
459
|
+
/* 11. description lists */
|
|
433
460
|
dt {
|
|
434
461
|
font-weight: bold;
|
|
435
462
|
}
|
|
@@ -438,26 +465,25 @@ dd::before {
|
|
|
438
465
|
content: "→ ";
|
|
439
466
|
}
|
|
440
467
|
|
|
441
|
-
/*
|
|
468
|
+
/* 12. horizontal rules */
|
|
442
469
|
hr {
|
|
443
470
|
border: 0;
|
|
444
|
-
border-bottom:
|
|
445
|
-
margin: 1rem auto;
|
|
471
|
+
border-bottom: 2px solid var(--dc-bg-3);
|
|
446
472
|
}
|
|
447
473
|
|
|
448
|
-
/*
|
|
474
|
+
/* 13. fieldsets */
|
|
449
475
|
fieldset {
|
|
450
476
|
margin-top: 1rem;
|
|
451
477
|
padding: 2rem;
|
|
452
478
|
border: 1px solid var(--dc-bg-3);
|
|
453
|
-
border-radius: 0.
|
|
479
|
+
border-radius: 0.375rem;
|
|
454
480
|
}
|
|
455
481
|
|
|
456
482
|
legend {
|
|
457
483
|
padding: auto 0.5rem;
|
|
458
484
|
}
|
|
459
485
|
|
|
460
|
-
/*
|
|
486
|
+
/* 14. tables */
|
|
461
487
|
table {
|
|
462
488
|
border-collapse: collapse;
|
|
463
489
|
width: 100%;
|
|
@@ -483,7 +509,7 @@ table caption {
|
|
|
483
509
|
margin-bottom: 0.5rem;
|
|
484
510
|
}
|
|
485
511
|
|
|
486
|
-
/*
|
|
512
|
+
/* 15. lists */
|
|
487
513
|
ol,
|
|
488
514
|
ul {
|
|
489
515
|
padding-left: 2rem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intergrav/dev.css",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.1",
|
|
4
4
|
"description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -13,16 +13,15 @@
|
|
|
13
13
|
"geist",
|
|
14
14
|
"open-source"
|
|
15
15
|
],
|
|
16
|
-
"homepage": "https://
|
|
16
|
+
"homepage": "https://devcss.devins.page",
|
|
17
17
|
"bugs": {
|
|
18
18
|
"url": "https://github.com/intergrav/dev.css/issues"
|
|
19
19
|
},
|
|
20
20
|
"license": "MIT",
|
|
21
|
-
"author": "intergrav <intergrav@proton.me> (https://
|
|
21
|
+
"author": "intergrav <intergrav@proton.me> (https://devins.page)",
|
|
22
22
|
"files": [
|
|
23
23
|
"theme",
|
|
24
|
-
"addon"
|
|
25
|
-
"demo.html"
|
|
24
|
+
"addon"
|
|
26
25
|
],
|
|
27
26
|
"main": "dev.css",
|
|
28
27
|
"repository": "github:intergrav/dev.css",
|
|
@@ -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
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/* ==userstyle==
|
|
2
|
+
@name catppuccin macchiato and latte for dev.css
|
|
3
|
+
@description dev.css theme based on catppuccin's macchiato 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 macchiato */
|
|
14
|
+
--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
|
|
15
|
+
--dc-tx-1: light-dark(#4c4f69, #cad3f5); /* primary text | Text */
|
|
16
|
+
--dc-tx-2: light-dark(#4c4f69, #cad3f5); /* secondary text | Text */
|
|
17
|
+
--dc-bg-1: light-dark(#eff1f5, #24273a); /* primary background | Base */
|
|
18
|
+
--dc-bg-2: light-dark(#e6e9ef, #1e2030); /* secondary background | Mantle */
|
|
19
|
+
--dc-bg-3: light-dark(#ccd0da, #363a4f); /* border | Surface0 */
|
|
20
|
+
--dc-lk-1: light-dark(#1e66f5, #8aadf4); /* link text | Blue */
|
|
21
|
+
--dc-lkb-1: light-dark(#bcc0cc, #494d64); /* link button | Surface1 */
|
|
22
|
+
--dc-lkb-2: light-dark(#ccd0da, #363a4f); /* link button hover | Surface0 */
|
|
23
|
+
--dc-lkb-tx: light-dark(#4c4f69, #cad3f5); /* text over link button | Text */
|
|
24
|
+
--dc-ac-1: light-dark(#8839ef, #c6a0f6); /* accent color | Mauve */
|
|
25
|
+
--dc-ac-tx: light-dark(#eff1f5, #24273a); /* text over accent color | Base */
|
|
26
|
+
}
|