+3 -5

src/components/blog/Background.astro

··· 16 16 } 17 17 } 18 18 19 19 - #background > * { 19 19 + #background *[data-parallax] { 20 20 @media (prefers-reduced-motion: no-preference) { 21 21 - animation-name: scroll; 22 22 - animation-duration: 1ms; 23 23 - animation-direction: alternate; 21 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 65 - const time = new Date(); 63 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

··· 42 42 height: ${height}rem; 43 43 top: ${y}rem; 44 44 left: calc(${x} * 200lvw - 100lvw);`} 45 45 + data-parallax 45 46 />, 46 47 ], 47 48 };

+22 -7

src/components/blog/background/Moon.astro

··· 1 1 --- 2 2 import { blog } from "@/config"; 3 3 - import { Moon as LunarPhase } from "lunarphase-js"; 3 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 6 - const moon = LunarPhase.lunarPhaseEmoji(); 7 6 --- 8 7 9 8 <style> 10 10 - div { 9 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 17 - right: 15rem; 16 16 + right: 1rem; 18 17 } 19 18 </style> 20 19 21 21 - <div id="moon" style={`--parallax-speed: ${blog.background.parallax.moon}`}> 22 22 - {moon} 23 23 - </div> 20 20 + <svg 21 21 + id="moon" 22 22 + width="100" 23 23 + height="100" 24 24 + style={`--parallax-speed: ${blog.background.parallax.moon}; 25 25 + --phase: ${LunarPhaseJS.lunarAgePercent()};`} 26 26 + data-parallax 27 27 + > 28 28 + <defs> 29 29 + <clipPath id="shadow"> 30 30 + <rect x="50" y="0" width="50" height="100"></rect> 31 31 + </clipPath> 32 32 + </defs> 33 33 + 34 34 + <circle style="fill:#ffffff" cx="50" cy="50" r="50"></circle> 35 35 + <circle style="fill:#000000" cx="50" cy="50" r="50" clip-path="url(#shadow)" 36 36 + ></circle> 37 37 + <ellipse style="fill:#000000" cx="50" cy="50" rx="25" ry="50"></ellipse> 38 38 + </svg>

+2

src/components/blog/background/Stars.astro

··· 23 23 --size: ${blog.background.stars.size[0] + Math.random() * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem; 24 24 --x: ${Math.random()}; 25 25 --y: ${Math.random()}`} 26 26 + data-parallax 27 27 + 26 28 /> 27 29 )) 28 30 }

+1

src/components/blog/background/Sun.astro

··· 20 20 src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/BBSO_full-disk_H-alpha_2002-07-26_153931_color.png/250px-BBSO_full-disk_H-alpha_2002-07-26_153931_color.png" 21 21 alt="" 22 22 style={`--parallax-speed: ${blog.background.parallax.sun}`} 23 23 + data-parallax 23 24 />

+2 -2

src/config.ts

··· 12 12 clouds: 50, 13 13 sun: 10, 14 14 moon: 20, 15 15 - star: 40, 15 15 + star: 5, 16 16 }, 17 17 clouds: { 18 18 count: 8, ··· 24 24 stars: { 25 25 count: 40, 26 26 size: [2, 5], 27 27 - }, 27 27 + } 28 28 }, 29 29 };