lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
feat!: automatic dividers for header
and some other improvements
+56
-31
+56
-31
dev.css
+56
-31
dev.css
···
160
160
161
161
a {
162
162
color: var(--dc-lk-1);
163
+
text-decoration: none;
164
+
}
165
+
166
+
a:hover {
167
+
text-decoration: underline;
163
168
}
164
169
165
170
abbr:hover {
···
178
183
margin-bottom: 0;
179
184
}
180
185
181
-
header {
182
-
background: var(--dc-bg-2);
183
-
border-bottom: 1px solid var(--dc-bg-3);
184
-
padding: 0.75rem;
185
-
margin: -2rem calc(50% - 50vw) 2rem;
186
-
padding-left: calc(50vw - 50%);
187
-
padding-right: calc(50vw - 50%);
186
+
/* Header mode */
187
+
@media (max-width: 1415px) {
188
+
header {
189
+
background: var(--dc-bg-2);
190
+
border-bottom: 1px solid var(--dc-bg-3);
191
+
padding-top: 0.75rem;
192
+
padding-bottom: 0.55rem;
193
+
margin: -2rem calc(50% - 50vw) 2rem;
194
+
padding-left: calc(50vw - 50%);
195
+
padding-right: calc(50vw - 50%);
188
196
189
-
/* Sticky header if supported */
190
-
position: sticky;
191
-
top: 0;
197
+
/* Sticky header if supported */
198
+
position: sticky;
199
+
top: 0;
192
200
193
-
/* Blur for transparent surface if supported */
194
-
backdrop-filter: blur(16px);
195
-
}
201
+
/* Blur for transparent surface if supported */
202
+
backdrop-filter: blur(16px);
203
+
}
196
204
197
-
/* Make heading text small if header is not moved to the side */
198
-
@media (max-width: 1451px) {
205
+
/* Divide a elements in nav with bullet point */
206
+
header nav a+a::before {
207
+
content: " • ";
208
+
color: var(--dc-tx-2);
209
+
}
210
+
211
+
/* Change header font sizes */
199
212
header h1 {
200
213
font-size: 1.6rem;
201
214
}
202
-
203
215
header h2 {
204
216
font-size: 1.4rem;
205
217
}
206
-
207
218
header h3 {
208
219
font-size: 1.2rem;
209
220
}
210
-
211
221
header h4 {
212
222
font-size: 1rem;
213
223
}
224
+
header nav {
225
+
font-size: 0.9rem;
226
+
}
214
227
}
215
228
216
-
/* Move header to the side to preserve vertical space, if screen is minimum width 1452px */
217
-
@media (min-width: 1452px) {
229
+
/* Sidebar mode*/
230
+
@media (min-width: 1416px) {
218
231
header {
219
-
width: 260px;
220
-
height: auto;
221
-
position: fixed;
222
-
left: calc(50% - 725px);
223
-
background: #ffffff00;
232
+
/* Style changes */
233
+
background: none;
224
234
border-bottom: 0;
225
235
padding: 2rem 1.5rem;
226
236
margin: 0;
227
237
228
-
/* Disable blur */
229
-
backdrop-filter: none;
238
+
/* Fixed position on the screen */
239
+
position: fixed;
240
+
top: 0;
241
+
left: calc(50% - 700px);
242
+
width: 260px;
243
+
}
244
+
245
+
/* Put nav elements in a separate line */
246
+
header nav {
247
+
display: flex;
248
+
flex-direction: column;
249
+
}
250
+
251
+
/* Add dash before nav elements */
252
+
header nav a::before {
253
+
content: "• ";
254
+
color: var(--dc-tx-2);
230
255
}
231
256
}
232
257
···
237
262
border-bottom: 0;
238
263
}
239
264
240
-
header > *:first-child {
265
+
header>*:first-child {
241
266
margin-top: 0;
242
267
padding-top: 0;
243
268
}
244
269
245
-
header > *:last-child {
270
+
header>*:last-child {
246
271
margin-bottom: 0;
247
272
}
248
273
···
358
383
margin-bottom: 6px;
359
384
}
360
385
361
-
details[open] > *:last-child {
386
+
details[open]>*:last-child {
362
387
margin-bottom: 0;
363
388
}
364
389
···
454
479
455
480
img {
456
481
max-width: 100%;
457
-
}
482
+
}