devins.page / dev.css
tiny, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet
fork atom

chore: prettier

devins.page 3b2151c4 6e8ba090

+13 -9
unified split
+5 -1
demo.html
··· 17 href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css" 18 /> 19 </head> 20 <body> 21 <header> 22 <h1>dev.css Demo</h1> 23 <nav> 24 - <a>Home</a> / <a>About</a> / <a>Portfolio</a> / <a>Awesome</a> / 25 <a>Sauce</a> 26 </nav> 27 </header>
··· 17 href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css" 18 /> 19 </head> 20 + 21 <body> 22 <header> 23 <h1>dev.css Demo</h1> 24 <nav> 25 + <a>Home</a> 26 + <a>About</a> 27 + <a>Portfolio</a> 28 + <a>Awesome</a> 29 <a>Sauce</a> 30 </nav> 31 </header>
+8 -8
dev.css
··· 19 --dc-d-tx-1: #ededed; 20 --dc-d-tx-2: #a1a1a1; 21 --dc-d-bg-1: #000; 22 - --dc-d-bg-2: #0A0A0A; 23 - --dc-d-bg-3: #2E2E2E; 24 --dc-d-lk-1: #52a8ff; 25 --dc-d-lkb-1: #0072f5; 26 --dc-d-lkb-2: #0062d1; ··· 190 padding-right: calc(50vw - 50%); 191 } 192 193 - header nav a+a::before { 194 content: "• "; 195 color: var(--dc-tx-2); 196 } ··· 274 border-bottom: 0; 275 } 276 277 - header>*:first-child { 278 margin-top: 0; 279 padding-top: 0; 280 } 281 282 - header>*:last-child { 283 margin-bottom: 0; 284 padding-bottom: 0; 285 } ··· 392 margin-bottom: 8px; 393 } 394 395 - details[open]>*:first-child { 396 margin-top: 0; 397 padding-top: 0; 398 } 399 400 - details[open]>*:last-child { 401 margin-bottom: 0; 402 padding-bottom: 0; 403 } ··· 494 495 img { 496 max-width: 100%; 497 - }
··· 19 --dc-d-tx-1: #ededed; 20 --dc-d-tx-2: #a1a1a1; 21 --dc-d-bg-1: #000; 22 + --dc-d-bg-2: #0a0a0a; 23 + --dc-d-bg-3: #2e2e2e; 24 --dc-d-lk-1: #52a8ff; 25 --dc-d-lkb-1: #0072f5; 26 --dc-d-lkb-2: #0062d1; ··· 190 padding-right: calc(50vw - 50%); 191 } 192 193 + header nav a + a::before { 194 content: "• "; 195 color: var(--dc-tx-2); 196 } ··· 274 border-bottom: 0; 275 } 276 277 + header > *:first-child { 278 margin-top: 0; 279 padding-top: 0; 280 } 281 282 + header > *:last-child { 283 margin-bottom: 0; 284 padding-bottom: 0; 285 } ··· 392 margin-bottom: 8px; 393 } 394 395 + details[open] > *:first-child { 396 margin-top: 0; 397 padding-top: 0; 398 } 399 400 + details[open] > *:last-child { 401 margin-bottom: 0; 402 padding-bottom: 0; 403 } ··· 494 495 img { 496 max-width: 100%; 497 + }