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(); existing.remove();
} }
const listenHtml = `<div class="listenbrainz"> const listenHtml = `<p class="listenbrainz">
<a href="https://listenbrainz.org/user/BaukeXYZ/" target="_blank">
<img src="https://listenbrainz.org/static/img/logo_big.svg"> <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} ${listen.track_metadata.artist_name} - ${listen.track_metadata.track_name}
</a> </a>
</div>`; </p>`;
document.querySelector('.page-main').insertAdjacentHTML('beforeend', listenHtml); 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; align-items: center;
border: 2px solid var(--foreground-1); border: 2px solid var(--foreground-1);
display: flex; display: grid;
grid-template-columns: min-content auto;
margin-top: 1rem; margin-top: 1rem;
padding: 1rem; padding: 1rem;
&:hover {
background-color: var(--foreground-1);
border-color: var(--foreground-1);
color: var(--background-1);
}
img { img {
height: 3rem; grid-row: 1 / 3;
margin-right: 1rem; margin-right: 1rem;
width: 4rem;
} }
} }