Personal Site
Ad gradient and proper arrow positioning.
TODO: nicer font
+21
-3
src/assets/white-gradient.png
src/assets/white-gradient.png
This is a binary file and will not be displayed.
+21
-3
src/components/home/playing/NowPlaying.astro
+21
-3
src/components/home/playing/NowPlaying.astro
···
13
13
import boxTB from "/assets/box-tb.png";
14
14
import popoutSpeech from "/assets/popout-speech.png";
15
15
import smallBoxMask from "/assets/small-box-mask-1-0.png";
16
+
import whiteGradient from "/assets/white-gradient.png";
16
17
17
18
const track = await sdk.player.getCurrentlyPlayingTrack().catch(() => null);
18
19
···
34
35
--box-tb-png: url("${boxTB.src}");
35
36
--popout-speech-png: url("${popoutSpeech.src}");
36
37
--small-box-mask-png: url("${smallBoxMask.src}");
38
+
--white-gradient-png: url("${whiteGradient.src}");
37
39
`}
38
40
>
39
41
<button
···
237
239
content: ">" / "";
238
240
position: sticky;
239
241
right: 0px;
240
-
242
+
243
+
padding-inline: 5px;
241
244
height: 100%;
242
245
width: 40px;
243
-
244
-
background-color: white;
246
+
247
+
background-image: var(--white-gradient-png);
248
+
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
+
260
+
display: flex;
261
+
align-items: center;
262
+
justify-content: end;
245
263
}
246
264
}
247
265
}