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