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:hover:not(nav a) {
71
background: #B2DFDB;
72
color: #00796B;
73
border-radius: 0.25rem;
74
text-decoration: none;
75
}
76
header {
78
width: 100%;
79
font-family: "Source Sans", sans-serif;
80
position: sticky;
81
top: 0;
82
background: #eceff1;
83
display: flex;
84
justify-content: center;
85
}
86
nav {
88
width: min(800px, 100%);
89
display: flex;
90
justify-content: space-between;
91
align-items: center;
92
box-sizing: border-box;
93
min-height: 4rem;
94
padding: 1rem 0;
95
margin: 0 0.5rem;
96
}
97
nav > ul {
99
font-family: "Romanian League Gothic", sans-serif;
100
display: flex;
101
list-style: none;
102
padding: 0;
103
margin: 0;
104
align-items: center;
105
gap: 1rem;
106
font-weight: normal;
107
font-size: 1.75rem;
108
line-height: 2rem;
109
text-transform: uppercase;
110
}
111
@media (max-width: 576px) {
113
nav > ul {
114
flex-flow: row wrap;
115
justify-content: center;
116
row-gap: 0.5rem;
117
}
118
nav {
119
flex-direction: column;
120
gap: 1rem;
121
}
122
header {
123
position: static;
124
}
125
}
126
@media (max-width: 720px) {
128
nav {
129
flex-direction: column;
130
padding: 0.5rem;
131
gap: 0.5rem;
132
}
133
}
134
nav > ul > li > a {
136
font-weight: normal;
137
text-decoration: none;
138
color: #000000;
139
text-decoration-thickness: 0.125em;
140
text-shadow: none !important;
141
}
142
nav > ul > li > a:hover {
144
text-decoration: underline;
145
}
146
footer {
148
width: min(800px, 100%);
149
padding: 1rem;
150
box-sizing: border-box;
151
font-family: "Source Sans", sans-serif;
152
}
153
main {
155
width: min(800px, 100%);
156
flex: 1 0 auto;
157
gap: 1rem;
158
display: flex;
159
flex-direction: column;
160
}
161
.content-area {
163
box-shadow: 0 0 1px #00000028,
164
0 0 2px #00000020,
165
0 2px 4px #00000010,
166
0 2px 18px -6px #00000010;
167
padding: 1rem;
168
box-sizing: border-box;
169
background: #ffffff;
170
}
171
h1 {
173
font-family: "Romanian League Gothic Condensed", sans-serif;
174
font-weight: normal;
175
font-size: 4rem;
176
line-height: 5rem;
177
margin: 0;
178
text-align: center;
179
border-bottom: 0.5px solid #000000;
180
}
181
h2 {
183
font-family: "Romanian League Gothic", sans-serif;
184
font-weight: normal;
185
font-size: 2.75rem;
186
line-height: 3rem;
187
margin: 0;
188
}
189
h3 {
191
font-family: "Source Sans", sans-serif;
192
font-weight: 725;
193
font-size: 1.875rem;
194
line-height: 3rem;
195
margin: 0;
196
}
197
h4 {
199
font-family: "Source Sans", sans-serif;
200
font-weight: 800;
201
font-size: 1.5rem;
202
line-height: 2rem;
203
margin: 0;
204
}
205
h5 {
207
font-family: "Source Sans", sans-serif;
208
font-weight: 800;
209
font-size: 1.25rem;
210
line-height: 2rem;
211
margin: 0;
212
}
213
h6 {
215
font-family: "Source Sans", sans-serif;
216
font-weight: 900;
217
font-size: 1.125rem;
218
line-height: 2rem;
219
margin: 0;
220
}
221
.article-title, .article-title a:link, .article-title a:visited {
223
text-decoration: none;
224
text-align: center;
225
color: #00796B;
226
display: block;
227
width: 100%;
228
background: transparent !important;
229
font-family: "Romanian League Gothic", sans-serif;
230
}
231
#mail-link {
233
color: #009688;
234
text-transform: none;
235
}
236
pre, code, kbd, samp, var {
238
font-family: "Source Code", monospace;
239
font-feature-settings: "zero" on;
240
}
241
pre {
243
overflow-x: auto;
244
padding: 1rem;
245
background: #263238;
246
color: #ffffff;
247
color-scheme: dark;
248
font-size: 1rem;
249
line-height: 1.25rem;
250
}
251
.project-title {
253
display: flex;
254
align-items: center;
255
justify-content: space-between;
256
gap: 1rem;
257
width: 100%;
258
border: none;
259
}
260
.project-title > h1 {
262
padding: 0.5rem;
263
border: none;
264
}
265
.project-title > a:any-link {
267
text-decoration: none;
268
background: #009688;
269
color: #ffffff;
270
padding: 0.5rem;
271
border: 4px solid #00796B;
272
box-sizing: border-box;
273
line-height: 1.25em;
274
font-size: 1.5em;
275
font-family: "Romanian League Gothic", sans-serif;
276
text-transform: uppercase;
277
display: flex;
278
align-items: center;
279
justify-content: center;
280
min-width: 25%;
281
height: 2lh;
282
transition: 400ms;
284
}
285
@media (max-width: 512px) {
287
.project-title {
288
flex-direction: column;
289
align-items: center;
290
}
291
.project-title > a {
293
min-height: 1.5lh;
294
margin: auto;
295
padding: 0 2rem;
296
}
297
}
298
.project-title > a:hover {
300
border-width: 8px;
301
}
302
strong, em {
304
font: inherit;
305
}
306
.emphasis-1 {
308
font-style: italic;
309
}
310
.emphasis-2 {
312
font-weight: 625;
313
}
314
.emphasis-3 {
316
font-variant: small-caps;
317
font-synthesis-small-caps: none;
318
}
319
#article-date, .home-article-date {
321
font-family: "Source Code", sans-serif;
322
font-feature-settings: "zero" on;
323
font-weight: 625;
324
text-align: center;
325
}
326
blockquote {
328
font-family: "Source Serif", serif;
329
font-weight: 350;
330
border-top: 0.5px solid #009688;
331
border-bottom: 0.5px solid #009688;
332
padding: 0.5rem 2rem;
333
margin: 0;
334
}
335
blockquote > p:first-child {
337
margin-top: 0;
338
}
339
blockquote > p:last-child {
341
margin-bottom: 0;
342
}
343
img:not(.article-image) {
345
max-width: 100%;
346
height: auto;
347
}
348
.topic-posts {
350
display: flex;
351
flex-direction: column;
352
gap: 0.5rem;
353
}
354
.topic-expander > summary {
356
display: flex;
357
justify-content: space-between;
358
align-items: center;
359
cursor: pointer;
360
text-transform: uppercase;
361
user-select: none;
362
align-items: center;
363
}
364
.topic-expander > summary > h2 {
366
font-family: "Romanian League Gothic", sans-serif;
367
font-size: 2.75rem;
368
}
369
.topic-expander > summary::after {
371
content: "▶";
372
transition: transform 400ms;
373
font-size: 1.5rem;
374
}
375
.topic-expander[open] > summary::after {
377
transform: rotate(90deg);
378
}
379
#index-container {
381
display: grid;
382
grid-template-columns: 1fr 1fr;
383
gap: 1rem;
384
margin: 0 1rem;
385
}
386
@media (max-width: 576px) {
388
#index-container {
389
grid-template-columns: 1fr;
390
}
391
}
392
.article-image {
394
width: calc(100% + 2rem) !important;
395
aspect-ratio: 64/27;
396
object-fit: cover;
397
position: relative;
398
top: -1rem;
399
left: -1rem;
400
}
401
.tags {
403
margin: 0;
404
display: flex;
405
gap: 0.5rem;
406
flex-wrap: wrap;
407
font-family: "Source Sans", sans-serif;
408
}
409
.tag::before {
411
content: "#";
412
}
413
.tag {
415
text-decoration: none;
416
}
417