the home site for me: also iteration 3 or 4 of my site
feat: format the now playing better
+27
-4
+22
-3
sass/css/mods.css
+22
-3
sass/css/mods.css
···
14
14
font-size: 0.85rem;
15
15
color: var(--text-light);
16
16
display: flex;
17
+
flex-direction: column;
18
+
gap: 0.15rem;
19
+
flex: 1;
20
+
min-width: 0;
21
+
}
22
+
23
+
#now-playing .now-playing-line {
24
+
display: flex;
17
25
align-items: center;
18
-
max-width: 50vw;
26
+
gap: 0.25rem;
27
+
min-width: 0;
19
28
}
20
29
21
30
#now-playing .track-name {
···
25
34
min-width: 0;
26
35
}
27
36
28
-
#now-playing .artist-name {
37
+
#now-playing .artist-line {
38
+
overflow: hidden;
39
+
text-overflow: ellipsis;
29
40
white-space: nowrap;
30
-
flex-shrink: 0;
31
41
}
32
42
33
43
#now-playing a {
34
44
color: var(--link);
35
45
text-decoration: none;
46
+
min-width: 0;
47
+
overflow: hidden;
36
48
}
37
49
38
50
#now-playing a:hover {
39
51
text-decoration: underline;
52
+
}
53
+
54
+
/* Hide music widget on very small screens */
55
+
@media (max-width: 640px) {
56
+
#now-playing {
57
+
display: none !important;
58
+
}
40
59
}
41
60
42
61
#nav-bar {
+5
-1
templates/header.html
+5
-1
templates/header.html
···
40
40
nowPlayingTimeout = setTimeout(fetchNowPlaying, 60000);
41
41
return;
42
42
}
43
-
el.innerHTML = `🎵 <a href="${item.originUrl || '#'}" target="_blank" rel="noopener"><span class="track-name">${item.trackName}</span></a> - <span class="artist-name">${item.artists?.[0]?.artistName || 'Unknown'}</span> <relative-time datetime="${item.playedTime}" threshold="P1D"></relative-time>`;
43
+
el.innerHTML = `
44
+
<div class="now-playing-line"><span>🎵</span><a href="${item.originUrl || '#'}" target="_blank" rel="noopener"><span class="track-name">${item.trackName}</span></a></div>
45
+
<div class="now-playing-line artist-line">${item.artists?.[0]?.artistName || 'Unknown'}</div>
46
+
<div class="now-playing-line"><relative-time datetime="${item.playedTime}" threshold="P1D"></relative-time></div>
47
+
`;
44
48
const timeUntilExpiry = expiry - now + 5000;
45
49
nowPlayingTimeout = setTimeout(fetchNowPlaying, timeUntilExpiry);
46
50
})