From 514b10ef84b12d34f8741257328db98b0791ac79 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Mon, 28 Mar 2022 14:19:08 +0200
Subject: [PATCH] Change the ListenBrainz style slightly.

---
 source/js/listenbrainz.js                 | 11 ++++++-----
 source/scss/components/_listenbrainz.scss | 14 +++++---------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/source/js/listenbrainz.js b/source/js/listenbrainz.js
index b264cc3..0ef7bd1 100644
--- a/source/js/listenbrainz.js
+++ b/source/js/listenbrainz.js
@@ -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">
-    ${listen.track_metadata.artist_name} - ${listen.track_metadata.track_name}
-  </a>
-</div>`;
+    <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>
+</p>`;
 
   document.querySelector('.page-main').insertAdjacentHTML('beforeend', listenHtml);
 }
diff --git a/source/scss/components/_listenbrainz.scss b/source/scss/components/_listenbrainz.scss
index 514007a..e9d1965 100644
--- a/source/scss/components/_listenbrainz.scss
+++ b/source/scss/components/_listenbrainz.scss
@@ -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;
   }
 }