vielle.dev
[Archived] Archived WIP of vielle.dev
1---
2import Clouds from "./background/Clouds.astro";
3import Stars from "./background/Stars.astro";
4import Moon from "./background/Moon.astro";
5import Sun from "./background/Sun.astro";
6import { blog } from "@/config";
7
8const date =
9 "overrideHour" in blog && typeof blog.overrideHour === "number"
10 ? new Date(0, 0, 0, blog.overrideHour)
11 : new Date(
12 Astro.cookies.get("timezone")?.value ??
13 Astro.request.headers.get("Date") ??
14 Astro.request.headers.get("date") ?? // idk if it cares about capitals so Both
15 Date.now(),
16 );
17
18const accurateHours =
19 date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 60 ** 2;
20const daytime = accurateHours > 6 && accurateHours < 18;
21---
22
23<style is:inline>
24 @keyframes scroll {
25 from {
26 translate: 0 0;
27 }
28
29 to {
30 translate: 0 calc(var(--parallax-speed, 70) * -1lvh);
31 }
32 }
33
34 @media (prefers-reduced-motion: no-preference) {
35 [data-parallax] {
36 animation: 1ms alternate linear scroll;
37 animation-timeline: scroll();
38 }
39 }
40</style>
41
42<style>
43 #background {
44 width: 100lvw;
45 height: 100lvh;
46
47 position: fixed;
48 top: 0;
49 left: 0;
50
51 z-index: -1;
52 overflow: clip;
53
54 /* time styling */
55 &[data-time="day"] {
56 background-color: var(--palette-sky-day);
57 }
58
59 &[data-time="night"] {
60 background-color: var(--palette-sky-night);
61 }
62 }
63</style>
64
65<div
66 id="background"
67 data-time={daytime ? "day" : "night"}
68 style={`--palette-sky-day: ${blog.palette.environment.sky.day};
69 --palette-sky-night: ${blog.palette.environment.sky.night};
70 --palette-sun: ${blog.palette.environment.sun};
71 --palette-moon: ${blog.palette.environment.moon};
72 --palette-cloud: ${blog.palette.environment.clouds};
73 --palette-star: ${blog.palette.environment.stars}`}
74 aria-hidden="true"
75>
76 {
77 daytime ? (
78 <>
79 <Sun percent={(accurateHours - 6) / 12} />
80 <Clouds />
81 </>
82 ) : (
83 <>
84 <Moon />
85 <Stars />
86 </>
87 )
88 }
89</div>