Personal Site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

This is a binary file and will not be displayed.

+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;