Bauke/bauke-xyz
Bauke
/
bauke-xyz
1
Fork 0
Code Releases 12 Activity

Change the ListenBrainz style slightly.

This commit is contained in:
Bauke 2022-03-28 14:19:08 +02:00
parent 5e2d50af5b
commit 514b10ef84
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
2 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
source/js/listenbrainz.js
View File

@ -32,12 +32,13 @@ function insertHtml(listen) {
existing.remove();
}
const listenHtml = `<div class="listenbrainz">
<a href="https://listenbrainz.org/user/BaukeXYZ/" target="_blank">
const listenHtml = `<p class="listenbrainz">
<img src="https://listenbrainz.org/static/img/logo_big.svg">
<span class="byline">Currently listening to</span>
<a href="https://listenbrainz.org/user/BaukeXYZ/" target="_blank">
${listen.track_metadata.artist_name} - ${listen.track_metadata.track_name}
</a>
</div>`;
</p>`;
document.querySelector('.page-main').insertAdjacentHTML('beforeend', listenHtml);
}

14
source/scss/components/_listenbrainz.scss
View File

@ -1,18 +1,14 @@
.listenbrainz a {
.listenbrainz {
align-items: center;
border: 2px solid var(--foreground-1);
display: flex;
display: grid;
grid-template-columns: min-content auto;
margin-top: 1rem;
padding: 1rem;
&:hover {
background-color: var(--foreground-1);
border-color: var(--foreground-1);
color: var(--background-1);
}
img {
height: 3rem;
grid-row: 1 / 3;
margin-right: 1rem;
width: 4rem;
}
}