tangled
alpha
login
or
join now
devins.page
/
dev.css
tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1
fork
atom
overview
issues
pulls
pipelines
chore: cleanup and reorganize
devins.page
11 months ago
73758291
025af1ce
+76
-88
1 changed file
expand all
collapse all
unified
split
dev.css
+76
-88
dev.css
···
13
13
4. margins for most elements
14
14
5. typography
15
15
6. document
16
16
-
7. header
17
17
-
8. footer
18
18
-
9. blockquotes
19
19
-
10. buttons and inputs
20
20
-
11. code and keyboards
21
21
-
12. details
22
22
-
13. description lists
23
23
-
14. horizontal rules
24
24
-
15. fieldsets
25
25
-
16. tables
26
26
-
17. lists
16
16
+
7. blockquotes
17
17
+
8 buttons and inputs
18
18
+
9. code and keyboards
19
19
+
10. details
20
20
+
11. description lists
21
21
+
12. horizontal rules
22
22
+
13. fieldsets
23
23
+
14. tables
24
24
+
15. lists
27
25
*/
28
26
29
27
/* 1. configurable variables */
···
225
223
overflow-x: hidden;
226
224
}
227
225
228
228
-
main,
229
229
-
aside {
230
230
-
padding: 1.5rem;
231
231
-
background: var(--dc-bg-1);
232
232
-
border: 1px solid var(--dc-bg-3);
233
233
-
border-radius: 0.25rem;
234
234
-
}
235
235
-
236
236
-
article {
237
237
-
padding: 1rem;
238
238
-
background: var(--dc-bg-2);
239
239
-
border: 1px solid var(--dc-bg-3);
240
240
-
border-radius: 0.375rem;
241
241
-
}
242
242
-
243
243
-
article > *:last-child,
244
244
-
aside > *:last-child,
245
245
-
main > *:last-child {
246
246
-
margin-bottom: 0;
247
247
-
}
248
248
-
249
249
-
@media only screen and (max-width: 48rem) {
250
250
-
main {
251
251
-
margin: -1rem;
252
252
-
margin-bottom: 0rem;
253
253
-
background: none;
254
254
-
border: none;
255
255
-
}
256
256
-
257
257
-
aside {
258
258
-
margin-top: 1rem;
259
259
-
margin-bottom: 1rem;
260
260
-
}
261
261
-
262
262
-
header {
263
263
-
background-color: var(--dc-bg-1);
264
264
-
border-bottom: 1px solid var(--dc-bg-3);
265
265
-
}
266
266
-
}
267
267
-
268
268
-
aside h1,
269
269
-
aside h2,
270
270
-
aside h3 {
271
271
-
padding-bottom: 0;
272
272
-
border-bottom: none;
273
273
-
}
274
274
-
275
275
-
@media only screen and (min-width: 82rem) {
276
276
-
aside {
277
277
-
position: absolute;
278
278
-
left: calc(50% - ((48rem) / 2) - (16rem));
279
279
-
width: 16rem;
280
280
-
overflow-y: auto;
281
281
-
}
282
282
-
}
283
283
-
284
284
-
/* 7. header */
285
285
-
286
226
header {
287
227
padding: 1rem calc(50vw - 50%);
288
288
-
margin: 0rem calc(50% - 50vw) 1rem;
228
228
+
margin: 0rem calc(50% - 50vw) 0rem;
289
229
}
290
230
291
231
header * {
···
317
257
content: "• ";
318
258
}
319
259
320
320
-
@media only screen and (max-width: 48rem) {
321
321
-
main,
322
322
-
aside {
323
323
-
padding: 1rem;
324
324
-
}
325
325
-
}
326
326
-
327
327
-
/* 8. footer */
328
328
-
329
260
footer > *:last-child {
330
261
margin-bottom: 0;
331
262
}
···
343
274
content: "• ";
344
275
}
345
276
346
346
-
/* 9. blockquotes */
277
277
+
main,
278
278
+
aside {
279
279
+
padding: 1.5rem;
280
280
+
background: var(--dc-bg-1);
281
281
+
border: 1px solid var(--dc-bg-3);
282
282
+
border-radius: 0.25rem;
283
283
+
}
284
284
+
285
285
+
article {
286
286
+
padding: 1rem;
287
287
+
background: var(--dc-bg-2);
288
288
+
border: 1px solid var(--dc-bg-3);
289
289
+
border-radius: 0.375rem;
290
290
+
}
291
291
+
292
292
+
article > *:last-child,
293
293
+
aside > *:last-child,
294
294
+
main > *:last-child {
295
295
+
margin-bottom: 0;
296
296
+
}
297
297
+
298
298
+
aside h1,
299
299
+
aside h2,
300
300
+
aside h3 {
301
301
+
padding-bottom: 0;
302
302
+
border-bottom: none;
303
303
+
}
304
304
+
305
305
+
@media only screen and (max-width: 48rem) {
306
306
+
main {
307
307
+
margin: -1rem;
308
308
+
margin-bottom: 0rem;
309
309
+
background: none;
310
310
+
border: none;
311
311
+
}
312
312
+
313
313
+
header {
314
314
+
background-color: var(--dc-bg-1);
315
315
+
border-bottom: 1px solid var(--dc-bg-3);
316
316
+
margin: 0rem calc(50% - 50vw) 1rem !important;
317
317
+
}
318
318
+
319
319
+
main,
320
320
+
aside {
321
321
+
padding: 1rem;
322
322
+
}
323
323
+
}
324
324
+
325
325
+
@media only screen and (min-width: 82rem) {
326
326
+
aside {
327
327
+
position: absolute;
328
328
+
left: calc(50% - ((48rem) / 2) - (16rem));
329
329
+
width: 16rem;
330
330
+
overflow-y: auto;
331
331
+
}
332
332
+
}
333
333
+
334
334
+
/* 7. blockquotes */
347
335
blockquote {
348
336
padding: 1.25rem;
349
337
background: var(--dc-bg-2);
···
357
345
margin-bottom: 0;
358
346
}
359
347
360
360
-
/* 10. buttons and inputs */
348
348
+
/* 8. buttons and inputs */
361
349
a button,
362
350
button,
363
351
input[type="submit"],
···
420
408
accent-color: var(--dc-ac-1);
421
409
}
422
410
423
423
-
/* 11. code and keyboards */
411
411
+
/* 9. code and keyboards */
424
412
code,
425
413
samp,
426
414
kbd,
···
447
435
border: 0;
448
436
}
449
437
450
450
-
/* 12. details */
438
438
+
/* 10. details */
451
439
details {
452
440
padding: 0.5rem 1rem;
453
441
background: var(--dc-bg-2);
···
474
462
padding-bottom: 0;
475
463
}
476
464
477
477
-
/* 13. description lists */
465
465
+
/* 11. description lists */
478
466
dt {
479
467
font-weight: bold;
480
468
}
···
483
471
content: "→ ";
484
472
}
485
473
486
486
-
/* 14. horizontal rules */
474
474
+
/* 12 horizontal rules */
487
475
hr {
488
476
border: 0;
489
477
border-bottom: 2px solid var(--dc-bg-3);
490
478
}
491
479
492
492
-
/* 15. fieldsets */
480
480
+
/* 13. fieldsets */
493
481
fieldset {
494
482
margin-top: 1rem;
495
483
padding: 2rem;
···
501
489
padding: auto 0.5rem;
502
490
}
503
491
504
504
-
/* 16. tables */
492
492
+
/* 14. tables */
505
493
table {
506
494
border-collapse: collapse;
507
495
width: 100%;
···
527
515
margin-bottom: 0.5rem;
528
516
}
529
517
530
530
-
/* 17. lists */
518
518
+
/* 15. lists */
531
519
ol,
532
520
ul {
533
521
padding-left: 2rem;