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

feat: remove sticky header, other improvements

sticky header can take up a lot of space and the blurry background and take a performance hit, and it's not supported on older browsers so i just removed it instead

also a ton of other improvements and cleanup and consistency stuff idk

+53 -38
+53 -38
dev.css
··· 1 1 :root { 2 - /* Fonts - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */ 2 + /* Font families - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */ 3 3 --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, 4 4 "Segoe UI", sans-serif; 5 5 --dc-font-mono: "Geist Mono", monospace; ··· 19 19 --dc-d-tx-1: #ededed; 20 20 --dc-d-tx-2: #a1a1a1; 21 21 --dc-d-bg-1: #000; 22 - --dc-d-bg-2: #ffffff0f; 23 - --dc-d-bg-3: #ffffff24; 22 + --dc-d-bg-2: #0A0A0A; 23 + --dc-d-bg-3: #2E2E2E; 24 24 --dc-d-lk-1: #52a8ff; 25 25 --dc-d-lkb-1: #0072f5; 26 26 --dc-d-lkb-2: #0062d1; ··· 174 174 blockquote { 175 175 padding: 1.5rem; 176 176 background: var(--dc-bg-2); 177 - border-left: 5px solid var(--dc-bg-3); 177 + border: 1px solid var(--dc-bg-3); 178 + border-left: 6px solid var(--dc-bg-3); 178 179 border-radius: 4px; 179 180 } 180 181 181 - blockquote *:last-child { 182 - padding-bottom: 0; 183 - margin-bottom: 0; 184 - } 185 - 186 - /* Header mode */ 187 - @media (max-width: 1415px) { 182 + @media (max-width: 1424px) { 188 183 header { 189 184 background: var(--dc-bg-2); 190 185 border-bottom: 1px solid var(--dc-bg-3); 191 - padding-top: 0.75rem; 192 - padding-bottom: 0.55rem; 186 + padding-top: 0.9rem; 187 + padding-bottom: 0.6rem; 193 188 margin: -2rem calc(50% - 50vw) 2rem; 194 189 padding-left: calc(50vw - 50%); 195 190 padding-right: calc(50vw - 50%); 196 - 197 - /* Sticky header if supported */ 198 - position: sticky; 199 - top: 0; 200 - 201 - /* Blur for transparent surface if supported */ 202 - backdrop-filter: blur(16px); 203 191 } 204 192 205 - /* Divide a elements in nav with bullet point */ 206 193 header nav a+a::before { 207 - content: " • "; 194 + content: "• "; 208 195 color: var(--dc-tx-2); 209 196 } 210 197 211 - /* Change header font sizes */ 212 198 header h1 { 213 199 font-size: 1.6rem; 214 200 } 201 + 215 202 header h2 { 216 203 font-size: 1.4rem; 217 204 } 205 + 218 206 header h3 { 219 207 font-size: 1.2rem; 220 208 } 209 + 221 210 header h4 { 222 211 font-size: 1rem; 223 212 } 213 + 214 + header h5 { 215 + font-size: 0.9rem; 216 + } 217 + 218 + header p { 219 + font-size: 1rem; 220 + } 221 + 224 222 header nav { 225 223 font-size: 0.9rem; 226 224 } 225 + 226 + header h6 { 227 + font-size: 0.8rem; 228 + } 229 + 230 + header * { 231 + padding-top: 0.15rem; 232 + padding-bottom: 0.15rem; 233 + margin-top: 0rem; 234 + margin-bottom: 0rem; 235 + } 227 236 } 228 237 229 - /* Sidebar mode*/ 230 - @media (min-width: 1416px) { 238 + @media (min-width: 1425px) { 231 239 header { 232 - /* Style changes */ 233 240 background: none; 234 - border-bottom: 0; 235 241 padding: 2rem 1.5rem; 236 242 margin: 0; 237 - 238 - /* Fixed position on the screen */ 239 243 position: fixed; 240 244 top: 0; 241 245 left: calc(50% - 700px); 242 - width: 260px; 246 + width: 255px; 247 + height: 100%; 243 248 } 244 249 245 - /* Put nav elements in a separate line */ 246 250 header nav { 247 251 display: flex; 248 252 flex-direction: column; 249 253 } 250 254 251 - /* Add dash before nav elements */ 252 255 header nav a::before { 253 256 content: "• "; 254 257 color: var(--dc-tx-2); 255 258 } 259 + 260 + header * { 261 + padding-top: 0.25rem; 262 + padding-bottom: 0.25rem; 263 + margin-top: 0rem; 264 + margin-bottom: 0rem; 265 + } 256 266 } 257 267 258 268 header h1, 259 269 header h2, 260 - header h3 { 261 - padding-bottom: 0; 270 + header h3, 271 + header h4, 272 + header h5, 273 + header h6 { 262 274 border-bottom: 0; 263 275 } 264 276 ··· 269 281 270 282 header>*:last-child { 271 283 margin-bottom: 0; 284 + padding-bottom: 0; 272 285 } 273 286 274 287 a button, ··· 375 388 font-weight: bold; 376 389 } 377 390 378 - details[open] { 379 - padding-bottom: 0.75rem; 391 + details[open] summary { 392 + margin-bottom: 8px; 380 393 } 381 394 382 - details[open] summary { 383 - margin-bottom: 6px; 395 + details[open]>*:first-child { 396 + margin-top: 0; 397 + padding-top: 0; 384 398 } 385 399 386 400 details[open]>*:last-child { 387 401 margin-bottom: 0; 402 + padding-bottom: 0; 388 403 } 389 404 390 405 dt {