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 > span {
262
padding: 0.5rem;
263
}
264
.project-title > a:link, .project-title > a:visited {
266
text-decoration: none;
267
background: #009688;
268
color: #ffffff;
269
padding: 0.5rem;
270
border: 4px solid #00796B;
271
box-sizing: border-box;
272
line-height: 1.25em;
273
font-size: 0.625em;
274
font-family: "Romanian League Gothic", sans-serif;
275
text-transform: uppercase;
276
display: flex;
277
align-items: center;
278
justify-content: center;
279
min-width: 25%;
280
transition: 400ms;
282
}
283
@media (max-width: 512px) {
285
.project-title {
286
flex-direction: column;
287
align-items: center;
288
}
289
.project-title > a {
291
min-height: 1.5lh;
292
margin: auto;
293
padding: 0 2rem;
294
}
295
}
296
.project-title > a:hover {
298
border-width: 8px;
299
}
300
strong, em {
302
font: inherit;
303
}
304
.emphasis-1 {
306
font-style: italic;
307
}
308
.emphasis-2 {
310
font-weight: 625;
311
}
312
.emphasis-3 {
314
font-variant: small-caps;
315
font-synthesis-small-caps: none;
316
}
317
#article-date, .home-article-date {
319
font-family: "Source Code", sans-serif;
320
font-feature-settings: "zero" on;
321
font-weight: 625;
322
text-align: center;
323
}
324
blockquote {
326
font-family: "Source Serif", serif;
327
font-weight: 350;
328
border-top: 0.5px solid #009688;
329
border-bottom: 0.5px solid #009688;
330
padding: 0.5rem 2rem;
331
margin: 0;
332
}
333
blockquote > p:first-child {
335
margin-top: 0;
336
}
337
blockquote > p:last-child {
339
margin-bottom: 0;
340
}
341
img:not(.article-image) {
343
max-width: 100%;
344
height: auto;
345
}
346
.topic-expander .topic-posts {
348
display: flex;
349
flex-direction: column;
350
gap: 0.5rem;
351
}
352
.topic-expander > summary {
354
display: flex;
355
justify-content: space-between;
356
align-items: center;
357
cursor: pointer;
358
text-transform: uppercase;
359
user-select: none;
360
align-items: center;
361
}
362
.topic-expander > summary > h2 {
364
font-family: "Romanian League Gothic", sans-serif;
365
font-size: 2.75rem;
366
}
367
.topic-expander > summary::after {
369
content: "▶";
370
transition: transform 400ms;
371
font-size: 1.5rem;
372
}
373
.topic-expander[open] > summary::after {
375
transform: rotate(90deg);
376
}
377
#index-container {
379
display: grid;
380
grid-template-columns: 1fr 1fr;
381
gap: 1rem;
382
margin: 0 1rem;
383
}
384
@media (max-width: 576px) {
386
#index-container {
387
grid-template-columns: 1fr;
388
}
389
}
390
.article-image {
392
width: calc(100% + 2rem) !important;
393
aspect-ratio: 64/27;
394
object-fit: cover;
395
position: relative;
396
top: -1rem;
397
left: -1rem;
398
}
399