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