lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2/* about: turns the header into a sidebar if the viewport is wide enough */
3/* warn: if using with the header-sticky or header-oneline addon, be sure to include this after it */
4
5@media (min-width: 84rem) {
6 header {
7 all: unset;
8 }
9
10 header * {
11 margin-top: 0;
12 margin-bottom: 0.25rem;
13 }
14
15 header {
16 padding: 3rem 2rem;
17 padding-right: 0;
18 position: fixed;
19 top: 0;
20 left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
21 width: 16rem;
22 height: calc(100% - 6rem);
23 overflow-y: auto;
24 }
25
26 header nav ul {
27 padding-left: 1rem;
28 border-top: 1px solid var(--dc-bg-3);
29 padding-top: 1rem;
30 margin-top: 0.75rem;
31 }
32
33 header nav ul li {
34 display: list-item;
35 }
36
37 header nav ul li:not(:first-child)::before {
38 content: unset;
39 }
40
41 /* hacky: reset stuff to default incase you are using header-oneline.css */
42 h1 {
43 font-size: 2rem !important;
44 }
45
46 h2 {
47 font-size: 1.5rem !important;
48 }
49
50 h3 {
51 font-size: 1.17rem !important;
52 }
53
54 h4,
55 p,
56 a {
57 font-size: 1rem !important;
58 }
59
60 h5 {
61 font-size: 0.83rem !important;
62 }
63
64 h6 {
65 font-size: 0.67rem !important;
66 }
67
68 header nav {
69 font-size: 1rem !important;
70 }
71
72 header h2 header h3,
73 header h4,
74 header h5,
75 header h6 {
76 color: var(--dc-tx-1);
77 font-weight: bold;
78 }
79
80 header h1,
81 header h2,
82 header h3,
83 header h4,
84 header h5,
85 header h6 {
86 white-space: normal;
87 line-height: 1;
88 }
89
90 header h2::after,
91 header h3::after,
92 header h4::after,
93 header h5::after,
94 header h6::after {
95 content: unset;
96 }
97}