this repo has no description
Move x offset to component and add y offset
+6
-10
+5
-4
src/components/blog/post.astro
+5
-4
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";
5
4
6
5
interface Props {
7
6
id: string;
8
7
data: InferEntrySchema<"blog">;
9
8
layer: number;
10
-
xOffset: number;
11
9
}
12
10
13
-
const { id, data, layer, xOffset } = Astro.props;
11
+
const { id, data, layer } = Astro.props;
14
12
15
13
const img = data.image.src.match(/.*(?=\.png)/gm);
16
14
if (img === null) return;
···
29
27
30
28
position: relative;
31
29
left: calc((100svw - 30rem) * var(--x-offset));
30
+
31
+
top: calc(10rem * var(--y-offset) - 5rem);
32
+
32
33
z-index: var(--layer);
33
34
34
35
& > img {
···
42
43
</style>
43
44
44
45
<a
45
-
style={`--colour: ${data.colour}; --layer: ${layer}; --x-offset: ${xOffset}`}
46
+
style={`--colour: ${data.colour}; --layer: ${layer}; --x-offset: ${Math.random()}; --y-offset: ${Math.random()}`}
46
47
href={`/blog/${id}/`}
47
48
>
48
49
<Image src={image} alt={data.image.alt} />
+1
-6
src/pages/blog/index.astro
+1
-6
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
27
-
id={x.id}
28
-
data={x.data}
29
-
layer={posts.length - i}
30
-
xOffset={Math.random()}
31
-
/>
26
+
<Post id={x.id} data={x.data} layer={posts.length - i} />
32
27
))
33
28
}
34
29
</Base>