Personal Site
0
fork

Configure Feed

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

Apply mobile layout for top songs.

The player size is now fixed instead of fluid but atp idc

+42 -20
+15 -4
src/components/home/playing/NowPlaying.astro
··· 215 215 z-index: 2; 216 216 217 217 contain: size; 218 - overflow-y: auto; 218 + overflow: visible auto; 219 219 220 - /* mobile border image */ 221 220 @media (max-width: 105ch) { 221 + /* mobile border image */ 222 222 border-image-source: var(--box-tb-png); 223 223 border-image-slice: 10 0 fill; 224 224 border-image-width: 20px 0; 225 225 border-image-outset: 20px 10000px; 226 226 border-image-repeat: round; 227 + 228 + 229 + contain: inline-size; 230 + overflow: auto visible; 231 + 232 + display: flex; 233 + flex-direction: row; 234 + align-items: center; 227 235 } 228 236 } 229 237 ··· 233 241 properties dont affect external nodes */ 234 242 contain: layout size style; 235 243 container: player / size; 244 + overflow: clip; 236 245 width: 100%; 237 246 @media (max-width: 105ch) { 238 - /* max width is so the scroll siblings are visible */ 239 - max-width: 400px; 247 + width: 400px; 248 + height: 325.333px; 240 249 } 241 250 /* design size is 300px by 244px 242 251 treat 1cqw = 3px. 243 252 */ 244 253 aspect-ratio: 300/244; 254 + flex: none; 255 + /* float: left; */ 245 256 246 257 background-image: var(--mp3-base-png); 247 258 background-size: contain;
+27 -16
src/components/home/playing/TopSongs.astro
··· 2 2 import { sdk } from "./spotify"; 3 3 import { throws } from "/utils"; 4 4 5 - const masks = (await Promise.all([ 6 - import("/assets/small-box-mask-1-0.png"), 7 - import("/assets/small-box-mask-1-90.png"), 8 - import("/assets/small-box-mask-1-180.png"), 9 - import("/assets/small-box-mask-1-270.png"), 5 + const masks = ( 6 + await Promise.all([ 7 + import("/assets/small-box-mask-1-0.png"), 8 + import("/assets/small-box-mask-1-90.png"), 9 + import("/assets/small-box-mask-1-180.png"), 10 + import("/assets/small-box-mask-1-270.png"), 10 11 11 - import("/assets/small-box-mask-2-0.png"), 12 - import("/assets/small-box-mask-2-90.png"), 13 - import("/assets/small-box-mask-2-180.png"), 14 - import("/assets/small-box-mask-2-270.png"), 12 + import("/assets/small-box-mask-2-0.png"), 13 + import("/assets/small-box-mask-2-90.png"), 14 + import("/assets/small-box-mask-2-180.png"), 15 + import("/assets/small-box-mask-2-270.png"), 15 16 16 - import("/assets/small-box-mask-3-0.png"), 17 - import("/assets/small-box-mask-3-90.png"), 18 - import("/assets/small-box-mask-3-180.png"), 19 - import("/assets/small-box-mask-3-270.png"), 20 - ])).map(x => x.default.src) 17 + import("/assets/small-box-mask-3-0.png"), 18 + import("/assets/small-box-mask-3-90.png"), 19 + import("/assets/small-box-mask-3-180.png"), 20 + import("/assets/small-box-mask-3-270.png"), 21 + ]) 22 + ).map((x) => x.default.src); 21 23 22 24 const topSongs = await sdk.currentUser 23 25 .topItems("tracks", "short_term", 48) ··· 27 29 if (!topSongs) return "Error 500 failed to get top songs!!"; 28 30 --- 29 31 30 - <ul> 32 + <ul class="top-songs"> 31 33 { 32 34 topSongs.items.map( 33 35 (song) => 34 36 song.album.images[0].url && ( 35 - <li style={`--mask: url(${masks[Math.floor(Math.random() * masks.length)] ?? masks[0]})`}> 37 + <li 38 + style={`--mask: url(${masks[Math.floor(Math.random() * masks.length)] ?? masks[0]})`} 39 + > 36 40 <a href={song.external_urls.spotify}> 37 41 <img 38 42 src={song.album.images[0].url} ··· 53 57 grid-template-columns: repeat(3, 1fr); 54 58 gap: 10px; 55 59 padding: 10px; 60 + 61 + @media (max-width: 105ch) { 62 + grid-template-columns: auto; 63 + grid-template-rows: repeat(3, 100px); 64 + grid-auto-columns: 100px; 65 + grid-auto-flow: column; 66 + } 56 67 } 57 68 58 69 img {