tweak lastfm box
This commit is contained in:
parent
f9cb750c17
commit
39154c1759
2 changed files with 33 additions and 21 deletions
|
|
@ -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%); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
19
js/lastfm.js
19
js/lastfm.js
|
|
@ -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>
|
||||
`
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue