1:root {
  2  --rosewater: #dc8a78;
  3  --flamingo: #dd7878;
  4  --pink: #ea76cb;
  5  --mauve: #8839ef;
  6  --red: #d20f39;
  7  --maroon: #e64553;
  8  --peach: #fe640b;
  9  --yellow: #df8e1d;
 10  --green: #40a02b;
 11  --teal: #179299;
 12  --sky: #04a5e5;
 13  --sapphire: #209fb5;
 14  --blue: #1e66f5;
 15  --lavender: #7287fd;
 16  --text: #4c4f69;
 17  --subtext1: #5c5f77;
 18  --subtext0: #6c6f85;
 19  --overlay2: #7c7f93;
 20  --overlay1: #8c8fa1;
 21  --overlay0: #9ca0b0;
 22  --surface2: #acb0be;
 23  --surface1: #bcc0cc;
 24  --surface0: #ccd0da;
 25  --base: #eff1f5;
 26  --mantle: #e6e9ef;
 27  --crust: #dce0e8;
 28  --inverted-text: var(--base);
 29  --selection-color: var(--blue);
 30
 31  --color-primary: var(--lavender);
 32  --color-bg: white;
 33  --color-primary-light: color-mix(
 34    in srgb,
 35    var(--color-primary) 7%,
 36    var(--color-bg)
 37  );
 38  --text-primary: var(--text);
 39  --text-secondary: var(--subtext1);
 40  --font-family-normal:
 41    Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 42    Bitstream Vera Sans Mono, Courier New, monospace, serif;
 43  --font-family-alt:
 44    "Departure", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
 45    "Liberation Mono", monospace;
 46}
 47
 48@font-face {
 49  font-family: Departure;
 50  src: url("/fonts/DepartureMono-Regular.woff2");
 51}
 52
 53body {
 54  font-family: var(--font-family-normal);
 55  background-color: var(--color-bg);
 56  color: var(--text-primary);
 57}
 58
 59header {
 60  font-family: var(--font-family-alt);
 61  font-size: 1.5rem;
 62}
 63
 64main {
 65  max-width: 40rem;
 66  margin: 0 auto;
 67  padding: 2rem 0 4rem;
 68}
 69
 70blockquote {
 71  font-family: var(--font-family-alt);
 72  margin: 0;
 73  padding-left: 1rem;
 74  color: var(--text-secondary);
 75  border-left: 6px solid var(--color-primary);
 76}
 77
 78:not(a) > img {
 79  width: 100%;
 80}
 81
 82a {
 83  color: var(--color-primary);
 84  color: color-mix(in srgb, var(--color-primary) 50%, var(--text-primary));
 85  text-decoration: none;
 86}
 87
 88a:hover {
 89  color: #818cf8;
 90  text-decoration: underline;
 91}
 92
 93h1,
 94h2,
 95h3 {
 96  font-family: var(--font-family-alt);
 97  background-color: var(--color-primary-light);
 98  border-radius: 4px;
 99  padding: 0.25rem 0.5rem;
100}
101
102h1 {
103  font-size: 1.5rem;
104  line-height: 2rem;
105}
106
107h2 {
108  font-size: 1.25rem;
109  line-height: 1.75rem;
110  margin-bottom: 1rem;
111  background-color: color-mix(
112    in srgb,
113    var(--color-primary) 9%,
114    var(--color-bg)
115  );
116}
117
118h3 {
119  background-color: color-mix(
120    in srgb,
121    var(--color-primary) 7%,
122    var(--color-bg)
123  );
124}
125
126p {
127  margin: 1.5rem 0;
128  line-height: 1.5;
129}
130
131ul {
132  line-height: 1.3;
133}
134
135input,
136textarea {
137  border-radius: 4px;
138  border: 1px solid #eee;
139  padding: 0.5rem;
140  resize: vertical;
141}
142
143button {
144  border-radius: 4px;
145  color: white;
146  background-color: var(--color-primary);
147  border: none;
148  padding: 0.5rem;
149  cursor: pointer;
150
151  &:hover,
152  &:focus {
153    opacity: 0.8;
154  }
155}
156
157pre:has(code) {
158  padding: 0.5rem 0.75rem;
159  border-radius: 4px;
160  overflow: auto;
161}
162
163:not(pre) > code {
164  font-size: 0.9rem;
165  color: var(--text-secondary);
166  background-color: var(--color-primary-light);
167  padding: 0 0.25rem;
168  border-radius: 4px;
169}
170
171nav {
172  display: grid;
173  grid-template-columns: 1fr 1fr 1fr;
174  margin: 2rem 0;
175}
176
177nav > a {
178  font-family: var(--font-family-alt);
179  color: var(--text-primary);
180  display: flex;
181  gap: 0.5rem;
182  align-items: center;
183  padding-top: 0.5rem;
184  padding-bottom: 0.5rem;
185
186  &:hover {
187    text-decoration: none;
188  }
189}
190
191.date {
192  font-family: var(--font-family-alt);
193  font-size: 0.9rem;
194  color: var(--text-secondary);
195  background-color: var(--color-primary-light);
196  padding: 0 0.25rem;
197  border-radius: 4px;
198}
199
200.projects {
201  & .project {
202    margin-bottom: 2rem;
203  }
204
205  & .lang {
206    color: var(--text-secondary);
207    font-size: 80%;
208    padding: 0 4px;
209    border-radius: 4px;
210  }
211
212  & a {
213    min-width: 10rem;
214  }
215
216  & p {
217    margin: 0.5rem 0 0;
218    font-size: 14px;
219  }
220}
221
222.activity-grid {
223  display: grid;
224  grid-template-columns: 1fr 4fr;
225  column-gap: 1rem;
226  row-gap: 1rem;
227  padding-left: 0.5rem;
228
229  > h4 {
230    font-family: var(--font-family-alt);
231    font-size: 14px;
232    margin: 0;
233  }
234}
235
236.contact {
237  font-family: var(--font-family-alt);
238  padding-left: 0.5rem;
239  display: grid;
240  grid-template-columns: 1fr 1fr;
241  row-gap: 1rem;
242
243  > a {
244    display: flex;
245    align-items: center;
246    gap: 0.5rem;
247
248    &:hover {
249      text-decoration: none;
250    }
251  }
252}
253
254#contact-form {
255  display: flex;
256  flex-direction: column;
257  row-gap: 1rem;
258
259  > button {
260    width: 100%;
261  }
262}
263
264ul.categories-list {
265  padding-left: 0;
266}
267
268ul.categories-list li {
269  padding: 0.8rem 0;
270  list-style: none;
271}
272
273ul.categories-list li::before {
274  content: "🌱 ";
275}
276
277.icon-pixel {
278  height: 1rem;
279}
280
281@media only screen and (max-width: 600px) {
282  main {
283    padding: 0 0.5rem;
284  }
285
286  nav {
287    display: grid;
288    grid-template-columns: 1fr 1fr;
289  }
290
291  .contact {
292    display: flex;
293    flex-direction: column;
294  }
295
296  .activity-grid {
297    grid-template-columns: 1fr;
298  }
299
300  ul.links-list {
301    padding-left: 1rem;
302    font-size: 1.1rem;
303
304    & > * {
305      margin-bottom: 1rem;
306    }
307  }
308}
309
310@media (prefers-color-scheme: dark) {
311  :root {
312    --rosewater: #f5e0dc;
313    --flamingo: #f2cdcd;
314    --pink: #f5c2e7;
315    --mauve: #cba6f7;
316    --red: #f38ba8;
317    --maroon: #eba0ac;
318    --peach: #fab387;
319    --yellow: #f9e2af;
320    --green: #a6e3a1;
321    --teal: #94e2d5;
322    --sky: #89dceb;
323    --sapphire: #74c7ec;
324    --blue: #89b4fa;
325    --lavender: #b4befe;
326    --text: #cdd6f4;
327    --subtext1: #bac2de;
328    --subtext0: #a6adc8;
329    --overlay2: #9399b2;
330    --overlay1: #7f849c;
331    --overlay0: #6c7086;
332    --surface2: #585b70;
333    --surface1: #45475a;
334    --surface0: #313244;
335    --base: #1e1e2e;
336    --mantle: #181825;
337    --crust: #11111b;
338    --inverted-text: var(--crust);
339    --selection-color: var(--mauve);
340
341    --color-bg: var(--base);
342  }
343
344  body {
345    color: white;
346  }
347}