this repo has no description
Make X position randomised
+14
-3
+8
-2
src/components/blog/post.astro
+8
-2
src/components/blog/post.astro
···
1
1
---
2
2
import type { InferEntrySchema } from "astro:content";
3
3
import { Image } from "astro:assets";
4
+
import { number } from "astro:schema";
4
5
5
6
interface Props {
6
7
id: string;
7
8
data: InferEntrySchema<"blog">;
8
9
layer: number;
10
+
xOffset: number;
9
11
}
10
12
11
-
const { id, data, layer } = Astro.props;
13
+
const { id, data, layer, xOffset } = Astro.props;
12
14
13
15
const img = data.image.src.match(/.*(?=\.png)/gm);
14
16
if (img === null) return;
···
26
28
box-shadow: 0 0 7.5rem #00000080;
27
29
28
30
position: relative;
31
+
left: calc((100svw - 30rem) * var(--x-offset));
29
32
z-index: var(--layer);
30
33
31
34
& > img {
···
38
41
}
39
42
</style>
40
43
41
-
<a style={`--colour: ${data.colour}; --layer: ${layer}`} href={`/blog/${id}/`}>
44
+
<a
45
+
style={`--colour: ${data.colour}; --layer: ${layer}; --x-offset: ${xOffset}`}
46
+
href={`/blog/${id}/`}
47
+
>
42
48
<Image src={image} alt={data.image.alt} />
43
49
({id}) {data.title}
44
50
<br />
+6
-1
src/pages/blog/index.astro
+6
-1
src/pages/blog/index.astro
···
23
23
<a href="/rss.xml" aria-label="Rss Feed"><Rss width={64} height={64} /></a>
24
24
{
25
25
posts.map((x, i) => (
26
-
<Post id={x.id} data={x.data} layer={posts.length - i} />
26
+
<Post
27
+
id={x.id}
28
+
data={x.data}
29
+
layer={posts.length - i}
30
+
xOffset={Math.random()}
31
+
/>
27
32
))
28
33
}
29
34
</Base>