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 addon, be sure to include this after it */
4
5@media (min-width: calc((48rem + 4rem) + ((16rem)*2))) {
6 /* unset header */
7 header {
8 all: unset;
9 }
10
11 header {
12 padding: 3rem 2rem;
13 padding-right: 0;
14 position: fixed;
15 top: 0;
16 left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
17 width: 16rem;
18 height: calc(100% - 6rem);
19 overflow-y: auto;
20 }
21
22 header nav ul {
23 padding-left: 1rem;
24 border-top: 1px solid var(--dc-bg-3);
25 padding-top: 1rem;
26 margin-top: 1rem;
27 }
28
29 header nav ul li {
30 display: list-item;
31 }
32
33 header nav ul li:not(:first-child)::before {
34 content: unset;
35 }
36}