Personal Site
Replace > with custom arrow. Note that the arrow drawing is 2x scale of other assets as it isnt scaled in css (not possible) and has a white outline
+3
-11
src/assets/right-arrow-2x-outline.png
src/assets/right-arrow-2x-outline.png
This is a binary file and will not be displayed.
+3
-11
src/components/home/playing/NowPlaying.astro
+3
-11
src/components/home/playing/NowPlaying.astro
···
14
14
import popoutSpeech from "/assets/popout-speech.png";
15
15
import smallBoxMask from "/assets/small-box-mask-1-0.png";
16
16
import whiteGradient from "/assets/white-gradient.png";
17
+
import rightArrow from "/assets/right-arrow-2x-outline.png";
17
18
18
19
const track = await sdk.player.getCurrentlyPlayingTrack().catch(() => null);
19
20
···
36
37
--popout-speech-png: url("${popoutSpeech.src}");
37
38
--small-box-mask-png: url("${smallBoxMask.src}");
38
39
--white-gradient-png: url("${whiteGradient.src}");
40
+
--right-arrow-png: url("${rightArrow.src}");
39
41
`}
40
42
>
41
43
<button
···
236
238
237
239
&::after {
238
240
/* visual hint */
239
-
content: ">" / "";
241
+
content: var(--right-arrow-png) / "";
240
242
position: sticky;
241
243
right: 0px;
242
244
···
246
248
247
249
background-image: var(--white-gradient-png);
248
250
background-size: 100%;
249
-
250
-
font-weight: bold;
251
-
font-size: 20px;
252
-
--outline-size: 5px;
253
-
text-shadow:
254
-
var(--outline-size) 0 white,
255
-
calc(var(--outline-size) * -1) 0 white,
256
-
0 var(--outline-size) white,
257
-
0 calc(var(--outline-size) * -1) white,
258
-
0 0 calc(var(--outline-size) * 2) white;
259
251
260
252
display: flex;
261
253
align-items: center;