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