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