@intergrav/dev.css 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +28 -0
- package/demo.html +252 -0
- package/dev.css +457 -0
- package/package.json +16 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 devin
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# intergrav/dev.css
|
|
2
|
+
|
|
3
|
+
Extremely simple, small, classless CSS framework in the style of Vercel's Geist. It weighs only ***~5.0kb***, and makes any plain HTML file look great. It has a light and dark theme, and the header turns into a sidebar on wider displays so that you get more vertical space.
|
|
4
|
+
|
|
5
|
+
## Importing
|
|
6
|
+
|
|
7
|
+
In your HTML's `<head>` all you have to do is this, and you're done!
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/intergrav/dev.css@1.x.x/dev.min.css">
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
I also recommend adding a font through [intergrav/fonts](https://github.com/intergrav/fonts). Geist or Inter work with dev.css out of the box.
|
|
14
|
+
|
|
15
|
+
### Geist Font
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/intergrav/fonts@1.x.x/serve/geist.min.css">
|
|
19
|
+
```
|
|
20
|
+
```html
|
|
21
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/intergrav/fonts@1.x.x/serve/geist-mono.min.css">
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Inter Font
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/intergrav/fonts@1.x.x/serve/inter.min.css">
|
|
28
|
+
```
|
package/demo.html
ADDED
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>dev.css Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/intergrav/dev.css@1.x.x/dev.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/intergrav/fonts@1.x.x/serve/geist.min.css">
|
|
9
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/intergrav/fonts@1.x.x/serve/geist-mono.min.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<header>
|
|
13
|
+
<h1>dev.css Demo</h1>
|
|
14
|
+
<nav>
|
|
15
|
+
<a>Home</a> / <a>About</a> / <a>Portfolio</a> / <a>Awesome</a> /
|
|
16
|
+
<a>Sauce</a>
|
|
17
|
+
</nav>
|
|
18
|
+
</header>
|
|
19
|
+
|
|
20
|
+
<h1>Heading 1</h1>
|
|
21
|
+
<p>
|
|
22
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
23
|
+
elit.
|
|
24
|
+
</p>
|
|
25
|
+
<h2>Heading 2</h2>
|
|
26
|
+
<p>
|
|
27
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
28
|
+
elit.
|
|
29
|
+
</p>
|
|
30
|
+
<h3>Heading 3</h3>
|
|
31
|
+
<p>
|
|
32
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
33
|
+
elit.
|
|
34
|
+
</p>
|
|
35
|
+
<h4>Heading 4</h4>
|
|
36
|
+
<p>
|
|
37
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
38
|
+
elit.
|
|
39
|
+
</p>
|
|
40
|
+
<h5>Heading 5</h5>
|
|
41
|
+
<p>
|
|
42
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
43
|
+
elit.
|
|
44
|
+
</p>
|
|
45
|
+
<h6>Heading 6</h6>
|
|
46
|
+
<p>
|
|
47
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
48
|
+
elit.
|
|
49
|
+
</p>
|
|
50
|
+
|
|
51
|
+
<br />
|
|
52
|
+
<hr />
|
|
53
|
+
<br />
|
|
54
|
+
|
|
55
|
+
<p>
|
|
56
|
+
Lorem <mark>ipsum</mark> dolor sit amet
|
|
57
|
+
<strong>consectetur</strong> adipisicing elit. Aut
|
|
58
|
+
<i>harum molestias</i> labore amet possimus
|
|
59
|
+
<s>exercitationem aperiam</s> earum, doloribus
|
|
60
|
+
<u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
|
|
61
|
+
quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
|
|
62
|
+
</p>
|
|
63
|
+
|
|
64
|
+
<p>
|
|
65
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
66
|
+
<code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate odit
|
|
67
|
+
repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
|
|
68
|
+
debitis eveniet totam minima vel.
|
|
69
|
+
</p>
|
|
70
|
+
|
|
71
|
+
<ul>
|
|
72
|
+
<li>List item</li>
|
|
73
|
+
<li>List item</li>
|
|
74
|
+
<li>List item</li>
|
|
75
|
+
<li>List item</li>
|
|
76
|
+
</ul>
|
|
77
|
+
|
|
78
|
+
<ol>
|
|
79
|
+
<li>Step 1</li>
|
|
80
|
+
<li>Step 2</li>
|
|
81
|
+
<li>????</li>
|
|
82
|
+
<li>Profit!</li>
|
|
83
|
+
</ol>
|
|
84
|
+
|
|
85
|
+
<dl>
|
|
86
|
+
<dt>Web</dt>
|
|
87
|
+
<dd>The part of the Internet that contains websites and web pages</dd>
|
|
88
|
+
<dt>HTML</dt>
|
|
89
|
+
<dd>A markup language for creating web pages</dd>
|
|
90
|
+
<dt>CSS</dt>
|
|
91
|
+
<dd>A technology to make HTML look better</dd>
|
|
92
|
+
</dl>
|
|
93
|
+
|
|
94
|
+
<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
|
|
95
|
+
If you think privacy is unimportant for you because you have nothing to
|
|
96
|
+
hide, you might as well say free speech is unimportant for you because you
|
|
97
|
+
have nothing useful to say.
|
|
98
|
+
<br />
|
|
99
|
+
<br />
|
|
100
|
+
– Edward Snowden
|
|
101
|
+
</blockquote>
|
|
102
|
+
|
|
103
|
+
<pre>
|
|
104
|
+
<!DOCTYPE html>
|
|
105
|
+
<html>
|
|
106
|
+
<head>
|
|
107
|
+
<title>Hello World</title>
|
|
108
|
+
</head>
|
|
109
|
+
<body>
|
|
110
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
111
|
+
</body>
|
|
112
|
+
</html></pre
|
|
113
|
+
>
|
|
114
|
+
|
|
115
|
+
<br />
|
|
116
|
+
<hr />
|
|
117
|
+
<br />
|
|
118
|
+
|
|
119
|
+
<table>
|
|
120
|
+
<caption>
|
|
121
|
+
Ho-kago Tea Time
|
|
122
|
+
</caption>
|
|
123
|
+
<thead>
|
|
124
|
+
<tr>
|
|
125
|
+
<th>Name</th>
|
|
126
|
+
<th>Instrument</th>
|
|
127
|
+
</tr>
|
|
128
|
+
</thead>
|
|
129
|
+
<tbody>
|
|
130
|
+
<tr>
|
|
131
|
+
<td>Yui Hirasawa</td>
|
|
132
|
+
<td>Lead Guitar</td>
|
|
133
|
+
</tr>
|
|
134
|
+
<tr>
|
|
135
|
+
<td>Mio Akiyama</td>
|
|
136
|
+
<td>Bass</td>
|
|
137
|
+
</tr>
|
|
138
|
+
<tr>
|
|
139
|
+
<td>Ritsu Tainaka</td>
|
|
140
|
+
<td>Drums</td>
|
|
141
|
+
</tr>
|
|
142
|
+
<tr>
|
|
143
|
+
<td>Tsumugi Kotobuki</td>
|
|
144
|
+
<td>Keyboard</td>
|
|
145
|
+
</tr>
|
|
146
|
+
<tr>
|
|
147
|
+
<td>Azusa Nakano</td>
|
|
148
|
+
<td>Rhythm Guitar</td>
|
|
149
|
+
</tr>
|
|
150
|
+
</tbody>
|
|
151
|
+
<tfoot>
|
|
152
|
+
<tr>
|
|
153
|
+
<th>Name</th>
|
|
154
|
+
<th>Instrument</th>
|
|
155
|
+
</tr>
|
|
156
|
+
</tfoot>
|
|
157
|
+
</table>
|
|
158
|
+
|
|
159
|
+
<br />
|
|
160
|
+
<hr />
|
|
161
|
+
<br />
|
|
162
|
+
|
|
163
|
+
<form>
|
|
164
|
+
<p>
|
|
165
|
+
<em>
|
|
166
|
+
This is not a real form and does not submit or save any information.
|
|
167
|
+
</em>
|
|
168
|
+
</p>
|
|
169
|
+
<p>
|
|
170
|
+
<label>First name</label><br />
|
|
171
|
+
<input type="text" name="first_name" />
|
|
172
|
+
</p>
|
|
173
|
+
<p>
|
|
174
|
+
<label>Last name</label><br />
|
|
175
|
+
<input type="text" name="last_name" />
|
|
176
|
+
</p>
|
|
177
|
+
<p>
|
|
178
|
+
<label>Gender</label><br />
|
|
179
|
+
<label>
|
|
180
|
+
<input type="radio" name="gender" value="Male" />
|
|
181
|
+
Male
|
|
182
|
+
</label>
|
|
183
|
+
<br />
|
|
184
|
+
<label>
|
|
185
|
+
<input type="radio" name="gender" value="Female" />
|
|
186
|
+
Female
|
|
187
|
+
</label>
|
|
188
|
+
<br />
|
|
189
|
+
<label>
|
|
190
|
+
<input type="radio" name="gender" value="other-none-na" />
|
|
191
|
+
Non-binary
|
|
192
|
+
</label>
|
|
193
|
+
</p>
|
|
194
|
+
<p>
|
|
195
|
+
<label>Email</label><br />
|
|
196
|
+
<input type="email" name="email" required="" />
|
|
197
|
+
</p>
|
|
198
|
+
<p>
|
|
199
|
+
<label>Phone number</label><br />
|
|
200
|
+
<input type="tel" name="phone" />
|
|
201
|
+
</p>
|
|
202
|
+
<p>
|
|
203
|
+
<label>Password</label><br />
|
|
204
|
+
<input type="password" name="password" />
|
|
205
|
+
</p>
|
|
206
|
+
<p>
|
|
207
|
+
<label>Country</label><br />
|
|
208
|
+
<select>
|
|
209
|
+
<option>China</option>
|
|
210
|
+
<option>India</option>
|
|
211
|
+
<option>United States</option>
|
|
212
|
+
<option>Indonesia</option>
|
|
213
|
+
<option>Brazil</option>
|
|
214
|
+
</select>
|
|
215
|
+
</p>
|
|
216
|
+
<p>
|
|
217
|
+
<label>Comments</label><br />
|
|
218
|
+
<textarea></textarea>
|
|
219
|
+
</p>
|
|
220
|
+
<p>
|
|
221
|
+
<label>
|
|
222
|
+
<input type="checkbox" value="terms" />
|
|
223
|
+
I agree to the <a>terms and conditions</a>
|
|
224
|
+
</label>
|
|
225
|
+
</p>
|
|
226
|
+
<p>
|
|
227
|
+
<button>Sign up</button>
|
|
228
|
+
<button type="reset">Reset form</button>
|
|
229
|
+
<button disabled="disabled">Disabled</button>
|
|
230
|
+
</p>
|
|
231
|
+
</form>
|
|
232
|
+
|
|
233
|
+
<br />
|
|
234
|
+
<hr />
|
|
235
|
+
<br />
|
|
236
|
+
|
|
237
|
+
<img
|
|
238
|
+
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
|
|
239
|
+
alt="Mt. Fuji"
|
|
240
|
+
/>
|
|
241
|
+
|
|
242
|
+
<p>
|
|
243
|
+
Inline image:
|
|
244
|
+
<a href="#"
|
|
245
|
+
><img
|
|
246
|
+
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
|
|
247
|
+
width="50"
|
|
248
|
+
alt="Mt. Fuji"
|
|
249
|
+
/></a>
|
|
250
|
+
</p>
|
|
251
|
+
</body>
|
|
252
|
+
</html>
|
package/dev.css
ADDED
|
@@ -0,0 +1,457 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Fonts - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */
|
|
3
|
+
--dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
|
|
4
|
+
"Segoe UI", sans-serif;
|
|
5
|
+
--dc-font-mono: "Geist Mono", monospace;
|
|
6
|
+
/* Light colors */
|
|
7
|
+
--dc-tx-1: #000000;
|
|
8
|
+
--dc-tx-2: #1a1a1a;
|
|
9
|
+
--dc-bg-1: #fafafa;
|
|
10
|
+
--dc-bg-2: #fff;
|
|
11
|
+
--dc-bg-3: #ebebeb;
|
|
12
|
+
--dc-lk-1: #0068d6;
|
|
13
|
+
--dc-lkb-1: #0072f5;
|
|
14
|
+
--dc-lkb-2: #0062d1;
|
|
15
|
+
--dc-lkb-tx: #ededed;
|
|
16
|
+
--dc-ac-1: #8e4ec6;
|
|
17
|
+
--dc-ac-tx: #ededed;
|
|
18
|
+
/* Dark colors */
|
|
19
|
+
--dc-d-tx-1: #ededed;
|
|
20
|
+
--dc-d-tx-2: #a1a1a1;
|
|
21
|
+
--dc-d-bg-1: #000;
|
|
22
|
+
--dc-d-bg-2: #ffffff0f;
|
|
23
|
+
--dc-d-bg-3: #2e2e2e;
|
|
24
|
+
--dc-d-lk-1: #52a8ff;
|
|
25
|
+
--dc-d-lkb-1: #0072f5;
|
|
26
|
+
--dc-d-lkb-2: #0062d1;
|
|
27
|
+
--dc-d-lkb-tx: #ededed;
|
|
28
|
+
--dc-d-ac-1: #8e4ec6;
|
|
29
|
+
--dc-d-ac-tx: #ededed;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@media (prefers-color-scheme: dark) {
|
|
33
|
+
:root {
|
|
34
|
+
--dc-tx-1: var(--dc-d-tx-1);
|
|
35
|
+
--dc-tx-2: var(--dc-d-tx-2);
|
|
36
|
+
--dc-bg-1: var(--dc-d-bg-1);
|
|
37
|
+
--dc-bg-2: var(--dc-d-bg-2);
|
|
38
|
+
--dc-bg-3: var(--dc-d-bg-3);
|
|
39
|
+
--dc-lk-1: var(--dc-d-lk-1);
|
|
40
|
+
--dc-lkb-1: var(--dc-d-lkb-1);
|
|
41
|
+
--dc-lkb-2: var(--dc-d-lkb-2);
|
|
42
|
+
--dc-lkb-tx: var(--dc-d-lkb-tx);
|
|
43
|
+
--dc-ac-1: var(--dc-d-ac-1);
|
|
44
|
+
--dc-ac-tx: var(--dc-d-ac-tx);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
* {
|
|
49
|
+
margin: 0;
|
|
50
|
+
padding: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
address,
|
|
54
|
+
area,
|
|
55
|
+
article,
|
|
56
|
+
aside,
|
|
57
|
+
audio,
|
|
58
|
+
blockquote,
|
|
59
|
+
datalist,
|
|
60
|
+
details,
|
|
61
|
+
dl,
|
|
62
|
+
fieldset,
|
|
63
|
+
figure,
|
|
64
|
+
form,
|
|
65
|
+
input,
|
|
66
|
+
iframe,
|
|
67
|
+
img,
|
|
68
|
+
meter,
|
|
69
|
+
nav,
|
|
70
|
+
ol,
|
|
71
|
+
optgroup,
|
|
72
|
+
option,
|
|
73
|
+
output,
|
|
74
|
+
p,
|
|
75
|
+
pre,
|
|
76
|
+
progress,
|
|
77
|
+
ruby,
|
|
78
|
+
section,
|
|
79
|
+
table,
|
|
80
|
+
textarea,
|
|
81
|
+
ul,
|
|
82
|
+
video {
|
|
83
|
+
margin-bottom: 1rem;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
html,
|
|
87
|
+
input,
|
|
88
|
+
select,
|
|
89
|
+
button {
|
|
90
|
+
font-family: var(--dc-font-sans);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
body {
|
|
94
|
+
margin: 0 auto;
|
|
95
|
+
max-width: 750px;
|
|
96
|
+
padding: 2rem;
|
|
97
|
+
border-radius: 4px;
|
|
98
|
+
overflow-x: hidden;
|
|
99
|
+
word-break: break-word;
|
|
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
|
+
|
|
107
|
+
::selection {
|
|
108
|
+
background: var(--dc-ac-1);
|
|
109
|
+
color: var(--dc-ac-tx);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
h1,
|
|
113
|
+
h2,
|
|
114
|
+
h3,
|
|
115
|
+
h4,
|
|
116
|
+
h5,
|
|
117
|
+
h6 {
|
|
118
|
+
line-height: 1;
|
|
119
|
+
color: var(--dc-tx-1);
|
|
120
|
+
padding-top: 0.875rem;
|
|
121
|
+
}
|
|
122
|
+
|
|
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
|
+
|
|
131
|
+
h4,
|
|
132
|
+
h5,
|
|
133
|
+
h6 {
|
|
134
|
+
margin-bottom: 0.3rem;
|
|
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 {
|
|
150
|
+
font-size: 1.25rem;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
h5 {
|
|
154
|
+
font-size: 1rem;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
h6 {
|
|
158
|
+
font-size: 0.875rem;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
a {
|
|
162
|
+
color: var(--dc-lk-1);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
abbr:hover {
|
|
166
|
+
cursor: help;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
blockquote {
|
|
170
|
+
padding: 1.5rem;
|
|
171
|
+
background: var(--dc-bg-2);
|
|
172
|
+
border-left: 5px solid var(--dc-bg-3);
|
|
173
|
+
border-radius: 4px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
blockquote *:last-child {
|
|
177
|
+
padding-bottom: 0;
|
|
178
|
+
margin-bottom: 0;
|
|
179
|
+
}
|
|
180
|
+
|
|
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%);
|
|
188
|
+
|
|
189
|
+
/* Sticky header if supported */
|
|
190
|
+
position: sticky;
|
|
191
|
+
top: 0;
|
|
192
|
+
|
|
193
|
+
/* Blur for transparent surface if supported */
|
|
194
|
+
backdrop-filter: blur(16px);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* Make heading text small if header is not moved to the side */
|
|
198
|
+
@media (max-width: 1451px) {
|
|
199
|
+
header h1 {
|
|
200
|
+
font-size: 1.6rem;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
header h2 {
|
|
204
|
+
font-size: 1.4rem;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
header h3 {
|
|
208
|
+
font-size: 1.2rem;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
header h4 {
|
|
212
|
+
font-size: 1rem;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* Move header to the side to preserve vertical space, if screen is minimum width 1452px */
|
|
217
|
+
@media (min-width: 1452px) {
|
|
218
|
+
header {
|
|
219
|
+
width: 260px;
|
|
220
|
+
height: auto;
|
|
221
|
+
position: fixed;
|
|
222
|
+
left: calc(50% - 725px);
|
|
223
|
+
background: #ffffff00;
|
|
224
|
+
border-bottom: 0;
|
|
225
|
+
padding: 2rem 1.5rem;
|
|
226
|
+
margin: 0;
|
|
227
|
+
|
|
228
|
+
/* Disable blur */
|
|
229
|
+
backdrop-filter: none;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
header h1,
|
|
234
|
+
header h2,
|
|
235
|
+
header h3 {
|
|
236
|
+
padding-bottom: 0;
|
|
237
|
+
border-bottom: 0;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
header > *:first-child {
|
|
241
|
+
margin-top: 0;
|
|
242
|
+
padding-top: 0;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
header > *:last-child {
|
|
246
|
+
margin-bottom: 0;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
a button,
|
|
250
|
+
button,
|
|
251
|
+
input[type="submit"],
|
|
252
|
+
input[type="reset"],
|
|
253
|
+
input[type="button"] {
|
|
254
|
+
font-size: 1rem;
|
|
255
|
+
display: inline-block;
|
|
256
|
+
padding: 6px 12px;
|
|
257
|
+
text-align: center;
|
|
258
|
+
text-decoration: none;
|
|
259
|
+
white-space: nowrap;
|
|
260
|
+
background: var(--dc-lkb-1);
|
|
261
|
+
color: var(--dc-lkb-tx);
|
|
262
|
+
border: 0;
|
|
263
|
+
border-radius: 4px;
|
|
264
|
+
box-sizing: border-box;
|
|
265
|
+
cursor: pointer;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
a button[disabled],
|
|
269
|
+
button[disabled],
|
|
270
|
+
input[type="submit"][disabled],
|
|
271
|
+
input[type="reset"][disabled],
|
|
272
|
+
input[type="button"][disabled] {
|
|
273
|
+
cursor: not-allowed;
|
|
274
|
+
opacity: 0.5;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.button:focus,
|
|
278
|
+
.button:enabled:hover,
|
|
279
|
+
button:focus,
|
|
280
|
+
button:enabled:hover,
|
|
281
|
+
input[type="submit"]:focus,
|
|
282
|
+
input[type="submit"]:enabled:hover,
|
|
283
|
+
input[type="reset"]:focus,
|
|
284
|
+
input[type="reset"]:enabled:hover,
|
|
285
|
+
input[type="button"]:focus,
|
|
286
|
+
input[type="button"]:enabled:hover {
|
|
287
|
+
background: var(--dc-lkb-2);
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
a img {
|
|
291
|
+
margin-bottom: 0;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
code,
|
|
295
|
+
pre,
|
|
296
|
+
kbd,
|
|
297
|
+
samp {
|
|
298
|
+
font-family: var(--dc-font-mono);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
code,
|
|
302
|
+
samp,
|
|
303
|
+
kbd,
|
|
304
|
+
pre {
|
|
305
|
+
background: var(--dc-bg-2);
|
|
306
|
+
border: 1px solid var(--dc-bg-3);
|
|
307
|
+
border-radius: 4px;
|
|
308
|
+
padding: 3px 6px;
|
|
309
|
+
font-size: 0.9em;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
kbd {
|
|
313
|
+
border-bottom: 3px solid var(--dc-bg-3);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
pre {
|
|
317
|
+
padding: 1rem 1.4rem;
|
|
318
|
+
max-width: 100%;
|
|
319
|
+
overflow: auto;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
pre code {
|
|
323
|
+
background: inherit;
|
|
324
|
+
font-size: inherit;
|
|
325
|
+
color: inherit;
|
|
326
|
+
border: 0;
|
|
327
|
+
padding: 0;
|
|
328
|
+
margin: 0;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
code pre {
|
|
332
|
+
display: inline;
|
|
333
|
+
background: inherit;
|
|
334
|
+
font-size: inherit;
|
|
335
|
+
color: inherit;
|
|
336
|
+
border: 0;
|
|
337
|
+
padding: 0;
|
|
338
|
+
margin: 0;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
details {
|
|
342
|
+
padding: 0.6rem 1rem;
|
|
343
|
+
background: var(--dc-bg-2);
|
|
344
|
+
border: 1px solid var(--dc-bg-3);
|
|
345
|
+
border-radius: 4px;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
summary {
|
|
349
|
+
cursor: pointer;
|
|
350
|
+
font-weight: bold;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
details[open] {
|
|
354
|
+
padding-bottom: 0.75rem;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
details[open] summary {
|
|
358
|
+
margin-bottom: 6px;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
details[open] > *:last-child {
|
|
362
|
+
margin-bottom: 0;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
dt {
|
|
366
|
+
font-weight: bold;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
dd::before {
|
|
370
|
+
content: "→ ";
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
hr {
|
|
374
|
+
border: 0;
|
|
375
|
+
border-bottom: 1px solid var(--dc-bg-3);
|
|
376
|
+
margin: 1rem auto;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
fieldset {
|
|
380
|
+
margin-top: 1rem;
|
|
381
|
+
padding: 2rem;
|
|
382
|
+
border: 1px solid var(--dc-bg-3);
|
|
383
|
+
border-radius: 4px;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
legend {
|
|
387
|
+
padding: auto 0.5rem;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
table {
|
|
391
|
+
border-collapse: collapse;
|
|
392
|
+
width: 100%;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
td,
|
|
396
|
+
th {
|
|
397
|
+
border: 1px solid var(--dc-bg-3);
|
|
398
|
+
text-align: left;
|
|
399
|
+
padding: 0.5rem;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
th {
|
|
403
|
+
background: var(--dc-bg-2);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
tr:nth-child(even) {
|
|
407
|
+
background: var(--dc-bg-2);
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
table caption {
|
|
411
|
+
font-weight: bold;
|
|
412
|
+
margin-bottom: 0.5rem;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
textarea {
|
|
416
|
+
max-width: 100%;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
ol,
|
|
420
|
+
ul {
|
|
421
|
+
padding-left: 2rem;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
li {
|
|
425
|
+
margin-top: 0.4rem;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
ul ul,
|
|
429
|
+
ol ul,
|
|
430
|
+
ul ol,
|
|
431
|
+
ol ol {
|
|
432
|
+
margin-bottom: 0;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
mark {
|
|
436
|
+
padding: 3px 6px;
|
|
437
|
+
background: var(--dc-ac-1);
|
|
438
|
+
color: var(--dc-ac-tx);
|
|
439
|
+
border-radius: 4px;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
textarea,
|
|
443
|
+
select,
|
|
444
|
+
input {
|
|
445
|
+
padding: 6px 12px;
|
|
446
|
+
margin-bottom: 0.5rem;
|
|
447
|
+
background: var(--dc-bg-2);
|
|
448
|
+
color: var(--dc-tx-2);
|
|
449
|
+
border: 1px solid var(--dc-bg-3);
|
|
450
|
+
border-radius: 4px;
|
|
451
|
+
box-shadow: none;
|
|
452
|
+
box-sizing: border-box;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
img {
|
|
456
|
+
max-width: 100%;
|
|
457
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@intergrav/dev.css",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Extremely simple, small, classless CSS framework in the style of Vercel's Geist design system. Fork of xz/new.css.",
|
|
5
|
+
"main": "dev.css",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/intergrav/dev.css.git"
|
|
9
|
+
},
|
|
10
|
+
"author": "intergrav (intergrav@proton.me)",
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/intergrav/dev.css/issues"
|
|
14
|
+
},
|
|
15
|
+
"homepage": "https://github.com/intergrav/dev.css#readme"
|
|
16
|
+
}
|