By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 style.css

View raw Download
text/plain • 5.24 kiB
ASCII 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
8
@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
15
@font-face {
16
font-family: "Source Serif";
17
src: url("/static/fonts/SourceSerif4Variable-Roman.otf.woff2") format("woff2-variations");
18
}
19
20
@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
26
@font-face {
27
font-family: "Source Sans";
28
src: url("/static/fonts/SourceSans3VF-Upright.otf.woff2") format("woff2-variations");
29
}
30
31
@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
37
@font-face {
38
font-family: "Source Code";
39
src: url("/static/fonts/SourceCodeVF-Upright.otf.woff2") format("woff2-variations");
40
}
41
42
@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
48
body {
49
line-height: 1.5rem;
50
font-family: "Source Serif", serif;
51
font-weight: 375;
52
font-size: 1.125rem;
53
54
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
63
a {
64
color: #009688;
65
text-decoration-thickness: 0.125em;
66
}
67
68
header {
69
width: 100%;
70
font-family: "Source Sans", sans-serif;
71
position: sticky;
72
top: 0;
73
background: #eceff1;
74
display: flex;
75
justify-content: center;
76
}
77
78
nav {
79
width: min(800px, 100%);
80
display: flex;
81
justify-content: space-between;
82
align-items: center;
83
box-sizing: border-box;
84
height: 4rem;
85
}
86
87
nav > ul {
88
font-family: "Romanian League Gothic", sans-serif;
89
display: flex;
90
list-style: none;
91
padding: 0;
92
margin: 0;
93
align-items: center;
94
gap: 1rem;
95
font-weight: normal;
96
font-size: 1.75rem;
97
line-height: 2rem;
98
text-transform: uppercase;
99
}
100
101
nav > ul > li > a {
102
font-weight: normal;
103
text-decoration: none;
104
color: #000000;
105
text-decoration-thickness: 0.125em;
106
}
107
108
nav > ul > li > a:hover {
109
text-decoration: underline;
110
}
111
112
footer {
113
width: min(800px, 100%);
114
padding: 1rem;
115
box-sizing: border-box;
116
font-family: "Source Sans", sans-serif;
117
}
118
119
main {
120
width: min(800px, 100%);
121
flex: 1 0 auto;
122
gap: 1rem;
123
display: flex;
124
flex-direction: column;
125
}
126
127
.content-area {
128
box-shadow: 0 0 1px #00000028,
129
0 0 2px #00000020,
130
0 2px 4px #00000010,
131
0 2px 18px -6px #00000010;
132
padding: 1rem;
133
box-sizing: border-box;
134
background: #ffffff;
135
}
136
137
h1 {
138
font-family: "Romanian League Gothic Condensed", sans-serif;
139
font-weight: normal;
140
font-size: 4rem;
141
line-height: 5rem;
142
margin: 0;
143
text-align: center;
144
border-bottom: 0.5px solid #000000;
145
}
146
147
h2 {
148
font-family: "Romanian League Gothic", sans-serif;
149
font-weight: normal;
150
font-size: 2.75rem;
151
line-height: 3rem;
152
margin: 0;
153
}
154
155
h3 {
156
font-family: "Source Sans", sans-serif;
157
font-weight: 725;
158
font-size: 1.875rem;
159
line-height: 3rem;
160
margin: 0;
161
}
162
163
h4 {
164
font-family: "Source Sans", sans-serif;
165
font-weight: 800;
166
font-size: 1.5rem;
167
line-height: 2rem;
168
margin: 0;
169
}
170
171
h5 {
172
font-family: "Source Sans", sans-serif;
173
font-weight: 800;
174
font-size: 1.25rem;
175
line-height: 2rem;
176
margin: 0;
177
}
178
179
h6 {
180
font-family: "Source Sans", sans-serif;
181
font-weight: 900;
182
font-size: 1.125rem;
183
line-height: 2rem;
184
margin: 0;
185
}
186
187
.article-title {
188
text-decoration: none;
189
text-align: center;
190
color: #009688;
191
display: block;
192
width: 100%;
193
}
194
195
#mail-link {
196
color: #009688;
197
text-transform: none;
198
}
199
200
pre, code, kbd, samp, var {
201
font-family: "Source Code", monospace;
202
}
203
204
pre {
205
overflow-x: auto;
206
padding: 1rem;
207
background: #263238;
208
color: #ffffff;
209
color-scheme: dark;
210
font-size: 1rem;
211
line-height: 1.25rem;
212
}
213
214
.project-title {
215
display: flex;
216
align-items: center;
217
justify-content: space-between;
218
gap: 1rem;
219
width: 100%;
220
border: none;
221
}
222
223
.project-title > span {
224
padding: 0.5rem;
225
}
226
227
.project-title > a {
228
text-decoration: none;
229
background: #009688;
230
color: #ffffff;
231
padding: 0 1rem;
232
border: 4px solid #00796B;
233
box-sizing: border-box;
234
line-height: 1.25em;
235
font-size: 0.875em;
236
font-family: "Romanian League Gothic Condensed", sans-serif;
237
align-self: stretch;
238
display: flex;
239
align-items: center;
240
justify-content: center;
241
min-width: 25%;
242
243
transition: 400ms;
244
}
245
246
.project-title > a:hover {
247
border-width: 8px;
248
}
249
250
strong, em {
251
font: inherit;
252
}
253
254
.emphasis-1 {
255
font-style: italic;
256
}
257
258
.emphasis-2 {
259
font-weight: 625;
260
}
261
262
.emphasis-3 {
263
font-variant: small-caps;
264
font-synthesis-small-caps: none;
265
}
266
267
#article-date, .home-article-date {
268
font-family: "Source Code", sans-serif;
269
font-feature-settings: "zero" on;
270
font-weight: 625;
271
text-align: center;
272
}