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 font sizes to defaults */
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 /* hacky: reset some other stuff to default incase you are using header-oneline.css */
73 header h2 header h3,
74 header h4,
75 header h5,
76 header h6 {
77 color: var(--dc-tx-1);
78 font-weight: bold;
79 }
80
81 header h1,
82 header h2,
83 header h3,
84 header h4,
85 header h5,
86 header h6 {
87 white-space: normal;
88 line-height: 1;
89 }
90
91 header h2::after,
92 header h3::after,
93 header h4::after,
94 header h5::after,
95 header h6::after {
96 content: unset;
97 }
98}