holly.mlem.systems
forked from
devins.page/devins.page
my website, hosted on wisp.place
feat: theming fixes
devins.page
+40
-12
+4
-7
astro.config.mjs
+4
-7
astro.config.mjs
···
1
1
import { defineConfig } from "astro/config";
2
-
import { createCssVariablesTheme } from "shiki/core";
3
2
import sitemap from "@astrojs/sitemap";
4
-
5
-
const cssVariablesTheme = createCssVariablesTheme({
6
-
name: "css-variables",
7
-
variablePrefix: "--shiki-",
8
-
});
9
3
10
4
export default defineConfig({
11
5
site: "https://devins.page",
12
6
integrations: [sitemap()],
13
7
markdown: {
14
8
shikiConfig: {
15
-
theme: cssVariablesTheme,
9
+
themes: {
10
+
light: "catppuccin-latte",
11
+
dark: "catppuccin-mocha",
12
+
},
16
13
},
17
14
},
18
15
});
+1
-1
src/layouts/BlogPost.astro
+1
-1
src/layouts/BlogPost.astro
+3
-2
src/pages/blog.astro
+3
-2
src/pages/blog.astro
···
13
13
<h1>blog</h1>
14
14
{
15
15
posts.map((post) => (
16
-
<article style="margin-block: 1rem; padding-left: 1rem; padding-right: 1rem; background-color: var(--sc-prose-bg); border: 1px solid var(--sc-prose-bd)">
16
+
<article>
17
17
{post.data.image && (
18
18
<img
19
19
src={post.data.image}
20
20
alt={post.data.imageAlt || ""}
21
-
style="float: right; margin-left: 1rem; margin-block: 1rem; height: 64px"
21
+
class="floating-image"
22
+
style="height: 64px"
22
23
transition:name={`blog-image-${post.slug}`}
23
24
/>
24
25
)}
+32
-2
src/styles/global.css
+32
-2
src/styles/global.css
···
4
4
--text: #4c4f69; /* text */
5
5
--accent: #fe640b; /* peach */
6
6
--sc-prose-bg: #e6e9ef; /* mantle */
7
-
--sc-prose-bd: #dce0e8; /* surface 0 */
7
+
--sc-prose-bd: #bcc0cc; /* surface 1 */
8
8
}
9
9
10
10
/* catppuccin mocha */
···
14
14
--text: #cdd6f4; /* text */
15
15
--accent: #fab387; /* peach */
16
16
--sc-prose-bg: #181825; /* mantle */
17
-
--sc-prose-bd: #313244; /* surface 0 */
17
+
--sc-prose-bd: #45475a; /* surface 1 */
18
18
}
19
19
}
20
20
···
23
23
color: var(--text);
24
24
}
25
25
26
+
blockquote,
27
+
pre {
28
+
border-radius: 0.25rem;
29
+
border: 1px solid var(--sc-prose-bd);
30
+
}
31
+
32
+
article {
33
+
margin-block: 1rem;
34
+
padding-left: 1rem;
35
+
padding-right: 1rem;
36
+
background-color: var(--sc-prose-bg);
37
+
border-radius: 0.25rem;
38
+
border: 1px solid var(--sc-prose-bd);
39
+
}
40
+
26
41
a {
27
42
color: var(--accent);
28
43
text-decoration: none;
···
37
52
border-color: var(--sc-prose-bd);
38
53
border-style: solid;
39
54
}
55
+
56
+
.floating-image {
57
+
float: right;
58
+
margin-left: 1rem;
59
+
margin-block: 1rem;
60
+
height: 128px;
61
+
}
62
+
63
+
@media (prefers-color-scheme: dark) {
64
+
.astro-code,
65
+
.astro-code span {
66
+
color: var(--shiki-dark) !important;
67
+
background-color: var(--shiki-dark-bg) !important;
68
+
}
69
+
}