this repo has no description
Add base styling to individual blog posts
+92
-3
+92
-3
src/pages/blog/[id].astro
+92
-3
src/pages/blog/[id].astro
···
1
1
---
2
2
import Base from "@/Base.astro";
3
+
import { render } from "astro:content";
3
4
import { getEntry } from "astro:content";
4
5
const { id } = Astro.params;
5
6
const r404 = Astro.redirect("/404");
···
7
8
if (!id) return r404;
8
9
const post = await getEntry("blog", id);
9
10
if (!post) return r404;
11
+
12
+
const {
13
+
data: { title },
14
+
} = post;
15
+
const { Content } = await render(post);
10
16
---
11
17
12
-
<Base title={post.data.title}>
13
-
<h1>{post.data.title}</h1>
14
-
<p>{JSON.stringify(post)}</p>
18
+
<Base title={title}>
19
+
<main data-nojs>
20
+
<div class="content">
21
+
<h1>{title}</h1>
22
+
<Content />
23
+
</div>
24
+
</main>
15
25
</Base>
26
+
27
+
<script>
28
+
document.querySelectorAll("main[data-nojs]").forEach((el) => {
29
+
if (!(el instanceof HTMLElement)) throw new Error("Not HTML Element!");
30
+
delete el.dataset["nojs"];
31
+
const colourScheme = matchMedia("(prefers-color-scheme: light)");
32
+
33
+
const updateColourScheme = () => {
34
+
el.dataset["mode"] = colourScheme.matches ? "light" : "dark";
35
+
};
36
+
updateColourScheme();
37
+
38
+
colourScheme.addEventListener("change", () => updateColourScheme());
39
+
});
40
+
</script>
41
+
42
+
<style>
43
+
@property --bg {
44
+
syntax: "<color>";
45
+
inherits: true;
46
+
}
47
+
48
+
/* set colours based on system colour scheme */
49
+
:root:has([data-nojs]) {
50
+
--bg: light-dark(white, black);
51
+
--text: light-dark(black, white);
52
+
}
53
+
54
+
:root:not(:has([data-nojs])) {
55
+
--bg: gray;
56
+
57
+
&:has([data-mode="light"]) {
58
+
--bg: white;
59
+
--text: black;
60
+
}
61
+
62
+
&:has([data-mode="dark"]) {
63
+
--bg: black;
64
+
--text: white;
65
+
}
66
+
}
67
+
68
+
main {
69
+
background-color: var(--bg);
70
+
color: var(--text);
71
+
72
+
min-height: 100lvh;
73
+
}
74
+
75
+
.content,
76
+
.full-width {
77
+
--padding-inline: 2rem;
78
+
--content-max-width: 60ch;
79
+
--breakout-max-width: 80ch;
80
+
81
+
--content-size: min(100% - var(--padding-inline) * 2, var(--content-max-width));
82
+
--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
83
+
84
+
display: grid;
85
+
grid-template-columns:
86
+
[full-width-start] minmax(var(--padding-inline), 1fr)
87
+
[breakout-start] minmax(0, var(--breakout-size))
88
+
[content-start] var(--content-size) [content-end]
89
+
minmax(0, var(--breakout-size)) [breakout-end]
90
+
minmax(var(--padding-inline), 1fr) [full-width-end];
91
+
92
+
& > :global(*) {
93
+
grid-column: content;
94
+
}
95
+
96
+
& > :global(.breakout) {
97
+
grid-column: breakout;
98
+
}
99
+
100
+
& > :global(.full-width) {
101
+
grid-column: full-width;
102
+
}
103
+
}
104
+
</style>