vielle.dev
[Archived] Archived WIP of vielle.dev
Add background component which will be used to display the content of the background (ie: clouds, stars, etc)
+24
-1
+19
src/components/blog/Background.astro
+19
src/components/blog/Background.astro
···
1
+
---
2
+
3
+
---
4
+
5
+
<style>
6
+
#background {
7
+
background-image: linear-gradient(dodgerblue, lightblue);
8
+
width: 100lvw;
9
+
height: 100lvh;
10
+
position: fixed;
11
+
top: 0;
12
+
left: 0;
13
+
z-index: -1;
14
+
overflow: clip;
15
+
}
16
+
</style>
17
+
18
+
<div id="background">
19
+
</div>
+5
-1
src/pages/blog/index.astro
+5
-1
src/pages/blog/index.astro
···
1
1
---
2
2
import Base from "@/Base.astro";
3
+
import Post from "@/components/blog/Post.astro";
4
+
import Background from "@/components/blog/Background.astro";
5
+
3
6
import Rss from "@/assets/rss.svg";
7
+
4
8
import { getCollection } from "astro:content";
5
-
import Post from "@/components/blog/Post.astro";
6
9
import { blog } from "@/config";
7
10
8
11
const posts = await getCollection("blog");
···
29
32
</style>
30
33
31
34
<Base title="Blog">
35
+
<Background />
32
36
<main>
33
37
<h1 style={`--y-gap: ${blog.post.yGap}rem`}>
34
38
Blog