vielle.dev
[Archived] Archived WIP of vielle.dev
Move config.blog.palette.* to config.blog.palette.environment.*
+33
-28
+6
-6
src/components/blog/Background.astro
+6
-6
src/components/blog/Background.astro
···
65
65
<div
66
66
id="background"
67
67
data-time={daytime ? "day" : "night"}
68
-
style={`--palette-sky-day: ${blog.palette.sky.day};
69
-
--palette-sky-night: ${blog.palette.sky.night};
70
-
--palette-sun: ${blog.palette.sun};
71
-
--palette-moon: ${blog.palette.moon};
72
-
--palette-cloud: ${blog.palette.clouds};
73
-
--palette-star: ${blog.palette.stars}`}
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
74
aria-hidden="true"
75
75
>
76
76
{
+6
-4
src/components/blog/background/Cloud.astro
+6
-4
src/components/blog/background/Cloud.astro
···
133
133
y1="0"
134
134
y2="1"
135
135
>
136
-
<stop offset="0%" stop-color={blog.palette.clouds}></stop>
136
+
<stop offset="0%" stop-color={blog.palette.environment.clouds}></stop>
137
137
<stop
138
138
offset={`${blog.background.clouds.gradientStops[0]}%`}
139
-
stop-color={blog.palette.clouds}></stop>
139
+
stop-color={blog.palette.environment.clouds}></stop>
140
140
<stop
141
141
offset={`${blog.background.clouds.gradientStops[1]}%`}
142
-
stop-color={`rgb(from ${blog.palette.clouds} r g b / 0)`}></stop>
142
+
stop-color={`rgb(from ${blog.palette.environment.clouds} r g b / 0)`}
143
+
></stop>
143
144
<stop
144
145
offset="100%"
145
-
stop-color={`rgb(from ${blog.palette.clouds} r g b / 0)`}></stop>
146
+
stop-color={`rgb(from ${blog.palette.environment.clouds} r g b / 0)`}
147
+
></stop>
146
148
</linearGradient>
147
149
</defs>
148
150
+5
-4
src/components/blog/background/Moon.astro
+5
-4
src/components/blog/background/Moon.astro
···
32
32
</defs>
33
33
34
34
<!-- base -->
35
-
<circle fill={blog.palette.moon} cx="100" cy="100" r="100"></circle>
35
+
<circle fill={blog.palette.environment.moon} cx="100" cy="100" r="100"
36
+
></circle>
36
37
<!-- half shadow -->
37
38
<circle
38
-
fill={blog.palette.sky.night}
39
+
fill={blog.palette.environment.sky.night}
39
40
cx="100"
40
41
cy="100"
41
42
r="100"
···
43
44
<!-- rotation shadow bulge thing -->
44
45
<ellipse
45
46
fill={phase < 0.25 || phase > 0.75
46
-
? blog.palette.moon
47
-
: blog.palette.sky.night}
47
+
? blog.palette.environment.moon
48
+
: blog.palette.environment.sky.night}
48
49
cx="100"
49
50
cy="100"
50
51
rx={50 * Math.cos(4 * Math.PI * phase) + 50}
+1
-1
src/components/blog/background/Stars.astro
+1
-1
src/components/blog/background/Stars.astro
+2
-2
src/components/blog/background/Sun.astro
+2
-2
src/components/blog/background/Sun.astro
···
33
33
--sun-progress-percent: ${percent}`}
34
34
data-parallax
35
35
>
36
-
<circle fill={blog.palette.sun} cx="50" cy="50" r="35"></circle>
36
+
<circle fill={blog.palette.environment.sun} cx="50" cy="50" r="35"></circle>
37
37
38
38
{
39
39
new Array(prongs)
40
40
.fill(0)
41
41
.map((_, i) => (
42
42
<polygon
43
-
fill={blog.palette.sun}
43
+
fill={blog.palette.environment.sun}
44
44
points="50 0, 55 10, 45 10"
45
45
transform={`rotate(${(i / prongs) * 360})`}
46
46
transform-origin="center"
+13
-11
src/config.ts
+13
-11
src/config.ts
···
52
52
time: [2, 5],
53
53
},
54
54
palette: {
55
-
sky: {
56
-
// blue
57
-
day: "#1E90FF",
58
-
// black
59
-
night: "#39375B",
55
+
environment: {
56
+
sky: {
57
+
// blue
58
+
day: "#1E90FF",
59
+
// black
60
+
night: "#39375B",
61
+
},
62
+
// yellow
63
+
sun: "#FFEC51",
64
+
// whites
65
+
moon: "#E5D4ED",
66
+
clouds: "#E5D4ED",
67
+
stars: "#ffffff",
60
68
},
61
-
// yellow
62
-
sun: "#FFEC51",
63
-
// whites
64
-
moon: "#E5D4ED",
65
-
clouds: "#E5D4ED",
66
-
stars: "#ffffff",
67
69
},
68
70
} as const;
69
71