stau.space
AECC database project.
1@import url("./reset.css");
2
3:root {
4 --font-family: monospace;
5 --line-height: 1.15rem;
6 --border-thickness: 2px;
7
8 --font-weight-normal: 500;
9 --font-weight-medium: 600;
10 --font-weight-bold: 800;
11
12 --text-color: #ddd;
13 --background-color: #080808;
14 --color-yellow: #e3c78a;
15 --color-blue: #80a0ff;
16
17 font-family: var(--font-family);
18 font-optical-sizing: auto;
19 font-weight: var(--font-weight-normal);
20 font-style: normal;
21 font-variant-numeric: tabular-nums lining-nums;
22 font-size: 16px;
23}
24
25* {
26 box-sizing: border-box;
27}
28
29
30* + * {
31 margin-top: var(--line-height);
32}
33
34html {
35 display: flex;
36 width: 100%;
37 margin: 0;
38 padding: 0;
39 flex-direction: column;
40 align-items: center;
41}
42
43body {
44 position: relative;
45 width: 100%;
46 margin: 0;
47 padding: var(--line-height) 2ch;
48 max-width: calc(min(90ch, round(down, 100%, 1ch)));
49 line-height: var(--line-height);
50 overflow-x: hidden;
51 background-color: var(--background-color);
52 color: var(--text-color);
53}
54
55@media screen and (max-width: 480px) {
56 :root {
57 font-size: 16px;
58 }
59 body {
60 padding: var(--line-height) 1ch;
61 }
62}
63
64img {
65 max-width: 61.8%;
66 height: auto;
67 margin-left: auto;
68 margin-right: auto;
69}
70
71h1, h2, h3, h4, h5, h6 {
72 font-weight: var(--font-weight-bold);
73 margin: calc(var(--line-height) * 2) 0 var(--line-height);
74 line-height: var(--line-height);
75}
76
77h1 {
78 font-size: 2rem;
79 line-height: calc(2 * var(--line-height));
80 margin-bottom: calc(var(--line-height) * 2);
81 text-transform: uppercase;
82}
83
84h2 {
85 font-size: 1rem;
86 text-transform: uppercase;
87}
88
89hr {
90 position: relative;
91 display: block;
92 height: var(--line-height);
93 margin: calc(var(--line-height) * 1.5) 0;
94 border: none;
95 color: var(--text-color);
96}
97
98hr:after {
99 display: block;
100 content: "";
101 position: absolute;
102 top: calc(var(--line-height) / 2 - var(--border-thickness));
103 left: 0;
104 width: 100%;
105 border-top: calc(var(--border-thickness) * 3) double var(--text-color);
106 height: 0;
107}
108
109a {
110 text-decoration-thickness: var(--border-thickness);
111}
112
113a:link, a:visited {
114 color: var(--text-color);
115}
116
117p {
118 font-size: 1em;
119 margin-bottom: var(--line-height);
120}
121
122strong {
123 font-weight: var(--font-weight-bold);
124}
125
126em {
127 font-style: italic;
128}
129
130sub {
131 position: relative;
132 display: inline-block;
133 margin: 0;
134 vertical-align: sub;
135 line-height: 0;
136 width: calc(1ch / 0.75);
137 font-size: .75rem;
138}
139
140table {
141 position: relative;
142 border-collapse: collapse;
143 top: calc(var(--line-height) / 2);
144 width: calc(round(down, 100%, 1ch));
145 margin: 0 0 calc(var(--line-height) * 2);
146}
147
148th, td {
149 border: var(--border-thickness) solid var(--text-color);
150 padding:
151 calc((var(--line-height) / 2))
152 calc(1ch - var(--border-thickness) / 2)
153 calc((var(--line-height) / 2) - (var(--border-thickness)))
154 ;
155 line-height: var(--line-height);
156 vertical-align: top;
157 text-align: left;
158}
159
160table tbody tr:first-child > * {
161 padding-top: calc((var(--line-height) / 2) - var(--border-thickness));
162}
163
164th {
165 font-weight: 700;
166}
167
168.width-min {
169 width: 0%;
170}
171
172.width-auto {
173 width: 100%;
174}
175
176.header {
177 margin-bottom: calc(var(--line-height) * 2);
178}
179
180.header h1 {
181 margin: 0;
182}
183
184.header tr td:last-child {
185 text-align: right;
186}
187
188p {
189 word-break: break-word;
190 word-wrap: break-word;
191 hyphens: auto;
192}
193
194img, video {
195 display: block;
196 object-fit: contain;
197 overflow: hidden;
198}
199
200img {
201 font-style: italic;
202 color: var(--text-color-alt);
203}
204
205details {
206 border: var(--border-thickness) solid var(--text-color);
207 padding: calc(var(--line-height) - var(--border-thickness)) 2em;
208 margin-bottom: calc(var(--line-height) + 1em);
209}
210
211summary {
212 font-weight: var(--font-weight-medium);
213 cursor: pointer;
214}
215
216details[open] summary {
217 margin-bottom: var(--line-height);
218}
219
220details ::marker {
221 display: inline-block;
222 content: '▶';
223 margin: 0;
224}
225
226details[open] ::marker {
227 content: '▼';
228}
229
230details :last-child {
231 margin-bottom: 0;
232}
233
234pre {
235 white-space: pre;
236 overflow-x: auto;
237 margin: var(--line-height) 0;
238 overflow-y: hidden;
239}
240
241figure pre {
242 margin: 0;
243}
244
245
246pre, code {
247 font-family: "IBM Plex Mono", monospace;
248 font-variant-numeric: tabular-nums lining-nums;
249}
250
251code {
252 font-weight: var(--font-weight-medium);
253}
254
255figure {
256 margin: calc(var(--line-height) * 2) 3ch;
257 overflow-x: auto;
258 overflow-y: hidden;
259}
260
261figcaption {
262 display: block;
263 font-style: italic;
264 margin-top: var(--line-height);
265}
266
267ul, ol {
268 padding: 0;
269 margin: 0 0 var(--line-height);
270}
271
272ul {
273 list-style-type: square;
274 padding: 0 0 0 2ch;
275}
276
277ol {
278 list-style-type: none;
279 counter-reset: item;
280 padding: 0;
281}
282
283ol ul,
284ol ol,
285ul ol,
286ul ul {
287 padding: 0 0 0 3ch;
288 margin: 0;
289}
290
291ol li:before {
292 content: counters(item, ".") ". ";
293 counter-increment: item;
294 font-weight: var(--font-weight-medium);
295}
296
297li {
298 margin: 0;
299 padding: 0;
300}
301
302li::marker {
303 line-height: 0;
304}
305
306::-webkit-scrollbar {
307 height: var(--line-height);
308}
309
310input, button, textarea, select {
311 border: var(--border-thickness) solid var(--text-color);
312 padding:
313 calc(var(--line-height) / 2 - var(--border-thickness))
314 calc(1ch - var(--border-thickness));
315 margin: 0;
316 font: inherit;
317 font-weight: inherit;
318 height: calc(var(--line-height) * 2);
319 width: auto;
320 overflow: visible;
321 background: var(--background-color);
322 color: var(--text-color);
323 line-height: normal;
324 transition: 400ms;
325 -webkit-font-smoothing: inherit;
326 -moz-osx-font-smoothing: inherit;
327 -webkit-appearance: none;
328}
329
330input:hover, button:hover, textarea:hover, select:hover {
331 border-color: var(--color-blue);
332 transition: 400ms;
333}
334
335input[type=checkbox] {
336 display: inline-grid;
337 place-content: center;
338 vertical-align: top;
339 width: 2ch;
340 height: var(--line-height);
341 cursor: pointer;
342}
343
344input[type=checkbox]:checked:before {
345 content: "";
346 width: 1ch;
347 height: calc(var(--line-height) / 2);
348 background: var(--text-color);
349}
350
351button:focus, input:focus {
352 --border-thickness: 3px;
353 outline: none;
354 transition: 100ms;
355}
356
357input {
358 width: calc(round(down, 100%, 1ch));
359}
360
361::placeholder {
362 color: var(--text-color-alt);
363 opacity: 1;
364}
365
366::-ms-input-placeholder {
367 color: var(--text-color-alt);
368}
369
370button::-moz-focus-inner {
371 padding: 0;
372 border: 0;
373}
374
375button {
376 text-transform: uppercase;
377 font-weight: var(--font-weight-medium);
378 cursor: pointer;
379}
380
381button:hover {
382 background: var(--background-color-alt);
383}
384
385button:active {
386 transform: translate(2px, 2px);
387}
388
389label {
390 display: block;
391 width: calc(round(down, 100%, 1ch));
392 height: auto;
393 line-height: var(--line-height);
394 font-weight: var(--font-weight-medium);
395 margin: 0;
396}
397
398label input {
399 width: 100%;
400}
401
402br {
403 text-indent: 0;
404 margin: 0;
405}
406
407#page-size {
408 position: fixed;
409 bottom: 5px;
410}
411
412.input-box {
413 display: flex;
414 align-items: center;
415 border: 2px solid;
416}
417
418.input-box input {
419 border: none;
420 outline: none;
421}
422
423.input-box:focus-within, input:focus-within {
424 border-color: #4f7df3;
425 transition: 2ms;
426}
427
428.static {
429 transition: 15s;
430 background:
431 repeating-radial-gradient(#000 0 0.0001%,#111 0 0.0002%) 50% 0/250px 250px,
432 repeating-conic-gradient(#000 0 0.0001%,#111 0 0.0002%) 60% 60%/250px 250px !important;
433 background-blend-mode: difference;
434 animation: b .2s infinite alternate;
435 @keyframes b{
436 100% {
437 background-position: 50% 0, 60% 50%;
438 }
439 }
440}