this repo has no description
Apply colour changes
TODO: fix many a11y issues
+52
-26
+52
-26
src/pages/blog/[id].astro
+52
-26
src/pages/blog/[id].astro
···
102
102
103
103
& blockquote {
104
104
&[data-bq-flag--note] {
105
-
--accent: skyblue; /* CHANGE */
106
-
--icon: "📝"; /* CHANGE */
105
+
--accent: var(--rainbow-4);
106
+
--icon: "📝";
107
107
--name: "Note";
108
108
}
109
109
110
110
&[data-bq-flag--alert] {
111
-
--accent: orangered; /* CHANGE */
112
-
--icon: "🚨"; /* CHANGE */
111
+
--accent: var(--rainbow-0);
112
+
--icon: "🚨";
113
113
--name: "Alert";
114
114
}
115
115
116
116
&[data-bq-flag--info] {
117
-
--accent: rebeccapurple; /* CHANGE */
118
-
--icon: "📚"; /* CHANGE */
117
+
--accent: var(--rainbow-5);
118
+
--icon: "📚";
119
119
--name: "Info";
120
120
}
121
121
}
···
123
123
& p,
124
124
& div:has(> p) {
125
125
&[data-para-flag--bg-red] {
126
-
background-color: #ee6f9a; /* CHANGE */
127
-
color: var(--light-text); /* CHANGE */
126
+
background-color: var(--rainbow-0);
127
+
}
128
+
129
+
&[data-para-flag--bg-orange] {
130
+
background-color: var(--rainbow-1);
131
+
}
132
+
133
+
&[data-para-flag--bg-yellow] {
134
+
background-color: var(--rainbow-2);
135
+
}
136
+
137
+
&[data-para-flag--bg-green] {
138
+
background-color: var(--rainbow-3);
139
+
}
140
+
141
+
&[data-para-flag--bg-blue] {
142
+
background-color: var(--rainbow-4);
143
+
}
144
+
145
+
&[data-para-flag--bg-purple] {
146
+
background-color: var(--rainbow-5);
128
147
}
129
148
}
130
149
···
199
218
200
219
/* Blockquotes */
201
220
& blockquote {
202
-
--accent: #a8a8a8; /* CHANGE */
221
+
--accent: var(--bg-secondary);
203
222
border-left: 0.2rem solid var(--accent);
204
223
padding: 1rem 4rem 1rem 1rem;
205
224
margin: 1rem;
206
225
border-radius: 0.5rem;
207
-
background-color: rgb(from var(--accent) r g b / 0.5);
226
+
background-color: light-dark(
227
+
hsl(from var(--accent) h calc(s * 0.75) calc(l * 2)),
228
+
hsl(from var(--accent) h calc(s * 0.75) calc(l * 0.5))
229
+
);
208
230
width: fit-content;
209
231
min-width: 20rem;
210
232
···
215
237
216
238
/* Inline code */
217
239
:not(pre) > code {
218
-
color: var(--accent);
240
+
color: var(--rainbow-3);
219
241
background-color: #00000040;
220
242
padding: 0.2rem;
221
243
border-radius: 0.5rem;
···
256
278
height: 2.5rem;
257
279
margin-inline-end: 0.5rem;
258
280
259
-
background: rgb(255, 255, 255, 0.4); /* CHANGE */
281
+
background: light-dark(rgb(0, 0, 0, 0.2), rgb(255, 255, 255, 0.4));
260
282
border-radius: 0.5rem;
261
-
border: 0.1rem solid white;
283
+
border: 0.1rem solid var(--typo-body);
262
284
263
285
&:checked {
264
286
--checkmark: url("../../assets/check.svg");
265
287
background: var(--checkmark) center/2rem padding-box no-repeat
266
-
rgb(0, 130, 130); /* Change */
288
+
var(--rainbow-2);
267
289
}
268
290
}
269
291
}
···
280
302
}
281
303
282
304
& thead th {
283
-
background-color: rgb(145, 53, 68); /* CHANGE */
305
+
background-color: var(--rainbow-2);
284
306
}
285
307
286
308
& tbody tr:nth-child(2n) {
287
-
background-color: #ffffff10; /* CHANGE */
309
+
background-color: #ffffff10;
288
310
}
289
311
}
290
312
}
···
345
367
align-items: center;
346
368
justify-content: space-between;
347
369
348
-
background-color: var(--bg);
370
+
background-color: var(--bg-main);
349
371
padding-bottom: 0.5rem;
350
372
351
373
& > :last-child {
···
355
377
}
356
378
357
379
#colour-toggle {
358
-
background-color: var(--text);
380
+
background-color: var(--typo-body);
381
+
359
382
border: none;
360
383
border-radius: 50%;
361
384
padding: 0.5rem;
362
385
386
+
width: 3.4rem;
387
+
height: 3.4rem;
388
+
363
389
& svg {
364
-
fill: var(--bg);
365
-
stroke: var(--bg);
390
+
fill: var(--bg-main);
391
+
stroke: var(--bg-main);
366
392
}
367
393
}
368
394
369
395
body {
370
-
background-color: var(--bg);
371
-
color: var(--text);
396
+
background-color: var(--bg-main);
397
+
color: var(--typo-body);
398
+
}
399
+
400
+
.content {
401
+
padding-block: 4em;
372
402
}
373
403
374
404
.content,
375
405
:global(.full-width),
376
406
:global([data-para-flag--full-width]) {
377
-
&.content {
378
-
padding-block: 4em;
379
-
}
380
-
381
407
--padding-inline: 2rem;
382
408
--content-max-width: 60ch;
383
409
--breakout-max-width: 80ch;