lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
feat: v5
most of the code was written several years ago and i have been meaning to rewrite it, so I've gone ahead and heavily cleaned up and refactored the CSS.
most of this was thanks to feedback on lobste.rs, many of the suggestions i totally agree with (which i really appreciate, ive never really gotten proper feedback on this project before) https://lobste.rs/s/dpkqgr/dev_css_tiny_simple_classless_css
margin/padding resets were removed, and so i was able to remove a lot of unnecessary declarations.
`--dc-cs` was simplified to `color-scheme`. you may need to update your themes to reflect this.
underlines have also been added back for accessibility.
removed `overflow-x: hidden` on body
removed `a button` styling
tab size has been changed to `4`
also lots of organizational improvements
+188
-281
+1
.envrc
+1
.envrc
···
1
+
use_nix
+27
-39
README.md
+27
-39
README.md
···
30
30
```html
31
31
<a href="https://devcss.devins.page"
32
32
><img
33
-
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg"
33
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/badge.svg"
34
34
alt="powered by dev.css"
35
35
/></a>
36
36
```
37
37
38
-
<a href="https://devcss.devins.page"><img src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg" alt="powered by dev.css" /></a>
38
+
<a href="https://devcss.devins.page"><img src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/badge.svg" alt="powered by dev.css" /></a>
39
39
40
40
## Installing
41
41
···
46
46
```html
47
47
<link
48
48
rel="stylesheet"
49
-
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4"
49
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5"
50
50
/>
51
51
```
52
52
···
62
62
63
63
### Importing fonts
64
64
65
-
You can also load a font from [intergrav/fonts](https://tangled.org/devins.page/fonts) (or anywhere else) if you'd like a consistent font. Geist and Inter fonts work with dev.css out of the box, other fonts will require a theme to be used. If these fonts are not available, the default system/browser sans-serif and monospace fonts will be used, such as Microsoft's Segoe UI or Apple's San Francisco.
65
+
You can also load a font from [fontsource.org](https://fontsource.org) if you'd like a consistent font. By default, the system/browser sans-serif and monospace fonts will be used, such as Microsoft's Segoe UI or Apple's San Francisco.
66
66
67
67
## Elements and Structure
68
68
···
118
118
119
119
### Sidebar
120
120
121
-
Optionally, you can add a sidebar to your page for pretty much anything you'd like. A good usage for this could be, for example, complex navigation on a docs website, where you wouldn't be able to fit it all into the header. The sidebar will sort normally with the rest of the content on smaller screens. To make a sidebar, place an `<aside>` tag, and then it's also recommended to put an `<article>` inside if you want a background. You must put it above the `<main>` content. You can have up to two sidebars per page - the second one will appear on the right side. You can also make a sidebar collapsible by wrapping it's contents in a `<details>` tag - adding the `open` attribute will make it open by default. Here's an example:
121
+
Optionally, you can add a sidebar to your page for pretty much anything you'd like. A good usage for this could be, for example, complex navigation on a docs website, where you wouldn't be able to fit it all into the header. The sidebar will sort normally with the rest of the content on smaller screens. To make a sidebar, place an `<aside>` tag. You must put it above the `<main>` content. You can have up to two sidebars per page - the second one will appear on the right side. You can also make a sidebar collapsible by wrapping it's contents in a `<details>` tag - adding the `open` attribute will make it open by default. Here's an example:
122
122
123
123
```html
124
124
<aside>
125
-
<article>
126
-
<details open>
127
-
<summary>Sidebar</summary>
128
-
<nav>
129
-
<ul>
130
-
<li><a href="https://example.com">Page 1</a></li>
131
-
<li>
132
-
<a href="https://example.com">Page 2</a>
133
-
<ul>
134
-
<li><a href="https://example.com">Page 2.1</a></li>
135
-
<li><a href="https://example.com">Page 2.2</a></li>
136
-
</ul>
137
-
</li>
138
-
<li><a href="https://example.com">Page 3</a></li>
139
-
<li><a href="https://example.com">Page 4</a></li>
140
-
</ul>
141
-
</nav>
142
-
</details>
143
-
</article>
125
+
<details open>
126
+
<summary>Sidebar</summary>
127
+
<nav>
128
+
<ul>
129
+
<li><a href="https://example.com">Page 1</a></li>
130
+
<li>
131
+
<a href="https://example.com">Page 2</a>
132
+
<ul>
133
+
<li><a href="https://example.com">Page 2.1</a></li>
134
+
<li><a href="https://example.com">Page 2.2</a></li>
135
+
</ul>
136
+
</li>
137
+
<li><a href="https://example.com">Page 3</a></li>
138
+
<li><a href="https://example.com">Page 4</a></li>
139
+
</ul>
140
+
</nav>
141
+
</details>
144
142
</aside>
145
143
```
146
144
···
170
168
171
169
Wrap all body text in `<p>` tags, unless it's the sole child of another element. Use the `<blockquote>` tag for quotes. To highlight text, wrap it in the `<mark>` tag. For code, use `<code>` for short inline code snippets and wrap that with `<pre>` for code blocks. Use `<kbd>` for keyboard input.
172
170
173
-
### Button
174
-
175
-
To create a link button, wrap the button in an `<a>` tag. Here's an example:
176
-
177
-
```html
178
-
<a href="https://example.com">
179
-
<button>Click me!</button>
180
-
</a>
181
-
```
182
-
183
171
### Details
184
172
185
173
The `<details>` element can be used to create a toggle-able dropdown without using any JavaScript. Here's an example:
···
206
194
```html
207
195
<link
208
196
rel="stylesheet"
209
-
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-oneline.min.css"
197
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/addon/header-oneline.min.css"
210
198
/>
211
199
```
212
200
···
217
205
```html
218
206
<link
219
207
rel="stylesheet"
220
-
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-sticky.min.css"
208
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/addon/header-sticky.min.css"
221
209
/>
222
210
```
223
211
···
227
215
228
216
```html
229
217
<script
230
-
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/scroll-to-top.min.js"
218
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/addon/scroll-to-top.min.js"
231
219
defer
232
220
></script>
233
221
```
···
238
226
239
227
```html
240
228
<script
241
-
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/responsive-sidebar.min.js"
229
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/addon/responsive-sidebar.min.js"
242
230
defer
243
231
></script>
244
232
```
···
250
238
```html
251
239
<link
252
240
rel="stylesheet"
253
-
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/theme/terminal.user.min.css"
241
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/theme/terminal.user.min.css"
254
242
/>
255
243
```
256
244
+2
-2
addon/header-oneline.css
+2
-2
addon/header-oneline.css
···
1
-
/* header-oneline for dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
1
+
/* header-oneline for dev.css v5, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2
2
/* about: makes the header much more compact by sorting horizontally, good with header-sticky addon */
3
3
/* note: will hide most elements in header other than img, h1-6, nav, and button */
4
4
···
7
7
line-height: 1;
8
8
margin: 0;
9
9
padding: 0;
10
-
margin-bottom: 0 !important;
10
+
margin-block-end: 0 !important;
11
11
}
12
12
13
13
header {
+1
-1
addon/header-sticky.css
+1
-1
addon/header-sticky.css
···
1
-
/* header-sticky for dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
1
+
/* header-sticky for dev.css v5, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2
2
/* about: makes the header sticky (when vh>24rem/vw>16rem). useful if the user needs to access nav often */
3
3
/* note: large sticky headers are bad for usability. too large? try header-oneline addon */
4
4
+1
-1
addon/scroll-to-top.js
+1
-1
addon/scroll-to-top.js
···
1
-
/* scroll-to-top for dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
1
+
/* scroll-to-top for dev.css v5, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2
2
/* about: shows a "scroll to top" button in the bottom right corner of the screen when scrolling */
3
3
4
4
const scrollToTopButton = document.createElement("button");
-15
bun.lock
-15
bun.lock
···
1
-
{
2
-
"lockfileVersion": 1,
3
-
"configVersion": 1,
4
-
"workspaces": {
5
-
"": {
6
-
"name": "@intergrav/dev.css",
7
-
"devDependencies": {
8
-
"prettier": "latest",
9
-
},
10
-
},
11
-
},
12
-
"packages": {
13
-
"prettier": ["prettier@3.8.1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="],
14
-
}
15
-
}
+77
-185
dev.css
+77
-185
dev.css
···
1
-
/* dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
1
+
/* dev.css v5, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2
2
/* about: tiny, simple, classless CSS framework inspired by new.css */
3
3
4
4
/* table of contents
5
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
6
+
2. typography
7
+
3. document
8
+
4. blockquotes
9
+
5. buttons and inputs
10
+
6. code and keyboards
11
+
7. details
12
+
8. description lists
13
+
9. horizontal rules
14
+
10. fieldsets
15
+
11. tables
16
+
12. lists
17
+
13. media
20
18
*/
21
19
22
20
/* 1. configurable variables */
23
21
/* adjustable by you! see ./theme/boilerplate.user.css */
24
22
:root {
25
23
/* font families */
26
-
--dc-font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
27
-
--dc-font-mono:
28
-
"Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
29
-
Consolas, "DejaVu Sans Mono", monospace;
24
+
--dc-font: ui-sans-serif, system-ui, sans-serif;
25
+
--dc-font-mono: ui-monospace, monospace;
30
26
31
27
/* light/dark colors */
32
-
--dc-cs: light dark; /* light and dark scrollbars, inputs, etc */
28
+
color-scheme: light dark; /* light and dark scrollbars, inputs, etc */
33
29
--dc-tx-1: light-dark(#171717, #ededed); /* primary text */
34
30
--dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */
35
31
--dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */
36
32
--dc-bg-2: light-dark(#fafafa, #000); /* secondary background */
37
-
--dc-bg-3: light-dark(#ebebeb, #2e2e2e); /* border */
33
+
--dc-bg-3: light-dark(#ebebeb, #575757); /* border */
38
34
--dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */
39
35
--dc-lkb-1: light-dark(#006bff, #006efe); /* link button */
40
36
--dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */
···
43
39
--dc-ac-tx: light-dark(#fff, #fff); /* text over accent color */
44
40
}
45
41
46
-
/* 2. color scheme */
47
-
:root {
48
-
color-scheme: var(--dc-cs);
49
-
}
50
-
51
-
/* 3. css reset */
52
-
/* modified from https://www.joshwcomeau.com/css/custom-css-reset */
53
-
*,
54
-
*::before,
55
-
*::after {
56
-
box-sizing: border-box;
57
-
margin: 0;
58
-
}
59
-
60
-
img,
61
-
picture,
62
-
video,
63
-
canvas,
64
-
svg {
65
-
display: block;
66
-
max-width: 100%;
67
-
height: auto;
68
-
}
69
-
70
-
input,
71
-
button,
72
-
textarea,
73
-
select {
74
-
font: inherit;
75
-
}
42
+
/* 2. typography */
76
43
77
44
p,
78
45
h1,
···
97
64
text-wrap: balance;
98
65
}
99
66
100
-
#root,
101
-
#__next {
102
-
isolation: isolate;
103
-
}
104
-
105
-
/* 4. margins for most elements */
106
-
address,
107
-
area,
108
-
article,
109
-
audio,
110
-
blockquote,
111
-
datalist,
112
-
details,
113
-
dl,
114
-
fieldset,
115
-
figure,
116
-
footer,
117
-
form,
118
-
header,
119
-
hr,
120
-
input,
121
-
iframe,
122
-
img,
123
-
main,
124
-
meter,
125
-
nav,
126
-
ol,
127
-
optgroup,
128
-
option,
129
-
output,
130
-
p,
131
-
pre,
132
-
progress,
133
-
ruby,
134
-
section,
135
-
table,
136
-
textarea,
137
-
ul,
138
-
video {
139
-
margin-bottom: 1rem;
140
-
}
141
-
142
-
/* 5. typography */
143
-
144
67
body {
145
68
font-family: var(--dc-font);
146
69
color: var(--dc-tx-2);
···
162
85
h5,
163
86
h6 {
164
87
color: var(--dc-tx-1);
165
-
line-height: 1;
166
-
padding-top: 0.5rem;
167
88
}
168
89
169
90
h1,
170
91
h2,
171
92
h3 {
172
-
margin-bottom: 0.75rem;
173
-
padding-bottom: 0.25rem;
174
-
border-bottom: 1px solid var(--dc-bg-3);
93
+
padding-block-end: 0.125rem;
94
+
border-block-end: 1px solid var(--dc-bg-3);
95
+
line-height: 1;
175
96
}
176
97
177
98
article h1,
178
99
article h2,
179
100
article h3 {
180
-
padding-bottom: 0;
181
-
border-bottom: none;
182
-
}
183
-
184
-
h4,
185
-
h5,
186
-
h6 {
187
-
margin-bottom: 0.5rem;
101
+
padding-block-end: 0.125rem;
102
+
border-block-end: none;
188
103
}
189
104
190
105
a {
191
106
color: var(--dc-lk-1);
192
-
text-decoration: none;
193
-
}
194
-
195
-
a:hover {
196
-
text-decoration: underline;
197
-
}
198
-
199
-
@supports not (color: light-dark(#fff, #000)) {
200
-
a {
201
-
text-decoration: underline;
202
-
}
203
107
}
204
108
205
109
mark {
···
209
113
color: var(--dc-ac-tx);
210
114
}
211
115
212
-
::selection {
213
-
background: var(--dc-ac-1);
214
-
color: var(--dc-ac-tx);
215
-
}
216
-
217
-
/* 6. document */
116
+
/* 3. document */
218
117
body {
219
118
max-width: 48rem;
220
119
margin: 1rem auto 0;
···
235
134
}
236
135
237
136
header > *:not(:last-child) {
238
-
margin-bottom: 0.25rem;
137
+
margin-block-end: 0.25rem;
239
138
}
240
139
241
140
header h1,
242
141
header h2,
243
142
header h3 {
244
-
border-bottom: none;
245
-
padding-bottom: 0;
246
-
}
247
-
248
-
footer > *:last-child {
249
-
margin-bottom: 0;
143
+
border-block-end: none;
144
+
padding-block-end: 0;
250
145
}
251
146
252
147
header nav ul,
···
269
164
margin: 0 0.25em;
270
165
}
271
166
167
+
article {
168
+
margin-block: 1rem;
169
+
}
170
+
272
171
main,
273
172
article {
274
-
padding: 1.5rem;
173
+
padding-inline: 1.5rem;
275
174
background: var(--dc-bg-1);
276
175
border: 1px solid var(--dc-bg-3);
277
176
border-radius: 0.25rem;
···
282
181
border-radius: 0.375rem;
283
182
}
284
183
285
-
main > *:last-child,
286
-
article > *:last-child {
287
-
margin-bottom: 0;
288
-
}
289
-
290
184
@media only screen and (max-width: 48rem) {
291
185
main {
292
186
margin: -1rem;
···
296
190
297
191
header {
298
192
background-color: var(--dc-bg-1);
299
-
border-bottom: 1px solid var(--dc-bg-3);
300
-
margin-bottom: 1rem;
193
+
border-block-end: 1px solid var(--dc-bg-3);
194
+
margin-block-end: 1rem;
301
195
}
302
196
303
197
footer {
304
-
margin-top: 1rem;
305
-
padding-top: 1rem;
306
-
border-top: 1px solid var(--dc-bg-3);
198
+
border-block-start: 1px solid var(--dc-bg-3);
307
199
}
308
200
309
201
main,
···
327
219
}
328
220
}
329
221
330
-
/* 7. blockquotes */
222
+
/* 4. blockquotes */
331
223
blockquote {
332
-
padding: 1.25rem;
224
+
padding: 1rem;
225
+
margin-inline: 0;
333
226
background: var(--dc-bg-2);
334
227
border: 1px solid var(--dc-bg-3);
335
-
border-left: 5px solid var(--dc-bg-3);
228
+
border-inline-start: 5px solid var(--dc-bg-3);
336
229
border-radius: 0.375rem;
337
230
}
338
231
339
-
blockquote > *:last-child {
340
-
padding-bottom: 0;
341
-
margin-bottom: 0;
232
+
/* 5. buttons and inputs */
233
+
input,
234
+
button,
235
+
textarea,
236
+
select {
237
+
font: inherit;
342
238
}
343
239
344
-
/* 8. buttons and inputs */
345
-
a button,
346
240
button,
347
241
input[type="submit"],
348
242
input[type="reset"],
···
351
245
padding: 0.25rem 0.75rem;
352
246
text-align: center;
353
247
text-decoration: none;
354
-
white-space: nowrap;
355
248
background: var(--dc-lkb-1);
356
249
color: var(--dc-lkb-tx);
357
250
border: 0;
···
360
253
cursor: pointer;
361
254
}
362
255
363
-
a button[disabled],
364
256
button[disabled],
365
257
input[type="submit"][disabled],
366
258
input[type="reset"][disabled],
···
386
278
select,
387
279
input {
388
280
padding: 0.25rem 0.5rem;
389
-
margin-bottom: 0.5rem;
390
281
background: var(--dc-bg-2);
391
282
color: var(--dc-tx-2);
392
283
border: 1px solid var(--dc-bg-3);
···
404
295
accent-color: var(--dc-ac-1);
405
296
}
406
297
407
-
/* 9. code and keyboards */
298
+
/* 6. code and keyboards */
408
299
code,
409
300
samp,
410
301
kbd,
···
413
304
border: 1px solid var(--dc-bg-3);
414
305
border-radius: 0.375rem;
415
306
padding: 0.125rem 0.25rem;
416
-
tab-size: 2;
307
+
tab-size: 4;
417
308
}
418
309
419
310
kbd {
420
-
border-bottom: 3px solid var(--dc-bg-3);
311
+
border-block-end: 3px solid var(--dc-bg-3);
421
312
}
422
313
423
314
pre {
424
-
padding: 1rem 1.5rem;
315
+
padding: 1rem;
425
316
max-width: 100%;
426
317
overflow: auto;
427
318
}
···
431
322
border: 0;
432
323
}
433
324
434
-
/* 10. details */
325
+
/* 7. details */
326
+
details {
327
+
margin-block: 1rem;
328
+
}
329
+
435
330
details:not(aside details) {
436
-
padding: 0.5rem 1rem;
331
+
padding: 1rem;
437
332
background: var(--dc-bg-2);
438
333
border: 1px solid var(--dc-bg-3);
439
334
border-radius: 0.375rem;
335
+
}
336
+
337
+
aside details {
338
+
margin-block-start: 0;
440
339
}
441
340
442
341
summary {
···
444
343
font-weight: bold;
445
344
}
446
345
447
-
details[open] > summary {
448
-
margin-bottom: 0.5rem;
449
-
}
450
-
451
-
details[open] > *:first-child {
452
-
margin-top: 0;
346
+
details[open] > :last-child {
347
+
margin-block-end: 0;
453
348
}
454
349
455
-
details[open] > *:last-child {
456
-
margin-bottom: 0;
457
-
}
458
-
459
-
/* 11. description lists */
350
+
/* 8. description lists */
460
351
dt {
461
352
font-weight: bold;
462
353
}
···
465
356
content: "→ ";
466
357
}
467
358
468
-
/* 12. horizontal rules */
359
+
/* 9. horizontal rules */
469
360
hr {
470
361
border: 0;
471
-
border-bottom: 2px solid var(--dc-bg-3);
362
+
border-block-end: 2px solid var(--dc-bg-3);
472
363
}
473
364
474
-
/* 13. fieldsets */
365
+
/* 10. fieldsets */
475
366
fieldset {
476
-
margin-top: 1rem;
477
-
padding: 2rem;
367
+
padding: 1rem;
478
368
border: 1px solid var(--dc-bg-3);
479
369
border-radius: 0.375rem;
480
370
}
···
483
373
padding: auto 0.5rem;
484
374
}
485
375
486
-
/* 14. tables */
376
+
/* 11. tables */
487
377
table {
488
378
border-collapse: collapse;
489
379
width: 100%;
···
506
396
507
397
table caption {
508
398
font-weight: bold;
509
-
margin-bottom: 0.5rem;
510
399
}
511
400
512
-
/* 15. lists */
401
+
/* 12. lists */
513
402
ol,
514
403
ul {
515
-
padding-left: 2rem;
404
+
padding-inline-start: 2rem;
516
405
}
517
406
518
407
li {
519
408
margin-top: 0.4rem;
520
409
}
521
410
522
-
ul ul,
523
-
ol ul,
524
-
ul ol,
525
-
ol ol {
526
-
margin-bottom: 0;
411
+
/* 13. media */
412
+
img,
413
+
picture,
414
+
video,
415
+
canvas,
416
+
svg {
417
+
max-width: 100%;
418
+
height: auto;
527
419
}
+28
-17
index.html
+28
-17
index.html
···
18
18
<meta name="language" content="English" />
19
19
<meta name="author" content="intergrav" />
20
20
<link rel="stylesheet" href="dev.css" />
21
-
<script src="addon/responsive-sidebar.js"></script>
22
21
</head>
23
22
24
23
<body>
25
24
<header>
26
25
<h1>dev.css</h1>
27
-
<p>A lightweight, classless CSS framework.</p>
26
+
<p>A lightweight, simple, classless CSS framework.</p>
28
27
<nav>
29
28
<ul>
30
29
<li><a href="https://tangled.org/devins.page/dev.css">git</a></li>
···
45
44
<summary>Sidebar</summary>
46
45
<p>
47
46
Optional sidebar that you can use for pretty much anything. See the
48
-
README on GitHub for more information.
47
+
README for more information.
49
48
</p>
50
49
<ul>
51
50
<li><a href="https://example.org">Page 1</a></li>
···
292
291
293
292
<form>
294
293
<p>
295
-
<em>
296
-
This is not a real form and does not submit or save any
297
-
information.
298
-
</em>
299
-
</p>
300
-
<p>
301
294
<label>First name</label><br />
302
295
<input type="text" name="first_name" />
303
296
</p>
···
365
358
<hr />
366
359
<br />
367
360
361
+
<form>
362
+
<fieldset>
363
+
<legend>Fieldset:</legend>
364
+
<label for="fname">First name:</label>
365
+
<input type="text" id="fname" name="fname" /><br /><br />
366
+
<label for="lname">Last name:</label>
367
+
<input type="text" id="lname" name="lname" /><br /><br />
368
+
<label for="email">Email:</label>
369
+
<input type="email" id="email" name="email" /><br /><br />
370
+
<label for="birthday">Birthday:</label>
371
+
<input type="date" id="birthday" name="birthday" /><br /><br />
372
+
<input type="submit" value="Submit" />
373
+
</fieldset>
374
+
</form>
375
+
376
+
<br />
377
+
<hr />
378
+
<br />
379
+
368
380
<figure>
369
381
<img
370
-
alt="Apple and walnut orchards after a night of snowfall in Sangla in the Kinnaur district of the northern Indian state of Himachal Pradesh."
371
-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Orchards_in_snow%2C_Sangla%2C_Himachal_Pradesh%2C_India.jpg/1024px-Orchards_in_snow%2C_Sangla%2C_Himachal_Pradesh%2C_India.jpg?20250409065119"
382
+
alt="Mount Fuji"
383
+
src="https://upload.wikimedia.org/wikipedia/commons/3/36/Lake_Kawaguchiko_Sakura_Mount_Fuji_4.JPG"
372
384
/>
373
385
<figcaption>
374
-
Photo by
375
386
<a
376
-
href="https://commons.wikimedia.org/wiki/File:Orchards_in_snow,_Sangla,_Himachal_Pradesh,_India.jpg"
377
-
>UnpetitproleX</a
387
+
href="https://commons.wikimedia.org/wiki/File:Lake_Kawaguchiko_Sakura_Mount_Fuji_4.JPG"
388
+
>Midori</a
378
389
>,
379
-
<a href="https://creativecommons.org/licenses/by-sa/4.0"
380
-
>CC BY-SA 4.0</a
381
-
>, via Wikimedia Commons
390
+
<a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>,
391
+
via Wikimedia Commons
382
392
</figcaption>
383
393
</figure>
384
394
</section>
···
392
402
</p>
393
403
</footer>
394
404
</body>
405
+
<script src="addon/responsive-sidebar.js"></script>
395
406
</html>
+1
-1
package.json
+1
-1
package.json
+24
pnpm-lock.yaml
+24
pnpm-lock.yaml
···
1
+
lockfileVersion: "9.0"
2
+
3
+
settings:
4
+
autoInstallPeers: true
5
+
excludeLinksFromLockfile: false
6
+
7
+
importers:
8
+
.:
9
+
devDependencies:
10
+
prettier:
11
+
specifier: ^3.8.1
12
+
version: 3.8.1
13
+
14
+
packages:
15
+
prettier@3.8.1:
16
+
resolution:
17
+
{
18
+
integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==,
19
+
}
20
+
engines: { node: ">=14" }
21
+
hasBin: true
22
+
23
+
snapshots:
24
+
prettier@3.8.1: {}
+7
shell.nix
+7
shell.nix
+4
-6
theme/boilerplate.user.css
+4
-6
theme/boilerplate.user.css
···
11
11
12
12
:root {
13
13
/* font families */
14
-
--dc-font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
15
-
--dc-font-mono:
16
-
"Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
17
-
Consolas, "DejaVu Sans Mono", monospace;
14
+
--dc-font: ui-sans-serif, system-ui, sans-serif;
15
+
--dc-font-mono: ui-monospace, monospace;
18
16
19
17
/* light/dark colors */
20
-
--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
18
+
color-scheme: light dark; /* light/dark scrollbars, inputs, etc */
21
19
--dc-tx-1: light-dark(#171717, #ededed); /* primary text */
22
20
--dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */
23
21
--dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */
24
22
--dc-bg-2: light-dark(#fafafa, #000); /* secondary background */
25
-
--dc-bg-3: light-dark(#ebebeb, #2e2e2e); /* border */
23
+
--dc-bg-3: light-dark(#ebebeb, #575757); /* border */
26
24
--dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */
27
25
--dc-lkb-1: light-dark(#006bff, #006efe); /* link button */
28
26
--dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */
+2
-2
theme/catppuccin-frappe.user.css
+2
-2
theme/catppuccin-frappe.user.css
···
3
3
@description dev.css theme based on catppuccin's frappé and latte colors - https://github.com/catppuccin
4
4
@namespace intergrav
5
5
@version 1.0.0
6
-
@author intergrav <intergrav@proton.me> (https://devins.page)
6
+
@author intergrav <devin@devins.page> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
8
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
···
11
11
12
12
:root {
13
13
/* colors - latte and frappé */
14
-
--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
14
+
color-scheme: light dark; /* light/dark scrollbars, inputs, etc */
15
15
--dc-tx-1: light-dark(#4c4f69, #c6d0f5); /* primary text | Text */
16
16
--dc-tx-2: light-dark(#4c4f69, #c6d0f5); /* secondary text | Text */
17
17
--dc-bg-1: light-dark(#eff1f5, #303446); /* primary background | Base */
+2
-2
theme/catppuccin-macchiato.user.css
+2
-2
theme/catppuccin-macchiato.user.css
···
3
3
@description dev.css theme based on catppuccin's macchiato and latte colors - https://github.com/catppuccin
4
4
@namespace intergrav
5
5
@version 1.0.0
6
-
@author intergrav <intergrav@proton.me> (https://devins.page)
6
+
@author intergrav <devin@devins.page> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
8
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
···
11
11
12
12
:root {
13
13
/* colors - latte and macchiato */
14
-
--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
14
+
color-scheme: light dark; /* light/dark scrollbars, inputs, etc */
15
15
--dc-tx-1: light-dark(#4c4f69, #cad3f5); /* primary text | Text */
16
16
--dc-tx-2: light-dark(#4c4f69, #cad3f5); /* secondary text | Text */
17
17
--dc-bg-1: light-dark(#eff1f5, #24273a); /* primary background | Base */
+2
-2
theme/catppuccin-mocha.user.css
+2
-2
theme/catppuccin-mocha.user.css
···
3
3
@description dev.css theme based on catppuccin's mocha and latte colors - https://github.com/catppuccin
4
4
@namespace intergrav
5
5
@version 1.0.0
6
-
@author intergrav <intergrav@proton.me> (https://devins.page)
6
+
@author intergrav <devin@devins.page> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
8
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
···
11
11
12
12
:root {
13
13
/* colors - latte and mocha */
14
-
--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
14
+
color-scheme: light dark; /* light/dark scrollbars, inputs, etc */
15
15
--dc-tx-1: light-dark(#4c4f69, #cdd6f4); /* primary text | Text */
16
16
--dc-tx-2: light-dark(#4c4f69, #cdd6f4); /* secondary text | Text */
17
17
--dc-bg-1: light-dark(#eff1f5, #1e1e2e); /* primary background | Base */
+2
-2
theme/day.user.css
+2
-2
theme/day.user.css
···
3
3
@description dev.css theme that makes it always light mode regardless of device setting
4
4
@namespace intergrav
5
5
@version 1.0.0
6
-
@author intergrav <intergrav@proton.me> (https://devins.page)
6
+
@author intergrav <devin@devins.page> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
8
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
···
11
11
12
12
:root {
13
13
/* colors */
14
-
--dc-cs: light;
14
+
color-scheme: light;
15
15
--dc-tx-1: #171717;
16
16
--dc-tx-2: #666;
17
17
--dc-bg-1: #fff;
+3
-3
theme/night.user.css
+3
-3
theme/night.user.css
···
3
3
@description dev.css theme that makes it always dark mode regardless of device setting
4
4
@namespace intergrav
5
5
@version 1.0.0
6
-
@author intergrav <intergrav@proton.me> (https://devins.page)
6
+
@author intergrav <devin@devins.page> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
8
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
···
11
11
12
12
:root {
13
13
/* colors */
14
-
--dc-cs: dark;
14
+
color-scheme: dark;
15
15
--dc-tx-1: #ededed;
16
16
--dc-tx-2: #a1a1a1;
17
17
--dc-bg-1: #0a0a0a;
18
18
--dc-bg-2: #000;
19
-
--dc-bg-3: #2e2e2e;
19
+
--dc-bg-3: #575757;
20
20
--dc-lk-1: #47a8ff;
21
21
--dc-lkb-1: #006efe;
22
22
--dc-lkb-2: #005be7;
+2
-2
theme/terminal.user.css
+2
-2
theme/terminal.user.css
···
3
3
@description dev.css theme that has a similar look to a computer terminal
4
4
@namespace intergrav
5
5
@version 1.0.0
6
-
@author intergrav <intergrav@proton.me> (https://devins.page)
6
+
@author intergrav <devin@devins.page> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
8
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
···
14
14
--dc-font: var(--dc-font-mono);
15
15
16
16
/* colors */
17
-
--dc-cs: dark;
17
+
color-scheme: dark;
18
18
--dc-tx-1: #ffffff;
19
19
--dc-tx-2: #eeeeee;
20
20
--dc-bg-1: #001a00;