this repo has no description
Create completely new colour palette which resolves all issues from Axe Devtools.
TODO:
- overhaul sidebar nav to make more usable and less unsightly
- resolve firefox accessibility warnings:
- hamburger menu not labeled
- sun/moon not labeled
- remove tab focus on .astro-code
- modify parser to make labels for checkbox lists actual labels
- add copy code button to outline code elements
+51
-77
+1
-4
astro.config.mjs
+1
-4
astro.config.mjs
···
17
17
// @ts-expect-error idk why this gets flagged as wrong
18
18
rehypePlugins: [rehypeAccessibleEmojis, rehypeCustomHtml],
19
19
shikiConfig: {
20
-
themes: {
21
-
dark: "catppuccin-frappe",
22
-
light: "catppuccin-latte",
23
-
},
20
+
theme: "catppuccin-frappe",
24
21
defaultColor: false,
25
22
},
26
23
},
+23
-32
src/config.ts
+23
-32
src/config.ts
···
70
70
post: {
71
71
light: {
72
72
background: {
73
-
main: "#eff1f5", // base
74
-
secondary: "#dce0e8", // crust
73
+
main: "#f2f6fc",
74
+
secondary: "#e7e8ea",
75
75
},
76
76
typography: {
77
-
body: "#4c4f69", // text
78
-
heading: "#4c4f69", // text
79
-
subheading: "#5c5f77", // subtext 1
80
-
url: "#1e66f5", // blue
81
-
visited: "#8839ef", // mauve
82
-
selection: "#7c7f9333", // overlay 2 (.2/.3 opacity)
77
+
body: "#070e21",
78
+
heading: "#070e21",
79
+
subheading: "#040710",
80
+
url: "#1f3e98",
81
+
visited: "#931f82",
83
82
},
84
-
rainbow: [
85
-
"#d20f39", // red
86
-
"#fe640b", // peach
87
-
"#df8e1d", // yellow
88
-
"#40a02b", // green
89
-
"#209fb5", // saphire
90
-
"#7287fd", // lavender
91
-
],
92
83
},
93
84
94
85
dark: {
95
86
background: {
96
-
main: "#303446", // base
97
-
secondary: "#232634", // crust
87
+
main: "#262428",
88
+
secondary: "#161418",
98
89
},
99
90
typography: {
100
-
body: "#c6d0f5", // text
101
-
heading: "#c6d0f5", // text
102
-
subheading: "#b5bfe2", // subtext 1
103
-
url: "#8caaee", // blue
104
-
visited: "#ca9ee6", // mauve
105
-
selection: "#949cbb33", // overlay 2 (.2/.3 opacity)
91
+
body: "#ffebff",
92
+
heading: "#ffe8ff",
93
+
subheading: "#ffe0ff",
94
+
url: "#a8a8ff",
95
+
visited: "#ff80ff",
106
96
},
107
-
rainbow: [
108
-
"#e78284", // red
109
-
"#ef9f76", // peach
110
-
"#e5c890", // yellow
111
-
"#a6d189", // green
112
-
"#85c1dc", // saphire
113
-
"#babbf1", // lavender
114
-
],
115
97
},
98
+
99
+
rainbow: [
100
+
"#F09094",
101
+
"#F6B379",
102
+
"#F6E8A2",
103
+
"#97BB77",
104
+
"#C2D7FF",
105
+
"#D784C9",
106
+
],
116
107
},
117
108
},
118
109
} as const;
+27
-41
src/pages/blog/[id].astro
+27
-41
src/pages/blog/[id].astro
···
7
7
8
8
import { blog } from "@/config";
9
9
const {
10
-
post: { light, dark },
10
+
post: { light, dark, rainbow },
11
11
} = blog.palette;
12
12
13
13
import { render } from "astro:content";
···
101
101
/* Custom Flags */
102
102
103
103
& blockquote {
104
+
&[data-bq-flag--note],
105
+
&[data-bq-flag--alert],
106
+
&[data-bq-flag--info] {
107
+
color: black;
108
+
}
109
+
104
110
&[data-bq-flag--note] {
105
111
--accent: var(--rainbow-4);
106
112
--icon: "📝";
···
128
134
&[data-para-flag--bg-green],
129
135
&[data-para-flag--bg-blue],
130
136
&[data-para-flag--bg-purple] {
131
-
& p {
132
-
background-color: var(--bg-secondary);
133
-
padding: 2rem;
134
-
border-radius: 1rem;
135
-
}
137
+
/* contrasting colour */
138
+
color: black;
136
139
}
137
140
138
141
&[data-para-flag--bg-red] {
···
185
188
& h4 {
186
189
margin-block-start: 2rem;
187
190
margin-block-end: 2rem;
191
+
192
+
color: var(--typo-subheading);
188
193
189
194
& + & {
190
195
margin-block-start: 0;
···
225
230
}
226
231
227
232
& a {
233
+
text-decoration: 0.2rem underline;
234
+
228
235
&:link {
229
236
color: var(--typo-url);
230
237
}
···
232
239
color: var(--typo-visited);
233
240
}
234
241
&:hover {
235
-
color: var(--rainbow-2);
242
+
text-decoration: 0.1rem wavy underline;
236
243
}
237
244
&:active {
238
245
color: var(--rainbow-3);
···
251
258
/* Blockquotes */
252
259
& blockquote {
253
260
--accent: var(--bg-secondary);
254
-
border-left: 0.2rem solid var(--accent);
261
+
border-left: 0.2rem solid hsl(from var(--accent) h s calc(l * 0.9));
255
262
padding: 1rem 4rem 1rem 1rem;
256
263
margin: 1rem;
257
264
border-radius: 0.5rem;
258
-
background-color: light-dark(
259
-
hsl(from var(--accent) h calc(s * 0.75) calc(l * 2)),
260
-
hsl(from var(--accent) h calc(s * 0.75) calc(l * 0.5))
261
-
);
265
+
background-color: var(--accent);
262
266
width: fit-content;
263
267
min-width: 20rem;
264
268
···
270
274
/* Inline code */
271
275
:not(pre) > code {
272
276
color: var(--rainbow-3);
273
-
background-color: #00000040;
277
+
background-color: var(--_dark-bg-secondary);
274
278
padding: 0.2rem;
275
279
border-radius: 0.5rem;
276
280
···
288
292
}
289
293
290
294
.astro-code {
291
-
background-color: var(--bg-secondary) !important;
292
-
293
-
&,
294
-
& span {
295
-
color: light-dark(var(--shiki-light), var(--shiki-dark)) !important;
296
-
}
295
+
background-color: var(--_dark-bg-secondary) !important;
297
296
}
298
297
299
298
/* Check lists */
···
383
382
var(--_light-typo-selection),
384
383
var(--_dark-typo-selection)
385
384
);
386
-
387
-
--rainbow-0: light-dark(var(--_light-rainbow-0), var(--_dark-rainbow-0));
388
-
--rainbow-1: light-dark(var(--_light-rainbow-1), var(--_dark-rainbow-1));
389
-
--rainbow-2: light-dark(var(--_light-rainbow-2), var(--_dark-rainbow-2));
390
-
--rainbow-3: light-dark(var(--_light-rainbow-3), var(--_dark-rainbow-3));
391
-
--rainbow-4: light-dark(var(--_light-rainbow-4), var(--_dark-rainbow-4));
392
-
--rainbow-5: light-dark(var(--_light-rainbow-5), var(--_dark-rainbow-5));
393
385
}
394
386
395
387
header {
···
403
395
align-items: center;
404
396
justify-content: space-between;
405
397
406
-
background-color: var(--bg-main);
398
+
background-color: var(--bg-secondary);
399
+
color: var(--typo-heading);
407
400
padding-bottom: 0.5rem;
408
401
409
402
& > :last-child {
···
486
479
--_light-typo-subheading: ${light.typography.subheading};
487
480
--_light-typo-url: ${light.typography.url};
488
481
--_light-typo-visited: ${light.typography.visited};
489
-
--_light-typo-selection: ${light.typography.selection};
490
-
--_light-rainbow-0: ${light.rainbow[0]};
491
-
--_light-rainbow-1: ${light.rainbow[1]};
492
-
--_light-rainbow-2: ${light.rainbow[2]};
493
-
--_light-rainbow-3: ${light.rainbow[3]};
494
-
--_light-rainbow-4: ${light.rainbow[4]};
495
-
--_light-rainbow-5: ${light.rainbow[5]};
496
482
497
483
--_dark-bg-main: ${dark.background.main};
498
484
--_dark-bg-secondary: ${dark.background.secondary};
···
501
487
--_dark-typo-subheading: ${dark.typography.subheading};
502
488
--_dark-typo-url: ${dark.typography.url};
503
489
--_dark-typo-visited: ${dark.typography.visited};
504
-
--_dark-typo-selection: ${dark.typography.selection};
505
-
--_dark-rainbow-0: ${dark.rainbow[0]};
506
-
--_dark-rainbow-1: ${dark.rainbow[1]};
507
-
--_dark-rainbow-2: ${dark.rainbow[2]};
508
-
--_dark-rainbow-3: ${dark.rainbow[3]};
509
-
--_dark-rainbow-4: ${dark.rainbow[4]};
510
-
--_dark-rainbow-5: ${dark.rainbow[5]};
490
+
491
+
--rainbow-0: ${rainbow[0]};
492
+
--rainbow-1: ${rainbow[1]};
493
+
--rainbow-2: ${rainbow[2]};
494
+
--rainbow-3: ${rainbow[3]};
495
+
--rainbow-4: ${rainbow[4]};
496
+
--rainbow-5: ${rainbow[5]};
511
497
}
512
498
`}
513
499
></style>