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  font-size: 90%;
 77}
 78
 79:not(a) > img {
 80  width: 100%;
 81}
 82
 83a {
 84  color: var(--color-primary);
 85  color: color-mix(in srgb, var(--color-primary) 50%, var(--text-primary));
 86  text-decoration: none;
 87}
 88
 89a:hover {
 90  color: #818cf8;
 91  text-decoration: underline;
 92}
 93
 94h1,
 95h2,
 96h3 {
 97  font-family: var(--font-family-alt);
 98  border-radius: 4px;
 99  padding: 0.5rem 0;
100  color: var(--color-primary);
101}
102
103h1 {
104  font-size: 1.5rem;
105  line-height: 2rem;
106}
107
108h2 {
109  font-size: 1.25rem;
110  line-height: 1.75rem;
111  margin-bottom: 1rem;
112}
113
114p {
115  margin: 1.5rem 0;
116  line-height: 1.5;
117}
118
119ul {
120  line-height: 1.3;
121}
122
123input,
124textarea {
125  border-radius: 4px;
126  border: 1px solid #eee;
127  padding: 0.5rem;
128  resize: vertical;
129}
130
131button {
132  border-radius: 4px;
133  color: white;
134  background-color: var(--color-primary);
135  border: none;
136  padding: 0.5rem;
137  cursor: pointer;
138
139  &:hover,
140  &:focus {
141    opacity: 0.8;
142  }
143}
144
145pre:has(code) {
146  padding: 0.5rem 0.75rem;
147  border-radius: 4px;
148  overflow: auto;
149}
150
151:not(pre) > code {
152  font-size: 0.9rem;
153  color: var(--text-secondary);
154  background-color: var(--color-primary-light);
155  padding: 0 0.25rem;
156  border-radius: 4px;
157}
158
159nav {
160  display: grid;
161  grid-template-columns: 1fr 1fr 1fr;
162  margin: 2rem 0;
163}
164
165nav > a {
166  font-family: var(--font-family-alt);
167  color: var(--text-primary);
168  display: flex;
169  gap: 0.5rem;
170  align-items: center;
171  padding-top: 0.5rem;
172  padding-bottom: 0.5rem;
173
174  &:hover {
175    text-decoration: none;
176  }
177}
178
179.date {
180  font-family: var(--font-family-alt);
181  font-size: 0.9rem;
182  color: var(--text-secondary);
183  background-color: var(--color-primary-light);
184  padding: 0 0.25rem;
185  border-radius: 4px;
186}
187
188.projects {
189  & .project {
190    margin-bottom: 2rem;
191  }
192
193  & .lang {
194    color: var(--text-secondary);
195    font-size: 80%;
196    padding: 0 4px;
197    border-radius: 4px;
198  }
199
200  & a {
201    min-width: 10rem;
202  }
203
204  & p {
205    margin: 0.5rem 0 0;
206    font-size: 14px;
207  }
208}
209
210.activity-grid {
211  display: grid;
212  grid-template-columns: 1fr 4fr;
213  column-gap: 1rem;
214  row-gap: 1rem;
215  padding-left: 0.5rem;
216
217  > h4 {
218    font-family: var(--font-family-alt);
219    font-size: 14px;
220    margin: 0;
221  }
222}
223
224.contact {
225  font-family: var(--font-family-alt);
226  padding-left: 0.5rem;
227  display: grid;
228  grid-template-columns: 1fr 1fr;
229  row-gap: 1rem;
230
231  > a {
232    display: flex;
233    align-items: center;
234    gap: 0.5rem;
235
236    &:hover {
237      text-decoration: none;
238    }
239  }
240}
241
242#contact-form {
243  display: flex;
244  flex-direction: column;
245  row-gap: 1rem;
246
247  > button {
248    width: 100%;
249  }
250}
251
252ul.categories-list {
253  padding-left: 0;
254}
255
256ul.categories-list li {
257  padding: 0.8rem 0;
258  list-style: none;
259}
260
261ul.categories-list li::before {
262  content: "🌱 ";
263}
264
265.icon-pixel {
266  height: 1rem;
267}
268
269@media only screen and (max-width: 600px) {
270  main {
271    padding: 0 0.5rem;
272  }
273
274  nav {
275    display: grid;
276    grid-template-columns: 1fr 1fr;
277  }
278
279  .contact {
280    display: flex;
281    flex-direction: column;
282  }
283
284  .activity-grid {
285    grid-template-columns: 1fr;
286  }
287
288  ul.links-list {
289    padding-left: 1rem;
290    font-size: 1.1rem;
291
292    & > * {
293      margin-bottom: 1rem;
294    }
295  }
296}
297
298@media (prefers-color-scheme: dark) {
299  :root {
300    --rosewater: #f5e0dc;
301    --flamingo: #f2cdcd;
302    --pink: #f5c2e7;
303    --mauve: #cba6f7;
304    --red: #f38ba8;
305    --maroon: #eba0ac;
306    --peach: #fab387;
307    --yellow: #f9e2af;
308    --green: #a6e3a1;
309    --teal: #94e2d5;
310    --sky: #89dceb;
311    --sapphire: #74c7ec;
312    --blue: #89b4fa;
313    --lavender: #b4befe;
314    --text: #cdd6f4;
315    --subtext1: #bac2de;
316    --subtext0: #a6adc8;
317    --overlay2: #9399b2;
318    --overlay1: #7f849c;
319    --overlay0: #6c7086;
320    --surface2: #585b70;
321    --surface1: #45475a;
322    --surface0: #313244;
323    --base: #1e1e2e;
324    --mantle: #181825;
325    --crust: #11111b;
326    --inverted-text: var(--crust);
327    --selection-color: var(--mauve);
328
329    --color-bg: var(--base);
330  }
331
332  body {
333    color: white;
334  }
335}