lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
feat: general improvements and cleanup
+25
-18
+11
-4
demo.html
+11
-4
demo.html
···
4
4
<meta charset="UTF-8" />
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
<title>Home · intergrav/dev.css</title>
7
-
<link
8
-
rel="stylesheet"
9
-
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2"
10
-
/>
7
+
<link rel="stylesheet" href="dev.css" />
11
8
<link
12
9
rel="stylesheet"
13
10
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
···
62
59
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
63
60
elit.
64
61
</p>
62
+
63
+
<br />
64
+
<hr />
65
+
<br />
66
+
67
+
<blockquote>
68
+
This entire page was made with dev.css. You can view the source
69
+
<a href="https://github.com/intergrav/dev.css/blob/main/demo.html">here</a
70
+
>.
71
+
</blockquote>
65
72
66
73
<br />
67
74
<hr />
+14
-14
dev.css
+14
-14
dev.css
···
100
100
overflow-wrap: break-word;
101
101
background: var(--dc-bg-1);
102
102
color: var(--dc-tx-2);
103
-
font-size: 1.03rem;
103
+
font-size: 1rem;
104
104
line-height: 1.5;
105
105
}
106
106
···
123
123
h1,
124
124
h2,
125
125
h3 {
126
-
padding-bottom: 6px;
127
-
margin-bottom: 8px;
126
+
padding-bottom: 0.3rem;
127
+
margin-bottom: 0.4rem;
128
128
border-bottom: 1px solid var(--dc-bg-3);
129
129
}
130
130
···
135
135
}
136
136
137
137
h1 {
138
-
font-size: 2.25rem;
138
+
font-size: 2rem;
139
139
}
140
140
141
141
h2 {
142
-
font-size: 1.85rem;
142
+
font-size: 1.75rem;
143
143
}
144
144
145
145
h3 {
146
-
font-size: 1.55rem;
146
+
font-size: 1.5rem;
147
147
}
148
148
149
149
h4 {
···
175
175
padding: 1.5rem;
176
176
background: var(--dc-bg-2);
177
177
border: 1px solid var(--dc-bg-3);
178
-
border-left: 6px solid var(--dc-bg-3);
178
+
border-left: 5px solid var(--dc-bg-3);
179
179
border-radius: 4px;
180
180
}
181
181
···
184
184
margin-bottom: 0;
185
185
}
186
186
187
-
@media (max-width: calc(-1px + (750px + 4rem) + ((250px + 2rem)*2))) {
187
+
@media (max-width: calc(-1px + (750px + 4rem) + ((275px + 2rem)*2))) {
188
188
header {
189
189
background: var(--dc-bg-2);
190
190
border-bottom: 1px solid var(--dc-bg-3);
···
250
250
}
251
251
}
252
252
253
-
@media (min-width: calc((750px + 4rem) + ((250px + 2rem)*2))) {
253
+
@media (min-width: calc((750px + 4rem) + ((275px + 2rem)*2))) {
254
254
header {
255
255
padding: 2rem;
256
256
padding-right: 0;
257
257
margin: 0;
258
258
position: fixed;
259
259
top: 0;
260
-
left: calc(50% - ((750px + 4rem) / 2) - (250px + 2rem));
261
-
width: 250px;
260
+
left: calc(50% - ((750px + 4rem) / 2) - (275px + 2rem));
261
+
width: 275px;
262
262
height: calc(100% - 1rem);
263
263
overflow-y: auto;
264
264
}
···
345
345
background: var(--dc-bg-2);
346
346
border: 1px solid var(--dc-bg-3);
347
347
border-radius: 4px;
348
-
padding: 3px 6px;
349
-
font-size: 0.9em;
348
+
padding: 2px 4px;
349
+
font-size: 0.9rem;
350
350
}
351
351
352
352
kbd {
···
475
475
}
476
476
477
477
mark {
478
-
padding: 3px 6px;
478
+
padding: 2px 4px;
479
479
background: var(--dc-ac-1);
480
480
color: var(--dc-ac-tx);
481
481
border-radius: 4px;