yuki/yuki.k4w411.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweak lastfm box

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

21
css/main.scss
View file

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

11
js/lastfm.js
View file

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