this repo has no description
Add colour palette to background and improve accessibility
- Colours are now controlled in `@/config`
- [title=""] attribute removed
- <title /> element removed
- [aria-hidden="true"] added to #background
- fixed style sorting on #background
- replaced [style="fill: ..."] with [fill="..."]
TODO:
- make colour palette more vibrant
+45
-29
+23
-11
src/components/blog/Background.astro
+23
-11
src/components/blog/Background.astro
···
3
3
import Stars from "./background/Stars.astro";
4
4
import Moon from "./background/Moon.astro";
5
5
import Sun from "./background/Sun.astro";
6
+
import { blog } from "@/config";
6
7
7
8
const date = new Date(
8
9
Astro.cookies.get("timezone")?.value ??
···
33
34
animation-timeline: scroll();
34
35
}
35
36
}
36
-
37
-
/* time styling */
38
-
#background[data-time="day"] {
39
-
background-color: dodgerblue;
40
-
}
41
-
42
-
#background[data-time="night"] {
43
-
background-color: black;
44
-
}
45
37
</style>
46
38
47
39
<style>
48
40
#background {
49
-
background: dodgerblue;
50
41
width: 100lvw;
51
42
height: 100lvh;
43
+
52
44
position: fixed;
53
45
top: 0;
54
46
left: 0;
47
+
55
48
z-index: -1;
56
49
overflow: clip;
50
+
51
+
/* time styling */
52
+
&[data-time="day"] {
53
+
background-color: var(--palette-sky-day);
54
+
}
55
+
56
+
&[data-time="night"] {
57
+
background-color: var(--palette-sky-night);
58
+
}
57
59
}
58
60
</style>
59
61
60
-
<div id="background" data-time={daytime ? "day" : "night"}>
62
+
<div
63
+
id="background"
64
+
data-time={daytime ? "day" : "night"}
65
+
style={`--palette-sky-day: ${blog.palette.sky.day};
66
+
--palette-sky-night: ${blog.palette.sky.night};
67
+
--palette-sun: ${blog.palette.sun};
68
+
--palette-moon: ${blog.palette.moon};
69
+
--palette-cloud: ${blog.palette.clouds};
70
+
--palette-star: ${blog.palette.stars}`}
71
+
aria-hidden="true"
72
+
>
61
73
{
62
74
daytime ? (
63
75
<>
+4
-5
src/components/blog/background/Cloud.astro
+4
-5
src/components/blog/background/Cloud.astro
···
50
50
preserveAspectRatio="none"
51
51
{...Astro.props}
52
52
>
53
-
<title></title>
54
53
<defs>
55
54
<clipPath id={`cloud-clip-${Astro.props.id}`}>
56
55
{
···
134
133
y1="0"
135
134
y2="1"
136
135
>
137
-
<stop offset="0%" stop-color="white"></stop>
136
+
<stop offset="0%" stop-color={blog.palette.clouds}></stop>
138
137
<stop
139
138
offset={`${blog.background.clouds.gradientStops[0]}%`}
140
-
stop-color="white"></stop>
139
+
stop-color={blog.palette.clouds}></stop>
141
140
<stop
142
141
offset={`${blog.background.clouds.gradientStops[1]}%`}
143
-
stop-color="#fff0"></stop>
144
-
<stop offset="100%" stop-color="#fff0"></stop>
142
+
stop-color={`rgb(from ${blog.palette.clouds} r g b / 0)`}></stop>
143
+
<stop offset="100%" stop-color={`rgb(from ${blog.palette.clouds} r g b / 0)`}></stop>
145
144
</linearGradient>
146
145
</defs>
147
146
-1
src/components/blog/background/Clouds.astro
-1
src/components/blog/background/Clouds.astro
+5
-5
src/components/blog/background/Moon.astro
+5
-5
src/components/blog/background/Moon.astro
···
24
24
height="100"
25
25
style={`--parallax-speed: ${blog.background.parallax.moon}`}
26
26
data-parallax
27
-
title=""
28
27
>
29
-
<title></title>
30
28
<defs>
31
29
<clipPath id="shadow">
32
30
<rect x={phase < 0.5 ? "0" : "100"} y="0" width="100" height="200"></rect>
···
34
32
</defs>
35
33
36
34
<!-- base -->
37
-
<circle style="fill:#ffffff" cx="100" cy="100" r="100"></circle>
35
+
<circle fill={blog.palette.moon} cx="100" cy="100" r="100"></circle>
38
36
<!-- half shadow -->
39
37
<circle
40
-
style="fill:#000000"
38
+
fill={blog.palette.sky.night}
41
39
cx="100"
42
40
cy="100"
43
41
r="100"
44
42
clip-path="url(#shadow)"></circle>
45
43
<!-- rotation shadow bulge thing -->
46
44
<ellipse
47
-
style={`fill: #${phase < 0.25 || phase > 0.75 ? "000000" : "ffffff"}`}
45
+
fill={phase < 0.25 || phase > 0.75
46
+
? blog.palette.moon
47
+
: blog.palette.sky.night}
48
48
cx="100"
49
49
cy="100"
50
50
rx={50 * Math.cos(4 * Math.PI * phase) + 50}
+1
-3
src/components/blog/background/Stars.astro
+1
-3
src/components/blog/background/Stars.astro
···
54
54
version="1.1"
55
55
xmlns="http://www.w3.org/2000/svg"
56
56
viewBox="0 0 100 100"
57
-
title=""
58
57
>
59
-
<title />
60
58
{new Array(prongs).fill(0).map((_, i) => (
61
59
<polygon
62
-
fill="#ffffff"
60
+
fill={blog.palette.stars}
63
61
points="50 0, 75 50, 25 50"
64
62
transform={`rotate(${(i / prongs) * 360})`}
65
63
transform-origin="center"
+2
-4
src/components/blog/background/Sun.astro
+2
-4
src/components/blog/background/Sun.astro
···
31
31
viewBox="0 0 100 100"
32
32
style={`--parallax-speed: ${blog.background.parallax.sun};
33
33
--sun-progress-percent: ${percent}`}
34
-
title=""
35
34
data-parallax
36
35
>
37
-
<title></title>
38
-
<circle style="fill:#ffff00" cx="50" cy="50" r="35"></circle>
36
+
<circle fill={blog.palette.sun} cx="50" cy="50" r="35"></circle>
39
37
40
38
{
41
39
new Array(prongs)
42
40
.fill(0)
43
41
.map((_, i) => (
44
42
<polygon
45
-
fill="#ffff00"
43
+
fill={blog.palette.sun}
46
44
points="50 0, 55 10, 45 10"
47
45
transform={`rotate(${(i / prongs) * 360})`}
48
46
transform-origin="center"
+10
src/config.ts
+10
src/config.ts