this repo has no description
Add configuration options to posts
+23
-3
+16
-3
src/components/blog/post.astro
+16
-3
src/components/blog/post.astro
···
2
2
import type { InferEntrySchema } from "astro:content";
3
3
import { Image } from "astro:assets";
4
4
5
+
import { blog } from "@/config";
6
+
5
7
interface Props {
6
8
id: string;
7
9
data: InferEntrySchema<"blog">;
···
17
19
18
20
<style>
19
21
a {
20
-
width: 30rem;
22
+
width: var(--width);
23
+
height: var(--height);
21
24
background-color: white;
22
25
border: 0.5rem solid var(--colour, dodgerblue);
23
26
border-radius: 2.5rem;
24
27
padding: 1rem;
25
28
display: block;
26
29
box-shadow: 0 0 7.5rem #00000080;
30
+
margin-bottom: var(--gap);
27
31
28
32
position: relative;
29
33
left: calc((100svw - 30rem) * var(--x-offset));
30
34
31
-
top: calc(10rem * var(--y-offset) - 5rem);
35
+
top: calc(var(--y-leeway) * 2 * var(--y-offset) - var(--y-leeway));
32
36
33
37
z-index: var(--layer);
34
38
···
43
47
</style>
44
48
45
49
<a
46
-
style={`--colour: ${data.colour}; --layer: ${layer}; --x-offset: ${Math.random()}; --y-offset: ${Math.random()}`}
50
+
style={`--colour: ${data.colour};
51
+
--layer: ${layer};
52
+
--x-offset: ${Math.random()};
53
+
--y-offset: ${Math.random()};
54
+
55
+
--y-leeway: ${blog.post.yLeeway}rem;
56
+
${blog.post.size[0] ? `--width: ${blog.post.size[0]}rem;` : ""}
57
+
${blog.post.size[1] ? `--height: ${blog.post.size[1]}rem;` : ""}
58
+
--gap: ${blog.post.gap}rem;
59
+
`}
47
60
href={`/blog/${id}/`}
48
61
>
49
62
<Image src={image} alt={data.image.alt} />