vielle.dev
[Archived] Archived WIP of vielle.dev
Refactor Post.astro to reduce calc calls in css
+45
-57
+44
-56
src/components/blog/Post.astro
+44
-56
src/components/blog/Post.astro
···
17
17
const { default: image } = await import(`../../posts/assets/${img[0]}.png`);
18
18
19
19
const positions: [number, number] = [Math.random(), Math.random()];
20
-
const offsets: [[number, number], [number, number], [number, number]] = [
20
+
const offsets: [number, number][] = [
21
+
[0, 0],
21
22
[
22
23
Math.random() * blog.post.drift[0] - blog.post.drift[0] / 2,
23
24
Math.random() * 0.5 * blog.post.drift[1] - blog.post.drift[1] / 2,
···
39
40
40
41
/* generated */
41
42
42
-
--x-offset: ${positions[0]};
43
-
--y-offset: ${positions[1]};
44
-
45
-
${offsets.map((x, i) => `--x-offset-${i}: ${x[0]}; --y-offset-${i}: ${x[1]};`).join("\n")}
43
+
${offsets
44
+
.map(
45
+
(x, i) =>
46
+
`--x-offset-${i}: calc((100svw - ${blog.post.width + 2 * blog.post.xPadding}rem) * ${positions[0] + x[0]} + ${blog.post.xPadding}rem);
47
+
--y-offset-${i}: ${blog.post.yLeeway * 2 * (positions[1] + x[1]) - blog.post.yLeeway}rem;`
48
+
)
49
+
.join("\n")}
46
50
47
51
--timing: ${
48
52
blog.post.timing.scale +
···
52
56
53
57
/* config */
54
58
55
-
--y-leeway: ${blog.post.yLeeway}rem;
56
-
${blog.post.size[0] ? `--width: ${blog.post.size[0]}rem;` : ""}
57
-
${blog.post.size[1] ? `--height: ${blog.post.size[1]}rem;` : ""}
59
+
--width: ${blog.post.width}rem;
58
60
--y-gap: ${blog.post.yGap}rem;
59
-
--x-padding: ${blog.post.xPadding}rem;
60
61
`}
61
62
href={`/blog/${id}/`}
62
63
>
···
70
71
71
72
<style>
72
73
@property --x-offset-0 {
73
-
syntax: "<number>";
74
+
syntax: "<length>";
74
75
inherits: false;
75
-
initial-value: 0;
76
+
initial-value: 0px;
76
77
}
77
78
78
79
@property --x-offset-1 {
79
-
syntax: "<number>";
80
+
syntax: "<length>";
80
81
inherits: false;
81
-
initial-value: 0;
82
+
initial-value: 0px;
82
83
}
83
84
84
85
@property --x-offset-2 {
85
-
syntax: "<number>";
86
+
syntax: "<length>";
87
+
inherits: false;
88
+
initial-value: 0px;
89
+
}
90
+
91
+
@property --x-offset-3 {
92
+
syntax: "<length>";
86
93
inherits: false;
87
-
initial-value: 0;
94
+
initial-value: 0px;
88
95
}
89
96
90
97
@property --y-offset-0 {
91
-
syntax: "<number>";
98
+
syntax: "<length>";
92
99
inherits: false;
93
-
initial-value: 0;
100
+
initial-value: 0px;
94
101
}
95
102
96
103
@property --y-offset-1 {
97
-
syntax: "<number>";
104
+
syntax: "<length>";
98
105
inherits: false;
99
-
initial-value: 0;
106
+
initial-value: 0px;
100
107
}
101
108
102
109
@property --y-offset-2 {
103
-
syntax: "<number>";
110
+
syntax: "<length>";
104
111
inherits: false;
105
-
initial-value: 0;
112
+
initial-value: 0px;
113
+
}
114
+
115
+
@property --y-offset-3 {
116
+
syntax: "<length>";
117
+
inherits: false;
118
+
initial-value: 0px;
106
119
}
107
120
108
121
@keyframes bob {
109
122
0%,
110
123
100% {
111
-
top: calc(var(--y-leeway) * 2 * var(--y-offset) - var(--y-leeway));
112
-
left: calc(
113
-
(100svw - var(--width) - 2 * var(--x-padding)) * var(--x-offset) +
114
-
var(--x-padding)
115
-
);
124
+
top: var(--y-offset-0);
125
+
left: var(--x-offset-0);
116
126
}
117
127
118
128
25% {
119
-
top: calc(
120
-
var(--y-leeway) * 2 * (var(--y-offset) + var(--y-offset-0)) -
121
-
var(--y-leeway)
122
-
);
123
-
left: calc(
124
-
(100svw - var(--width) - 2 * var(--x-padding)) *
125
-
(var(--x-offset) + var(--x-offset-0)) + var(--x-padding)
126
-
);
129
+
top: var(--y-offset-1);
130
+
left: var(--x-offset-1);
127
131
}
128
132
129
133
50% {
130
-
top: calc(
131
-
var(--y-leeway) * 2 * (var(--y-offset) + var(--y-offset-1)) -
132
-
var(--y-leeway)
133
-
);
134
-
left: calc(
135
-
(100svw - var(--width) - 2 * var(--x-padding)) *
136
-
(var(--x-offset) + var(--x-offset-1)) + var(--x-padding)
137
-
);
134
+
top: var(--y-offset-2);
135
+
left: var(--x-offset-2);
138
136
}
139
137
140
138
75% {
141
-
top: calc(
142
-
var(--y-leeway) * 2 * (var(--y-offset) + var(--y-offset-2)) -
143
-
var(--y-leeway)
144
-
);
145
-
left: calc(
146
-
(100svw - var(--width) - 2 * var(--x-padding)) *
147
-
(var(--x-offset) + var(--x-offset-2)) + var(--x-padding)
148
-
);
139
+
top: var(--y-offset-3);
140
+
left: var(--x-offset-3);
149
141
}
150
142
}
151
143
152
144
a {
153
145
width: var(--width);
154
-
height: var(--height);
155
146
background-color: white;
156
147
border: 0.5rem solid var(--colour, dodgerblue);
157
148
border-radius: 2.5rem;
···
162
153
margin-bottom: var(--y-gap);
163
154
164
155
/* default, overridden by reduced motion */
165
-
top: calc(var(--y-leeway) * 2 * var(--y-offset) - var(--y-leeway));
166
-
left: calc(
167
-
(100svw - var(--width) - 2 * var(--x-padding)) * var(--x-offset) +
168
-
var(--x-padding)
169
-
);
156
+
top: var(--x-offset-0);
157
+
left: var(--y-offset-0);
170
158
171
159
@media (prefers-reduced-motion: no-preference) {
172
160
animation: infinite var(--timing) bob;