Personal Site
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
+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
+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 {