From 39154c1759719bcb8998b33b8c82fc6ee2e2eca7 Mon Sep 17 00:00:00 2001
From: yuki <yvki@riseup.net>
Date: Sun, 12 Oct 2025 08:07:32 -0300
Subject: [PATCH] tweak lastfm box

---
 css/main.scss | 35 ++++++++++++++++++++++-------------
 js/lastfm.js  | 19 +++++++++++--------
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/css/main.scss b/css/main.scss
index b094ffd..afb3b3a 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -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%); }
             }
         }
         
diff --git a/js/lastfm.js b/js/lastfm.js
index 7a43537..292ee86 100644
--- a/js/lastfm.js
+++ b/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>
     `
 };