vielle.dev
[Archived] Archived WIP of vielle.dev
Tweak balloon styles:
- always point up
- inherit colour of parent post
- prevent gap between cable and balloon/post
+36
-3
src/components/blog/Balloon.astro
+36
-3
src/components/blog/Balloon.astro
···
87
87
}
88
88
}
89
89
90
+
91
+
@keyframes inv-tilt {
92
+
from,
93
+
to {
94
+
rotate: calc(-1 * var(--rot-0));
95
+
}
96
+
97
+
20% {
98
+
rotate: calc(-1 * var(--rot-1));
99
+
}
100
+
101
+
40% {
102
+
rotate: calc(-1 * var(--rot-2));
103
+
}
104
+
105
+
60% {
106
+
rotate: calc(-1 * var(--rot-3));
107
+
}
108
+
109
+
80% {
110
+
rotate: calc(-1 * var(--rot-4));
111
+
}
112
+
}
113
+
90
114
.cable {
91
115
position: absolute;
92
116
···
95
119
background: black;
96
120
97
121
/* .5rem accounts for border (z-index doesn't work) */
98
-
top: calc(-1 * var(--length) - 0.5rem);
122
+
z-index: -99;
123
+
top: calc(-1 * var(--length));
99
124
left: calc(
100
125
100% / var(--of) * var(--id) + 100% / 2 / var(--of) + var(--offset)
101
126
);
···
112
137
width: var(--width);
113
138
height: var(--height);
114
139
border-radius: calc(var(--width) / 2);
115
-
background: red;
116
-
translate: -50% -100%;
140
+
141
+
/* inherits from parent <Post /> */
142
+
background: var(--colour);
143
+
/* 95% instead of 100% to prevent gaps between cable */
144
+
translate: -50% -95%;
145
+
rotate: calc(-1 * var(--rot-0));
146
+
147
+
@media (prefers-reduced-motion: no-preference) {
148
+
animation: infinite var(--timing) linear inv-tilt;
149
+
}
117
150
}
118
151
</style>
+24
-7
src/components/blog/Post.astro
+24
-7
src/components/blog/Post.astro
···
172
172
173
173
section {
174
174
width: var(--width);
175
-
background-color: white;
176
-
border: 0.5rem solid var(--colour, dodgerblue);
177
-
border-radius: 2.5rem;
178
175
padding: 1rem;
179
-
box-shadow: 0 0 7.5rem var(--box-shadow-colour, #00000080);
180
176
margin-bottom: var(--y-gap);
181
177
178
+
position: relative;
179
+
z-index: var(--layer);
180
+
181
+
/* ::before used so that <Balloon /> can render behind
182
+
(new stacking context for root, so cant
183
+
render behind the white unless a before) */
184
+
&::before {
185
+
content: "" / "";
186
+
display: block;
187
+
position: absolute;
188
+
top: -0.5rem;
189
+
left: -0.5rem;
190
+
z-index: -2;
191
+
192
+
width: calc(var(--width) + 1rem);
193
+
height: calc(100% + 1rem);
194
+
195
+
background-color: white;
196
+
border: 0.5rem solid var(--colour, dodgerblue);
197
+
border-radius: 2.5rem;
198
+
199
+
box-shadow: 0 0 7.5rem var(--box-shadow-colour, #00000080);
200
+
}
201
+
182
202
/* default, overridden by reduced motion */
183
203
top: var(--x-offset-0);
184
204
left: var(--y-offset-0);
···
186
206
@media (prefers-reduced-motion: no-preference) {
187
207
animation: infinite var(--timing) bob;
188
208
}
189
-
190
-
position: relative;
191
-
z-index: var(--layer);
192
209
193
210
&:has(a:focus) {
194
211
animation-play-state: paused;