this repo has no description
Add moon as SVG and adjust parallax speed for star/parallax behaviour
TODO: svgify everything, make moon react, randomise/tweeak parallax of star based on size/whatever
+31
-14
+3
-5
src/components/blog/Background.astro
+3
-5
src/components/blog/Background.astro
···
16
16
}
17
17
}
18
18
19
-
#background > * {
19
+
#background *[data-parallax] {
20
20
@media (prefers-reduced-motion: no-preference) {
21
-
animation-name: scroll;
22
-
animation-duration: 1ms;
23
-
animation-direction: alternate;
21
+
animation: scroll, 1ms, alternate;
24
22
animation-timeline: scroll();
25
23
}
26
24
}
···
62
60
<script>
63
61
// progressive enhancement
64
62
const refresh = () => {
65
-
const time = new Date();
63
+
const time = new Date(0, 0, 0, 2);
66
64
const accurateTime =
67
65
time.getHours() + time.getMinutes() / 60 + time.getSeconds() / 60 ** 2;
68
66
+1
src/components/blog/background/Clouds.astro
+1
src/components/blog/background/Clouds.astro
+22
-7
src/components/blog/background/Moon.astro
+22
-7
src/components/blog/background/Moon.astro
···
1
1
---
2
2
import { blog } from "@/config";
3
-
import { Moon as LunarPhase } from "lunarphase-js";
3
+
import { Moon as LunarPhaseJS } from "lunarphase-js";
4
4
5
5
// sorry south hemisphere, theres fuck all i can do without getting ur location which is weird </3
6
-
const moon = LunarPhase.lunarPhaseEmoji();
7
6
---
8
7
9
8
<style>
10
-
div {
9
+
svg {
11
10
width: 20rem;
12
11
height: 20rem;
13
12
font-size: 20rem;
14
13
15
14
position: absolute;
16
15
top: 30rem;
17
-
right: 15rem;
16
+
right: 1rem;
18
17
}
19
18
</style>
20
19
21
-
<div id="moon" style={`--parallax-speed: ${blog.background.parallax.moon}`}>
22
-
{moon}
23
-
</div>
20
+
<svg
21
+
id="moon"
22
+
width="100"
23
+
height="100"
24
+
style={`--parallax-speed: ${blog.background.parallax.moon};
25
+
--phase: ${LunarPhaseJS.lunarAgePercent()};`}
26
+
data-parallax
27
+
>
28
+
<defs>
29
+
<clipPath id="shadow">
30
+
<rect x="50" y="0" width="50" height="100"></rect>
31
+
</clipPath>
32
+
</defs>
33
+
34
+
<circle style="fill:#ffffff" cx="50" cy="50" r="50"></circle>
35
+
<circle style="fill:#000000" cx="50" cy="50" r="50" clip-path="url(#shadow)"
36
+
></circle>
37
+
<ellipse style="fill:#000000" cx="50" cy="50" rx="25" ry="50"></ellipse>
38
+
</svg>
+2
src/components/blog/background/Stars.astro
+2
src/components/blog/background/Stars.astro
+1
src/components/blog/background/Sun.astro
+1
src/components/blog/background/Sun.astro