tweak lastfm box

This commit is contained in:
yuki 2025-10-12 08:07:32 -03:00
parent f9cb750c17
commit 39154c1759
Signed by: yuki
GPG key ID: 0C98E6FF04EC3915
2 changed files with 33 additions and 21 deletions

View file

@ -126,24 +126,33 @@ body {
.now-playing-wrapper {
width: 190px;
#np {
h2 { margin-bottom: 0px; }
a { text-decoration: none; }
#trackInfo {
display: flex;
align-items: flex-start;
justify-content: space-evenly;
max-height: 64px;
img {
order: 1;
max-width: 36px;
padding: 4px;
height: 100%;
margin: 0px 0px 0px 0px;
}
h3 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 0.8em;
padding: 0px 0px 0px 4px;
}
p {
font-size: 0.7em;
padding: 0px 0px 2px 4px;
#trackInfoText {
display: flex;
align-items: flex-start;
flex-direction: column;
h3 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 0.8em;
padding: 0px 0px 0px 4px;
}
p {
font-size: 0.7em;
padding: 0px 0px 0px 4px;
}
}
&:hover { background: hsl(0, 65%, 5%); }
}
}

View file

@ -23,14 +23,17 @@ const getTrack = async () => {
// ARTIST: json.track.artist['#text']
document.getElementById("listening").innerHTML = `
<div class="now-playing-wrapper box">
<h2>listening to:</h2>
<div id="np">
<img src="${json.track.image[1]['#text']}">
<div id="trackInfo">
<h3 id="trackName">${json.track.name}</h3>
<p id="artistName">${json.track.artist['#text']}</p>
</div>
<div class="now-playing-wrapper box" title="listening to...">
<!--<h2>listening to:</h2>-->
<a href="https://fm.yuki.k4w411.net/" target="_blank">
<div id="trackInfo">
<img src="${json.track.image[1]['#text']}">
<div id="trackInfoText">
<h3 id="trackName">${json.track.name}</h3>
<p id="artistName">${json.track.artist['#text']}</p>
</div>
</div>
</a>
</div>
`
};