@intergrav/dev.css 4.2.5 → 4.3.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 CHANGED
@@ -220,6 +220,17 @@ This addon creates a small "scroll to top" button in the bottom right corner of
220
220
  ></script>
221
221
  ```
222
222
 
223
+ ### `responsive-sidebar.js`
224
+
225
+ This addon automatically opens and closes `<details>` elements inside sidebars at the 82rem breakpoint. This prevents sidebars from looking awkward on wide screens and improves usability on small screens. To use this addon, add the following line after the `dev.css` import:
226
+
227
+ ```html
228
+ <script
229
+ src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/responsive-sidebar.min.js"
230
+ defer
231
+ ></script>
232
+ ```
233
+
223
234
  ## Themes
224
235
 
225
236
  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 night and day themes, a set of Catppuccin themes, and a terminal theme. For example, to apply the terminal theme, add the following line after the `dev.css` import:
@@ -0,0 +1,10 @@
1
+ /* responsive-sidebar for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
2
+ /* about: auto open/close `aside article details` at 82rem breakpoint. prevents sidebar from looking awkward on wide screens, improves usability on small screens */
3
+
4
+ const mediaQuery = matchMedia("(min-width: 82rem)");
5
+ const toggleDetails = (matches) =>
6
+ document
7
+ .querySelectorAll("aside article details")
8
+ .forEach((details) => details.toggleAttribute("open", matches));
9
+ toggleDetails(mediaQuery.matches);
10
+ mediaQuery.addEventListener("change", (event) => toggleDetails(event.matches));
package/dev.css ADDED
@@ -0,0 +1,526 @@
1
+ /* dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
2
+ /* about: tiny, simple, classless CSS framework inspired by new.css */
3
+
4
+ /* table of contents
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
20
+ */
21
+
22
+ /* 1. configurable variables */
23
+ /* adjustable by you! see ./theme/boilerplate.user.css */
24
+ :root {
25
+ /* 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;
30
+
31
+ /* light/dark colors */
32
+ --dc-cs: light dark; /* light and dark scrollbars, inputs, etc */
33
+ --dc-tx-1: light-dark(#171717, #ededed); /* primary text */
34
+ --dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */
35
+ --dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */
36
+ --dc-bg-2: light-dark(#fafafa, #000); /* secondary background */
37
+ --dc-bg-3: light-dark(#ebebeb, #2e2e2e); /* border */
38
+ --dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */
39
+ --dc-lkb-1: light-dark(#006bff, #006efe); /* link button */
40
+ --dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */
41
+ --dc-lkb-tx: light-dark(#fff, #fff); /* text over link button */
42
+ --dc-ac-1: light-dark(#a000f8, #9440d5); /* accent color */
43
+ --dc-ac-tx: light-dark(#fff, #fff); /* text over accent color */
44
+ }
45
+
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
+ }
68
+
69
+ input,
70
+ button,
71
+ textarea,
72
+ select {
73
+ font: inherit;
74
+ }
75
+
76
+ p,
77
+ h1,
78
+ h2,
79
+ h3,
80
+ h4,
81
+ h5,
82
+ h6 {
83
+ overflow-wrap: break-word;
84
+ }
85
+
86
+ p {
87
+ text-wrap: pretty;
88
+ }
89
+
90
+ h1,
91
+ h2,
92
+ h3,
93
+ h4,
94
+ h5,
95
+ h6 {
96
+ text-wrap: balance;
97
+ }
98
+
99
+ #root,
100
+ #__next {
101
+ isolation: isolate;
102
+ }
103
+
104
+ /* 4. margins for most elements */
105
+ address,
106
+ area,
107
+ article,
108
+ audio,
109
+ blockquote,
110
+ datalist,
111
+ details,
112
+ dl,
113
+ fieldset,
114
+ figure,
115
+ footer,
116
+ form,
117
+ header,
118
+ hr,
119
+ input,
120
+ iframe,
121
+ img,
122
+ main,
123
+ meter,
124
+ nav,
125
+ ol,
126
+ optgroup,
127
+ option,
128
+ output,
129
+ p,
130
+ pre,
131
+ progress,
132
+ ruby,
133
+ section,
134
+ table,
135
+ textarea,
136
+ ul,
137
+ video {
138
+ margin-bottom: 1rem;
139
+ }
140
+
141
+ /* 5. typography */
142
+
143
+ body {
144
+ font-family: var(--dc-font);
145
+ color: var(--dc-tx-2);
146
+ line-height: 1.5;
147
+ }
148
+
149
+ code,
150
+ pre,
151
+ kbd,
152
+ samp {
153
+ font-family: var(--dc-font-mono);
154
+ font-size: 0.9rem;
155
+ }
156
+
157
+ h1,
158
+ h2,
159
+ h3,
160
+ h4,
161
+ h5,
162
+ h6 {
163
+ color: var(--dc-tx-1);
164
+ line-height: 1;
165
+ padding-top: 0.5rem;
166
+ }
167
+
168
+ h1,
169
+ h2,
170
+ h3 {
171
+ margin-bottom: 0.75rem;
172
+ padding-bottom: 0.25rem;
173
+ border-bottom: 1px solid var(--dc-bg-3);
174
+ }
175
+
176
+ article h1,
177
+ article h2,
178
+ article h3 {
179
+ padding-bottom: 0;
180
+ border-bottom: none;
181
+ }
182
+
183
+ h4,
184
+ h5,
185
+ h6 {
186
+ margin-bottom: 0.5rem;
187
+ }
188
+
189
+ a {
190
+ color: var(--dc-lk-1);
191
+ text-decoration: none;
192
+ }
193
+
194
+ a:hover {
195
+ text-decoration: underline;
196
+ }
197
+
198
+ @supports not (color: light-dark(#fff, #000)) {
199
+ a {
200
+ text-decoration: underline;
201
+ }
202
+ }
203
+
204
+ mark {
205
+ border-radius: 0.375rem;
206
+ padding: 0.125rem 0.25rem;
207
+ background: var(--dc-ac-1);
208
+ color: var(--dc-ac-tx);
209
+ }
210
+
211
+ ::selection {
212
+ background: var(--dc-ac-1);
213
+ color: var(--dc-ac-tx);
214
+ }
215
+
216
+ /* 6. document */
217
+ body {
218
+ max-width: 48rem;
219
+ margin: 1rem auto 0;
220
+ padding: 0 1rem;
221
+ background: var(--dc-bg-2);
222
+ overflow-x: hidden;
223
+ }
224
+
225
+ header {
226
+ padding: 1rem calc(50vw - 50%);
227
+ margin: 0 calc(50% - 50vw) 0;
228
+ margin-top: -1rem;
229
+ }
230
+
231
+ header * {
232
+ padding: 0;
233
+ margin: 0;
234
+ }
235
+
236
+ header > *:not(:last-child) {
237
+ margin-bottom: 0.25rem;
238
+ }
239
+
240
+ header h1,
241
+ header h2,
242
+ header h3 {
243
+ border-bottom: none;
244
+ padding-bottom: 0;
245
+ }
246
+
247
+ footer > *:last-child {
248
+ margin-bottom: 0;
249
+ }
250
+
251
+ header nav ul,
252
+ footer nav ul {
253
+ display: flex;
254
+ flex-wrap: wrap;
255
+ list-style: none;
256
+ padding: 0;
257
+ }
258
+
259
+ header nav ul li,
260
+ footer nav ul li {
261
+ margin: 0;
262
+ display: flex;
263
+ }
264
+
265
+ header nav ul li:not(:first-child)::before,
266
+ footer nav ul li:not(:first-child)::before {
267
+ content: "•";
268
+ margin: 0 0.25em;
269
+ }
270
+
271
+ main,
272
+ article {
273
+ padding: 1.5rem;
274
+ background: var(--dc-bg-1);
275
+ border: 1px solid var(--dc-bg-3);
276
+ border-radius: 0.25rem;
277
+ }
278
+
279
+ main article {
280
+ background: var(--dc-bg-2);
281
+ border-radius: 0.375rem;
282
+ }
283
+
284
+ main > *:last-child,
285
+ article > *:last-child {
286
+ margin-bottom: 0;
287
+ }
288
+
289
+ @media only screen and (max-width: 48rem) {
290
+ main {
291
+ margin: -1rem;
292
+ background: none;
293
+ border: none;
294
+ }
295
+
296
+ header {
297
+ background-color: var(--dc-bg-1);
298
+ border-bottom: 1px solid var(--dc-bg-3);
299
+ margin-bottom: 1rem;
300
+ }
301
+
302
+ footer {
303
+ margin-top: 1rem;
304
+ padding-top: 1rem;
305
+ border-top: 1px solid var(--dc-bg-3);
306
+ }
307
+
308
+ main,
309
+ article {
310
+ padding: 1rem;
311
+ }
312
+ }
313
+
314
+ @media only screen and (min-width: 82rem) {
315
+ aside {
316
+ position: absolute;
317
+ width: 16rem;
318
+ }
319
+
320
+ aside:nth-child(even) {
321
+ left: calc(50% - ((48rem) / 2) - (16rem));
322
+ }
323
+
324
+ aside:nth-child(odd) {
325
+ right: calc(50% - ((48rem) / 2) - (16rem));
326
+ }
327
+ }
328
+
329
+ /* 7. blockquotes */
330
+ blockquote {
331
+ padding: 1.25rem;
332
+ background: var(--dc-bg-2);
333
+ border: 1px solid var(--dc-bg-3);
334
+ border-left: 5px solid var(--dc-bg-3);
335
+ border-radius: 0.375rem;
336
+ }
337
+
338
+ blockquote > *:last-child {
339
+ padding-bottom: 0;
340
+ margin-bottom: 0;
341
+ }
342
+
343
+ /* 8. buttons and inputs */
344
+ a button,
345
+ button,
346
+ input[type="submit"],
347
+ input[type="reset"],
348
+ input[type="button"] {
349
+ display: inline-block;
350
+ padding: 0.25rem 0.75rem;
351
+ text-align: center;
352
+ text-decoration: none;
353
+ white-space: nowrap;
354
+ background: var(--dc-lkb-1);
355
+ color: var(--dc-lkb-tx);
356
+ border: 0;
357
+ border-radius: 0.375rem;
358
+ box-sizing: border-box;
359
+ cursor: pointer;
360
+ }
361
+
362
+ a button[disabled],
363
+ button[disabled],
364
+ input[type="submit"][disabled],
365
+ input[type="reset"][disabled],
366
+ input[type="button"][disabled] {
367
+ cursor: not-allowed;
368
+ opacity: 0.5;
369
+ }
370
+
371
+ .button:focus,
372
+ .button:enabled:hover,
373
+ button:focus,
374
+ button:enabled:hover,
375
+ input[type="submit"]:focus,
376
+ input[type="submit"]:enabled:hover,
377
+ input[type="reset"]:focus,
378
+ input[type="reset"]:enabled:hover,
379
+ input[type="button"]:focus,
380
+ input[type="button"]:enabled:hover {
381
+ background: var(--dc-lkb-2);
382
+ }
383
+
384
+ textarea,
385
+ select,
386
+ input {
387
+ padding: 0.25rem 0.5rem;
388
+ margin-bottom: 0.5rem;
389
+ background: var(--dc-bg-2);
390
+ color: var(--dc-tx-2);
391
+ border: 1px solid var(--dc-bg-3);
392
+ border-radius: 0.375rem;
393
+ box-shadow: none;
394
+ box-sizing: border-box;
395
+ }
396
+
397
+ textarea {
398
+ max-width: 100%;
399
+ }
400
+
401
+ input,
402
+ progress {
403
+ accent-color: var(--dc-ac-1);
404
+ }
405
+
406
+ /* 9. code and keyboards */
407
+ code,
408
+ samp,
409
+ kbd,
410
+ pre {
411
+ background: var(--dc-bg-2);
412
+ border: 1px solid var(--dc-bg-3);
413
+ border-radius: 0.375rem;
414
+ padding: 0.125rem 0.25rem;
415
+ tab-size: 2;
416
+ }
417
+
418
+ kbd {
419
+ border-bottom: 3px solid var(--dc-bg-3);
420
+ }
421
+
422
+ pre {
423
+ padding: 1rem 1.5rem;
424
+ max-width: 100%;
425
+ overflow: auto;
426
+ }
427
+
428
+ pre code {
429
+ padding: 0;
430
+ border: 0;
431
+ }
432
+
433
+ /* 10. details */
434
+ details:not(aside article details) {
435
+ padding: 0.5rem 1rem;
436
+ background: var(--dc-bg-2);
437
+ border: 1px solid var(--dc-bg-3);
438
+ border-radius: 0.375rem;
439
+ }
440
+
441
+ summary {
442
+ cursor: pointer;
443
+ font-weight: bold;
444
+ }
445
+
446
+ details[open] > summary {
447
+ margin-bottom: 0.5rem;
448
+ }
449
+
450
+ details[open] > *:first-child {
451
+ margin-top: 0;
452
+ }
453
+
454
+ details[open] > *:last-child {
455
+ margin-bottom: 0;
456
+ }
457
+
458
+ /* 11. description lists */
459
+ dt {
460
+ font-weight: bold;
461
+ }
462
+
463
+ dd::before {
464
+ content: "→ ";
465
+ }
466
+
467
+ /* 12. horizontal rules */
468
+ hr {
469
+ border: 0;
470
+ border-bottom: 2px solid var(--dc-bg-3);
471
+ }
472
+
473
+ /* 13. fieldsets */
474
+ fieldset {
475
+ margin-top: 1rem;
476
+ padding: 2rem;
477
+ border: 1px solid var(--dc-bg-3);
478
+ border-radius: 0.375rem;
479
+ }
480
+
481
+ legend {
482
+ padding: auto 0.5rem;
483
+ }
484
+
485
+ /* 14. tables */
486
+ table {
487
+ border-collapse: collapse;
488
+ width: 100%;
489
+ }
490
+
491
+ td,
492
+ th {
493
+ border: 1px solid var(--dc-bg-3);
494
+ text-align: left;
495
+ padding: 0.5rem;
496
+ }
497
+
498
+ th {
499
+ background: var(--dc-bg-2);
500
+ }
501
+
502
+ tr:nth-child(even) {
503
+ background: var(--dc-bg-2);
504
+ }
505
+
506
+ table caption {
507
+ font-weight: bold;
508
+ margin-bottom: 0.5rem;
509
+ }
510
+
511
+ /* 15. lists */
512
+ ol,
513
+ ul {
514
+ padding-left: 2rem;
515
+ }
516
+
517
+ li {
518
+ margin-top: 0.4rem;
519
+ }
520
+
521
+ ul ul,
522
+ ol ul,
523
+ ul ol,
524
+ ol ol {
525
+ margin-bottom: 0;
526
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intergrav/dev.css",
3
- "version": "4.2.5",
3
+ "version": "4.3.0",
4
4
  "description": "Tiny, simple, classless CSS framework inspired by new.css.",
5
5
  "keywords": [
6
6
  "css",
@@ -22,7 +22,8 @@
22
22
  "files": [
23
23
  "theme",
24
24
  "addon",
25
- "badge.svg"
25
+ "badge.svg",
26
+ "dev.css"
26
27
  ],
27
28
  "main": "dev.css",
28
29
  "repository": "github:intergrav/dev.css",