tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: improvements to header
+15
-18
dev.css
+15
-18
dev.css
···
238
margin-top: 0rem;
239
margin-bottom: 0rem;
240
}
241
}
242
243
@media (min-width: calc((750px + 4rem) + ((250px + 2rem)*2))) {
244
header {
245
-
padding: 2rem 2rem;
246
padding-right: 0;
247
margin: 0;
248
position: fixed;
249
top: 0;
250
left: calc(50% - ((750px + 4rem) / 2) - (250px + 2rem));
251
width: 250px;
252
}
253
254
header nav {
255
display: flex;
256
flex-direction: column;
257
}
258
259
header nav a::before {
260
content: "• ";
261
color: var(--dc-tx-2);
262
}
263
-
264
-
header * {
265
-
padding-top: 0.25rem;
266
-
padding-bottom: 0.25rem;
267
-
margin-top: 0rem;
268
-
margin-bottom: 0rem;
269
-
}
270
}
271
272
header h1,
···
276
header h5,
277
header h6 {
278
border-bottom: 0;
279
-
}
280
-
281
-
header > *:first-child {
282
-
margin-top: 0;
283
-
padding-top: 0;
284
-
}
285
-
286
-
header > *:last-child {
287
-
margin-bottom: 0;
288
-
padding-bottom: 0;
289
}
290
291
a button,
···
238
margin-top: 0rem;
239
margin-bottom: 0rem;
240
}
241
+
242
+
header > *:first-child {
243
+
margin-top: 0;
244
+
padding-top: 0;
245
+
}
246
+
247
+
header > *:last-child {
248
+
margin-bottom: 0;
249
+
padding-bottom: 0;
250
+
}
251
}
252
253
@media (min-width: calc((750px + 4rem) + ((250px + 2rem)*2))) {
254
header {
255
+
padding: 2rem;
256
padding-right: 0;
257
margin: 0;
258
position: fixed;
259
top: 0;
260
left: calc(50% - ((750px + 4rem) / 2) - (250px + 2rem));
261
width: 250px;
262
+
height: 100%;
263
}
264
265
header nav {
266
display: flex;
267
flex-direction: column;
268
+
border-top: 1px solid var(--dc-bg-3);
269
+
padding-top: 1rem;
270
+
margin-top: 0.5rem;
271
}
272
273
header nav a::before {
274
content: "• ";
275
color: var(--dc-tx-2);
276
}
277
}
278
279
header h1,
···
283
header h5,
284
header h6 {
285
border-bottom: 0;
286
}
287
288
a button,