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