vielle.dev
[Archived] Archived WIP of vielle.dev
Add a tie to the bottom of the balloons
+27
-1
+27
-1
src/components/blog/Balloon.astro
+27
-1
src/components/blog/Balloon.astro
···
30
30
style={`--width: ${utils.getRandom(blog.balloons.size[0])}rem;
31
31
--height: ${utils.getRandom(blog.balloons.size[1])}rem;`}
32
32
>
33
+
<div class="cable-tie"></div>
34
+
<div class="tie"></div>
33
35
</div>
34
36
</div>
35
37
···
86
88
rotate: var(--rot-4);
87
89
}
88
90
}
89
-
90
91
91
92
@keyframes inv-tilt {
92
93
from,
···
147
148
@media (prefers-reduced-motion: no-preference) {
148
149
animation: infinite var(--timing) linear inv-tilt;
149
150
}
151
+
}
152
+
153
+
.cable-tie {
154
+
width: 1.75rem;
155
+
height: .5rem;
156
+
157
+
position: absolute;
158
+
bottom: -.25rem;
159
+
left: 50%;
160
+
translate: -50%;
161
+
z-index: 1;
162
+
163
+
background-color: black;
164
+
border-radius: 0.25rem;
165
+
}
166
+
167
+
.tie {
168
+
width: 2rem;
169
+
height: 2rem;
170
+
background-color: var(--colour);
171
+
clip-path: polygon(50% 0, 0 100%, 100% 100%);
172
+
position: absolute;
173
+
bottom: -1rem;
174
+
left: 50%;
175
+
translate: -50%;
150
176
}
151
177
</style>