Unicode text, UTF-8 text
1
@font-face {
2
font-family: "Romanian League Gothic";
3
src: url("/static/fonts/RoLeagueGothic-Regular.woff2") format("woff2");
4
font-weight: normal;
5
font-style: normal;
6
}
7
@font-face {
9
font-family: "Romanian League Gothic Condensed";
10
src: url("/static/fonts/RoLeagueGothic-Condensed.woff2") format("woff2");
11
font-weight: normal;
12
font-style: normal;
13
}
14
@font-face {
16
font-family: "Source Serif";
17
src: url("/static/fonts/SourceSerif4Variable-Roman.otf.woff2") format("woff2-variations");
18
}
19
@font-face {
21
font-family: "Source Serif";
22
src: url("/static/fonts/SourceSerif4Variable-Italic.otf.woff2") format("woff2-variations");
23
font-style: italic;
24
}
25
@font-face {
27
font-family: "Source Sans";
28
src: url("/static/fonts/SourceSans3VF-Upright.otf.woff2") format("woff2-variations");
29
}
30
@font-face {
32
font-family: "Source Sans";
33
src: url("/static/fonts/SourceSans3VF-Italic.otf.woff2") format("woff2-variations");
34
font-style: italic;
35
}
36
@font-face {
38
font-family: "Source Code";
39
src: url("/static/fonts/SourceCodeVF-Upright.otf.woff2") format("woff2-variations");
40
}
41
@font-face {
43
font-family: "Source Code";
44
src: url("/static/fonts/SourceCodeVF-Italic.otf.woff2") format("woff2-variations");
45
font-style: italic;
46
}
47
body {
49
line-height: 1.5rem;
50
font-family: "Source Serif", serif;
51
font-weight: 375;
52
font-size: 1.125rem;
53
min-height: 100vh;
55
margin: 0;
56
display: flex;
57
flex-direction: column;
58
align-items: center;
59
background: #eceff1;
60
font-variation-settings: "opsz" 14;
61
}
62
:is(a:link, a:visited):not(nav a) {
64
color: #009688;
65
text-decoration-thickness: 0.0625em;
66
text-underline-offset: 0.125em;
67
font-weight: 550;
68
}
69
a:is(:hover, :focus):not(nav a) {
71
background: #B2DFDB;
72
color: #00796B;
73
border-radius: 0.25rem;
74
text-decoration: none;
75
outline: none;
76
}
77
header {
79
width: 100%;
80
font-family: "Source Sans", sans-serif;
81
position: sticky;
82
top: 0;
83
background: #eceff1;
84
display: flex;
85
justify-content: center;
86
z-index: 2;
87
}
88
nav {
90
width: min(800px, 100%);
91
display: flex;
92
justify-content: space-between;
93
align-items: center;
94
box-sizing: border-box;
95
min-height: 4rem;
96
padding: 1rem 0;
97
margin: 0 0.5rem;
98
}
99
nav > ul {
101
font-family: "Romanian League Gothic", sans-serif;
102
display: flex;
103
list-style: none;
104
padding: 0;
105
margin: 0;
106
align-items: center;
107
gap: 1rem;
108
font-weight: normal;
109
font-size: 1.75rem;
110
line-height: 2rem;
111
text-transform: uppercase;
112
}
113
@media (max-width: 576px) {
115
nav > ul {
116
flex-flow: row wrap;
117
justify-content: center;
118
row-gap: 0.5rem;
119
}
120
nav {
121
flex-direction: column;
122
gap: 1rem;
123
}
124
header {
125
position: static;
126
}
127
}
128
@media (max-width: 720px) {
130
nav {
131
flex-direction: column;
132
padding: 0.5rem;
133
gap: 0.5rem;
134
}
135
}
136
nav > ul > li > a {
138
font-weight: normal;
139
text-decoration: none;
140
color: #000000;
141
text-decoration-thickness: 0.125em;
142
text-shadow: none !important;
143
}
144
nav > ul > li > a:is(:hover, :focus) {
146
text-decoration: underline;
147
outline: none;
148
}
149
#skip-link {
151
font-size: 1.75rem;
152
line-height: 2rem;
153
text-transform: uppercase;
154
font-family: "Romanian League Gothic", sans-serif;
155
font-weight: normal;
156
text-decoration: none;
157
text-shadow: none !important;
158
text-decoration-thickness: 0.125em;
159
position: absolute;
160
transform: scaleY(0);
161
transform-origin: top;
162
background: #009688;
163
color: #ffffff;
164
padding: 0.5rem;
165
border-radius: 0;
166
}
167
@media (prefers-reduced-motion: no-preference) {
169
#skip-link {
170
transition: transform 200ms;
171
}
172
}
173
#skip-link:focus {
175
transform: scaleY(1);
176
z-index: 3;
177
}
178
footer {
180
width: min(800px, 100%);
181
padding: 1rem;
182
box-sizing: border-box;
183
font-family: "Source Sans", sans-serif;
184
}
185
main {
187
width: min(800px, 100%);
188
flex: 1 0 auto;
189
gap: 1rem;
190
display: flex;
191
flex-direction: column;
192
}
193
.content-area {
195
box-shadow: 0 0 1px #00000028,
196
0 0 2px #00000020,
197
0 2px 4px #00000010,
198
0 2px 18px -6px #00000010;
199
padding: 1rem;
200
box-sizing: border-box;
201
background: #ffffff;
202
}
203
h1 {
205
font-family: "Romanian League Gothic Condensed", sans-serif;
206
font-weight: normal;
207
font-size: 4rem;
208
line-height: 5rem;
209
margin: 0;
210
text-align: center;
211
border-bottom: 0.5px solid #000000;
212
}
213
h2 {
215
font-family: "Romanian League Gothic", sans-serif;
216
font-weight: normal;
217
font-size: 2.75rem;
218
line-height: 3rem;
219
margin: 0;
220
}
221
h3 {
223
font-family: "Source Sans", sans-serif;
224
font-weight: 725;
225
font-size: 1.875rem;
226
line-height: 3rem;
227
margin: 0;
228
}
229
h4 {
231
font-family: "Source Sans", sans-serif;
232
font-weight: 800;
233
font-size: 1.5rem;
234
line-height: 2rem;
235
margin: 0;
236
}
237
h5 {
239
font-family: "Source Sans", sans-serif;
240
font-weight: 800;
241
font-size: 1.25rem;
242
line-height: 2rem;
243
margin: 0;
244
}
245
h6 {
247
font-family: "Source Sans", sans-serif;
248
font-weight: 900;
249
font-size: 1.125rem;
250
line-height: 2rem;
251
margin: 0;
252
}
253
.article-title, .article-title a:link, .article-title a:visited {
255
text-decoration: none;
256
text-align: center;
257
color: #00796B;
258
display: block;
259
width: 100%;
260
background: transparent !important;
261
font-family: "Romanian League Gothic", sans-serif;
262
}
263
#mail-link {
265
color: #009688;
266
text-transform: none;
267
}
268
pre, code, kbd, samp, var {
270
font-family: "Source Code", monospace;
271
font-feature-settings: "zero" on;
272
}
273
pre {
275
overflow-x: auto;
276
padding: 1rem;
277
background: #263238;
278
color: #ffffff;
279
color-scheme: dark;
280
font-size: 1rem;
281
line-height: 1.25rem;
282
}
283
.project-title {
285
display: flex;
286
align-items: center;
287
justify-content: space-between;
288
gap: 1rem;
289
width: 100%;
290
border: none;
291
}
292
.project-title > h1 {
294
padding: 0.5rem;
295
border: none;
296
}
297
.project-title > a:any-link {
299
text-decoration: none;
300
background: #009688;
301
color: #ffffff;
302
padding: 0.5rem;
303
border: 4px solid #00796B;
304
box-sizing: border-box;
305
line-height: 1.25em;
306
font-size: 1.5em;
307
font-family: "Romanian League Gothic", sans-serif;
308
text-transform: uppercase;
309
display: flex;
310
align-items: center;
311
justify-content: center;
312
min-width: 25%;
313
height: 2lh;
314
transition: 400ms;
316
}
317
@media (max-width: 512px) {
319
.project-title {
320
flex-direction: column;
321
align-items: center;
322
}
323
.project-title > a {
325
min-height: 1.5lh;
326
margin: auto;
327
padding: 0 2rem;
328
}
329
}
330
.project-title > a:hover {
332
border-width: 8px;
333
}
334
strong, em {
336
font: inherit;
337
}
338
.emphasis-1 {
340
font-style: italic;
341
}
342
.emphasis-2 {
344
font-weight: 625;
345
}
346
.emphasis-3 {
348
font-variant: small-caps;
349
font-synthesis-small-caps: none;
350
}
351
#article-date, .home-article-date {
353
font-family: "Source Code", sans-serif;
354
font-feature-settings: "zero" on;
355
font-weight: 625;
356
text-align: center;
357
}
358
blockquote {
360
font-family: "Source Serif", serif;
361
font-weight: 350;
362
border-top: 0.5px solid #009688;
363
border-bottom: 0.5px solid #009688;
364
padding: 0.5rem 2rem;
365
margin: 0;
366
}
367
blockquote > p:first-child {
369
margin-top: 0;
370
}
371
blockquote > p:last-child {
373
margin-bottom: 0;
374
}
375
img:not(.article-image) {
377
max-width: 100%;
378
height: auto;
379
}
380
.topic-posts {
382
display: flex;
383
flex-direction: column;
384
gap: 0.5rem;
385
}
386
.topic-expander > summary {
388
display: flex;
389
justify-content: space-between;
390
align-items: center;
391
cursor: pointer;
392
text-transform: uppercase;
393
user-select: none;
394
align-items: center;
395
}
396
.topic-expander > summary > h2 {
398
font-family: "Romanian League Gothic", sans-serif;
399
font-size: 2.75rem;
400
}
401
.topic-expander > summary::after {
403
content: "▶";
404
transition: transform 400ms;
405
font-size: 1.5rem;
406
}
407
.topic-expander[open] > summary::after {
409
transform: rotate(90deg);
410
}
411
#index-container {
413
display: grid;
414
grid-template-columns: 1fr 1fr;
415
gap: 1rem;
416
margin: 0 1rem;
417
}
418
@media (max-width: 576px) {
420
#index-container {
421
grid-template-columns: 1fr;
422
}
423
}
424
.article-image {
426
width: calc(100% + 2rem) !important;
427
aspect-ratio: 64/27;
428
object-fit: cover;
429
position: relative;
430
z-index: 0;
431
top: -1rem;
432
left: -1rem;
433
}
434
.tags {
436
margin: 0;
437
display: flex;
438
gap: 0.5rem;
439
flex-wrap: wrap;
440
font-family: "Source Sans", sans-serif;
441
}
442
.tag::before {
444
content: "#";
445
}
446
.tag {
448
text-decoration: none;
449
}
450
p {
452
margin: 1lh 0;
453
}
454
.content-area p:first-child {
456
margin-top: 0;
457
}
458
.content-area p:last-child {
460
margin-bottom: 0;
461
}
462
@media (prefers-color-scheme: dark) {
464
:root {
465
color-scheme: dark;
466
}
467
body, header {
468
background: #37474F;
469
color: #ffffff;
470
}
471
.content-area {
472
background: #455A64;
473
color: #ffffff;
474
}
475
nav > ul > li > a {
476
color: #f5f5f5;
477
}
478
:is(a:link, a:visited):not(nav a), #mail-link {
479
color: #80CBC4;
480
}
481
a:is(:hover, :focus):not(nav a) {
482
background: #607D8B;
483
color: #B2DFDB;
484
}
485
h1 {
486
border-bottom: 0.5px solid #ffffff;
487
}
488
.article-title, .article-title a:link, .article-title a:visited {
489
color: #4DB6AC;
490
}
491
blockquote {
492
border-top: 0.5px solid #80CBC4;
493
border-bottom: 0.5px solid #80CBC4;
494
}
495
}
496