+2

src/components/blog/Background.astro

reviewed

··· 1 1 --- 2 2 import Cloud from "./background/Cloud.astro"; 3 3 import Moon from "./background/Moon.astro"; 4 4 + import Star from "./background/Star.astro"; 4 5 import Sun from "./background/Sun.astro"; 5 6 --- 6 7 ··· 42 43 <Cloud /> 43 44 <Sun /> 44 45 <Moon /> 46 46 + <Star /> 45 47 </div>

+26

src/components/blog/background/Star.astro

reviewed

··· 1 1 + --- 2 2 + import { blog } from "@/config"; 3 3 + --- 4 4 + 5 5 + <style> 6 6 + img { 7 7 + position: absolute; 8 8 + width: var(--size); 9 9 + height: var(--size); 10 10 + top: calc(var(--y) * 120lvh - 10lvh); 11 11 + left: calc(var(--x) * 120lvw - 10lvw); 12 12 + } 13 13 + </style> 14 14 + 15 15 + { 16 16 + new Array(blog.background.stars.count).fill(0).map((_) => ( 17 17 + <img 18 18 + src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.istockphoto.com%2Fphotos%2Fgolden-star-picture-id498723198%3Fk%3D6%26m%3D498723198%26s%3D612x612%26w%3D0%26h%3DrIeSl8WZdo6qWBvw_vgWc3vPhrBj39jCyeiZKltHIWk%3D&f=1&nofb=1&ipt=d84206dedd597d64591aa883e18799f72d5863f495a9ce7b22c0e1814215263b" 19 19 + alt="" 20 20 + style={`--parallax-speed: ${blog.background.parallax.star}; 21 21 + --size: ${blog.background.stars.size[0] + Math.random() * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem; 22 22 + --x: ${Math.random()}; 23 23 + --y: ${Math.random()}`} 24 24 + /> 25 25 + )) 26 26 + }

+6

src/config.ts

reviewed

··· 12 12 clouds: 50, 13 13 sun: 10, 14 14 moon: 20, 15 15 + star: 40, 15 16 }, 16 17 clouds: { 17 18 count: 8, 18 19 width: [40, 80], 19 20 height: [15, 30], 20 21 yGap: [15, 25], 22 22 + }, 23 23 + 24 24 + stars: { 25 25 + count: 40, 26 26 + size: [2, 5], 21 27 }, 22 28 }, 23 29 };