this repo has no description
Add moon component (will be an svg later, but is a string for now)
+32
-4
+6
-4
src/components/blog/Background.astro
+6
-4
src/components/blog/Background.astro
···
1
1
---
2
2
import Cloud from "./background/Cloud.astro";
3
+
import Moon from "./background/Moon.astro";
3
4
import Sun from "./background/Sun.astro";
4
5
---
5
6
···
16
17
17
18
#background > * {
18
19
@media (prefers-reduced-motion: no-preference) {
19
-
animation-name: scroll;
20
-
animation-duration: 1ms;
21
-
animation-direction: alternate;
22
-
animation-timeline: scroll();
20
+
animation-name: scroll;
21
+
animation-duration: 1ms;
22
+
animation-direction: alternate;
23
+
animation-timeline: scroll();
23
24
}
24
25
}
25
26
</style>
···
40
41
<div id="background">
41
42
<Cloud />
42
43
<Sun />
44
+
<Moon />
43
45
</div>
+25
src/components/blog/background/Moon.astro
+25
src/components/blog/background/Moon.astro
···
1
+
---
2
+
import { blog } from "@/config";
3
+
4
+
import { Moon } from "lunarphase-js";
5
+
6
+
// sorry south hemisphere, theres fuck all i can do without getting ur location which is weird </3
7
+
const moon = Moon.lunarPhaseEmoji();
8
+
---
9
+
10
+
<style>
11
+
div {
12
+
width: 20rem;
13
+
height: 20rem;
14
+
font-size: 20rem;
15
+
16
+
position: absolute;
17
+
top: 30rem;
18
+
right: 15rem;
19
+
z-index: -1;
20
+
}
21
+
</style>
22
+
23
+
<div id="moon" style={`--parallax-speed: ${blog.background.parallax.moon}`}>
24
+
{moon}
25
+
</div>