lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1:root {
2 /* Fonts - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */
3 --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
4 "Segoe UI", sans-serif;
5 --dc-font-mono: "Geist Mono", monospace;
6 /* Light colors */
7 --dc-tx-1: #000000;
8 --dc-tx-2: #1a1a1a;
9 --dc-bg-1: #fafafa;
10 --dc-bg-2: #fff;
11 --dc-bg-3: #ebebeb;
12 --dc-lk-1: #0068d6;
13 --dc-lkb-1: #0072f5;
14 --dc-lkb-2: #0062d1;
15 --dc-lkb-tx: #ededed;
16 --dc-ac-1: #8e4ec6;
17 --dc-ac-tx: #ededed;
18 /* Dark colors */
19 --dc-d-tx-1: #ededed;
20 --dc-d-tx-2: #a1a1a1;
21 --dc-d-bg-1: #000;
22 --dc-d-bg-2: #ffffff0f;
23 --dc-d-bg-3: #2e2e2e;
24 --dc-d-lk-1: #52a8ff;
25 --dc-d-lkb-1: #0072f5;
26 --dc-d-lkb-2: #0062d1;
27 --dc-d-lkb-tx: #ededed;
28 --dc-d-ac-1: #8e4ec6;
29 --dc-d-ac-tx: #ededed;
30}
31
32@media (prefers-color-scheme: dark) {
33 :root {
34 --dc-tx-1: var(--dc-d-tx-1);
35 --dc-tx-2: var(--dc-d-tx-2);
36 --dc-bg-1: var(--dc-d-bg-1);
37 --dc-bg-2: var(--dc-d-bg-2);
38 --dc-bg-3: var(--dc-d-bg-3);
39 --dc-lk-1: var(--dc-d-lk-1);
40 --dc-lkb-1: var(--dc-d-lkb-1);
41 --dc-lkb-2: var(--dc-d-lkb-2);
42 --dc-lkb-tx: var(--dc-d-lkb-tx);
43 --dc-ac-1: var(--dc-d-ac-1);
44 --dc-ac-tx: var(--dc-d-ac-tx);
45 }
46}
47
48* {
49 margin: 0;
50 padding: 0;
51}
52
53address,
54area,
55article,
56aside,
57audio,
58blockquote,
59datalist,
60details,
61dl,
62fieldset,
63figure,
64form,
65input,
66iframe,
67img,
68meter,
69nav,
70ol,
71optgroup,
72option,
73output,
74p,
75pre,
76progress,
77ruby,
78section,
79table,
80textarea,
81ul,
82video {
83 margin-bottom: 1rem;
84}
85
86html,
87input,
88select,
89button {
90 font-family: var(--dc-font-sans);
91}
92
93body {
94 margin: 0 auto;
95 max-width: 750px;
96 padding: 2rem;
97 border-radius: 4px;
98 overflow-x: hidden;
99 word-break: break-word;
100 overflow-wrap: break-word;
101 background: var(--dc-bg-1);
102 color: var(--dc-tx-2);
103 font-size: 1.03rem;
104 line-height: 1.5;
105}
106
107::selection {
108 background: var(--dc-ac-1);
109 color: var(--dc-ac-tx);
110}
111
112h1,
113h2,
114h3,
115h4,
116h5,
117h6 {
118 line-height: 1;
119 color: var(--dc-tx-1);
120 padding-top: 0.875rem;
121}
122
123h1,
124h2,
125h3 {
126 padding-bottom: 6px;
127 margin-bottom: 8px;
128 border-bottom: 1px solid var(--dc-bg-3);
129}
130
131h4,
132h5,
133h6 {
134 margin-bottom: 0.3rem;
135}
136
137h1 {
138 font-size: 2.25rem;
139}
140
141h2 {
142 font-size: 1.85rem;
143}
144
145h3 {
146 font-size: 1.55rem;
147}
148
149h4 {
150 font-size: 1.25rem;
151}
152
153h5 {
154 font-size: 1rem;
155}
156
157h6 {
158 font-size: 0.875rem;
159}
160
161a {
162 color: var(--dc-lk-1);
163}
164
165abbr:hover {
166 cursor: help;
167}
168
169blockquote {
170 padding: 1.5rem;
171 background: var(--dc-bg-2);
172 border-left: 5px solid var(--dc-bg-3);
173 border-radius: 4px;
174}
175
176blockquote *:last-child {
177 padding-bottom: 0;
178 margin-bottom: 0;
179}
180
181header {
182 background: var(--dc-bg-2);
183 border-bottom: 1px solid var(--dc-bg-3);
184 padding: 0.75rem;
185 margin: -2rem calc(50% - 50vw) 2rem;
186 padding-left: calc(50vw - 50%);
187 padding-right: calc(50vw - 50%);
188
189 /* Sticky header if supported */
190 position: sticky;
191 top: 0;
192
193 /* Blur for transparent surface if supported */
194 backdrop-filter: blur(16px);
195}
196
197/* Make heading text small if header is not moved to the side */
198@media (max-width: 1451px) {
199 header h1 {
200 font-size: 1.6rem;
201 }
202
203 header h2 {
204 font-size: 1.4rem;
205 }
206
207 header h3 {
208 font-size: 1.2rem;
209 }
210
211 header h4 {
212 font-size: 1rem;
213 }
214}
215
216/* Move header to the side to preserve vertical space, if screen is minimum width 1452px */
217@media (min-width: 1452px) {
218 header {
219 width: 260px;
220 height: auto;
221 position: fixed;
222 left: calc(50% - 725px);
223 background: #ffffff00;
224 border-bottom: 0;
225 padding: 2rem 1.5rem;
226 margin: 0;
227
228 /* Disable blur */
229 backdrop-filter: none;
230 }
231}
232
233header h1,
234header h2,
235header h3 {
236 padding-bottom: 0;
237 border-bottom: 0;
238}
239
240header > *:first-child {
241 margin-top: 0;
242 padding-top: 0;
243}
244
245header > *:last-child {
246 margin-bottom: 0;
247}
248
249a button,
250button,
251input[type="submit"],
252input[type="reset"],
253input[type="button"] {
254 font-size: 1rem;
255 display: inline-block;
256 padding: 6px 12px;
257 text-align: center;
258 text-decoration: none;
259 white-space: nowrap;
260 background: var(--dc-lkb-1);
261 color: var(--dc-lkb-tx);
262 border: 0;
263 border-radius: 4px;
264 box-sizing: border-box;
265 cursor: pointer;
266}
267
268a button[disabled],
269button[disabled],
270input[type="submit"][disabled],
271input[type="reset"][disabled],
272input[type="button"][disabled] {
273 cursor: not-allowed;
274 opacity: 0.5;
275}
276
277.button:focus,
278.button:enabled:hover,
279button:focus,
280button:enabled:hover,
281input[type="submit"]:focus,
282input[type="submit"]:enabled:hover,
283input[type="reset"]:focus,
284input[type="reset"]:enabled:hover,
285input[type="button"]:focus,
286input[type="button"]:enabled:hover {
287 background: var(--dc-lkb-2);
288}
289
290a img {
291 margin-bottom: 0;
292}
293
294code,
295pre,
296kbd,
297samp {
298 font-family: var(--dc-font-mono);
299}
300
301code,
302samp,
303kbd,
304pre {
305 background: var(--dc-bg-2);
306 border: 1px solid var(--dc-bg-3);
307 border-radius: 4px;
308 padding: 3px 6px;
309 font-size: 0.9em;
310}
311
312kbd {
313 border-bottom: 3px solid var(--dc-bg-3);
314}
315
316pre {
317 padding: 1rem 1.4rem;
318 max-width: 100%;
319 overflow: auto;
320}
321
322pre code {
323 background: inherit;
324 font-size: inherit;
325 color: inherit;
326 border: 0;
327 padding: 0;
328 margin: 0;
329}
330
331code pre {
332 display: inline;
333 background: inherit;
334 font-size: inherit;
335 color: inherit;
336 border: 0;
337 padding: 0;
338 margin: 0;
339}
340
341details {
342 padding: 0.6rem 1rem;
343 background: var(--dc-bg-2);
344 border: 1px solid var(--dc-bg-3);
345 border-radius: 4px;
346}
347
348summary {
349 cursor: pointer;
350 font-weight: bold;
351}
352
353details[open] {
354 padding-bottom: 0.75rem;
355}
356
357details[open] summary {
358 margin-bottom: 6px;
359}
360
361details[open] > *:last-child {
362 margin-bottom: 0;
363}
364
365dt {
366 font-weight: bold;
367}
368
369dd::before {
370 content: "→ ";
371}
372
373hr {
374 border: 0;
375 border-bottom: 1px solid var(--dc-bg-3);
376 margin: 1rem auto;
377}
378
379fieldset {
380 margin-top: 1rem;
381 padding: 2rem;
382 border: 1px solid var(--dc-bg-3);
383 border-radius: 4px;
384}
385
386legend {
387 padding: auto 0.5rem;
388}
389
390table {
391 border-collapse: collapse;
392 width: 100%;
393}
394
395td,
396th {
397 border: 1px solid var(--dc-bg-3);
398 text-align: left;
399 padding: 0.5rem;
400}
401
402th {
403 background: var(--dc-bg-2);
404}
405
406tr:nth-child(even) {
407 background: var(--dc-bg-2);
408}
409
410table caption {
411 font-weight: bold;
412 margin-bottom: 0.5rem;
413}
414
415textarea {
416 max-width: 100%;
417}
418
419ol,
420ul {
421 padding-left: 2rem;
422}
423
424li {
425 margin-top: 0.4rem;
426}
427
428ul ul,
429ol ul,
430ul ol,
431ol ol {
432 margin-bottom: 0;
433}
434
435mark {
436 padding: 3px 6px;
437 background: var(--dc-ac-1);
438 color: var(--dc-ac-tx);
439 border-radius: 4px;
440}
441
442textarea,
443select,
444input {
445 padding: 6px 12px;
446 margin-bottom: 0.5rem;
447 background: var(--dc-bg-2);
448 color: var(--dc-tx-2);
449 border: 1px solid var(--dc-bg-3);
450 border-radius: 4px;
451 box-shadow: none;
452 box-sizing: border-box;
453}
454
455img {
456 max-width: 100%;
457}