tangled
alpha
login
or
join now
devins.page
/
dev.css
tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1
fork
atom
overview
issues
pulls
pipelines
feat: general improvements and cleanup
devins.page
2 years ago
74abb242
6793187a
+25
-18
2 changed files
expand all
collapse all
unified
split
demo.html
dev.css
+11
-4
demo.html
···
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<title>Home · intergrav/dev.css</title>
7
-
<link
8
-
rel="stylesheet"
9
-
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2"
10
-
/>
11
<link
12
rel="stylesheet"
13
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
···
62
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
63
elit.
64
</p>
0
0
0
0
0
0
0
0
0
0
65
66
<br />
67
<hr />
···
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<title>Home · intergrav/dev.css</title>
7
+
<link rel="stylesheet" href="dev.css" />
0
0
0
8
<link
9
rel="stylesheet"
10
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
···
59
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
60
elit.
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>
72
73
<br />
74
<hr />
+14
-14
dev.css
···
100
overflow-wrap: break-word;
101
background: var(--dc-bg-1);
102
color: var(--dc-tx-2);
103
-
font-size: 1.03rem;
104
line-height: 1.5;
105
}
106
···
123
h1,
124
h2,
125
h3 {
126
-
padding-bottom: 6px;
127
-
margin-bottom: 8px;
128
border-bottom: 1px solid var(--dc-bg-3);
129
}
130
···
135
}
136
137
h1 {
138
-
font-size: 2.25rem;
139
}
140
141
h2 {
142
-
font-size: 1.85rem;
143
}
144
145
h3 {
146
-
font-size: 1.55rem;
147
}
148
149
h4 {
···
175
padding: 1.5rem;
176
background: var(--dc-bg-2);
177
border: 1px solid var(--dc-bg-3);
178
-
border-left: 6px solid var(--dc-bg-3);
179
border-radius: 4px;
180
}
181
···
184
margin-bottom: 0;
185
}
186
187
-
@media (max-width: calc(-1px + (750px + 4rem) + ((250px + 2rem)*2))) {
188
header {
189
background: var(--dc-bg-2);
190
border-bottom: 1px solid var(--dc-bg-3);
···
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: calc(100% - 1rem);
263
overflow-y: auto;
264
}
···
345
background: var(--dc-bg-2);
346
border: 1px solid var(--dc-bg-3);
347
border-radius: 4px;
348
-
padding: 3px 6px;
349
-
font-size: 0.9em;
350
}
351
352
kbd {
···
475
}
476
477
mark {
478
-
padding: 3px 6px;
479
background: var(--dc-ac-1);
480
color: var(--dc-ac-tx);
481
border-radius: 4px;
···
100
overflow-wrap: break-word;
101
background: var(--dc-bg-1);
102
color: var(--dc-tx-2);
103
+
font-size: 1rem;
104
line-height: 1.5;
105
}
106
···
123
h1,
124
h2,
125
h3 {
126
+
padding-bottom: 0.3rem;
127
+
margin-bottom: 0.4rem;
128
border-bottom: 1px solid var(--dc-bg-3);
129
}
130
···
135
}
136
137
h1 {
138
+
font-size: 2rem;
139
}
140
141
h2 {
142
+
font-size: 1.75rem;
143
}
144
145
h3 {
146
+
font-size: 1.5rem;
147
}
148
149
h4 {
···
175
padding: 1.5rem;
176
background: var(--dc-bg-2);
177
border: 1px solid var(--dc-bg-3);
178
+
border-left: 5px solid var(--dc-bg-3);
179
border-radius: 4px;
180
}
181
···
184
margin-bottom: 0;
185
}
186
187
+
@media (max-width: calc(-1px + (750px + 4rem) + ((275px + 2rem)*2))) {
188
header {
189
background: var(--dc-bg-2);
190
border-bottom: 1px solid var(--dc-bg-3);
···
250
}
251
}
252
253
+
@media (min-width: calc((750px + 4rem) + ((275px + 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) - (275px + 2rem));
261
+
width: 275px;
262
height: calc(100% - 1rem);
263
overflow-y: auto;
264
}
···
345
background: var(--dc-bg-2);
346
border: 1px solid var(--dc-bg-3);
347
border-radius: 4px;
348
+
padding: 2px 4px;
349
+
font-size: 0.9rem;
350
}
351
352
kbd {
···
475
}
476
477
mark {
478
+
padding: 2px 4px;
479
background: var(--dc-ac-1);
480
color: var(--dc-ac-tx);
481
border-radius: 4px;