From 34415569b956a693f87fc8f3f5ab15349b163758 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Fri, 31 May 2024 22:28:07 +0100
Subject: [PATCH] Improve Music component

---
 src/components/Music.astro | 14 ++++++++++++--
 src/styles/_music.scss     | 31 +++++++++++++++++++++++++------
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/components/Music.astro b/src/components/Music.astro
index 9fd2a39..2ecef97 100644
--- a/src/components/Music.astro
+++ b/src/components/Music.astro
@@ -9,7 +9,15 @@ import leg from "../assets/leg.webp";
         height="64"
         loading="eager"
         alt="Track cover art"
-        id="music-image"
+        class="music-img music-bg"
+    />
+    <img
+        src={leg.src}
+        width="64"
+        height="64"
+        loading="eager"
+        alt="Track cover art"
+        class="music-img music-cover"
     />
     <ul>
         <li id="music-title" style="font-weight: 600;">Track Name</li>
@@ -23,7 +31,9 @@ import leg from "../assets/leg.webp";
         const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
         const data = await request.json();
 
-        ( document.querySelector("#music-image") as HTMLImageElement ).src = data["track"]["image"][2]["#text"];
+        ( document.querySelectorAll(".music-img") as HTMLImageElement[] ).forEach((img) => {
+            img.src = data["track"]["image"][2]["#text"];
+        });
         ( document.querySelector("#music-title") as HTMLParagraphElement ).innerText = `${data["track"]["name"]}`;
         ( document.querySelector("#music-artist") as HTMLParagraphElement ).innerText = `by ${data["track"]["artist"]["#text"]}`;
         ( document.querySelector("#music-album") as HTMLParagraphElement ).innerText = `on ${data["track"]["album"]["#text"]}`;
diff --git a/src/styles/_music.scss b/src/styles/_music.scss
index e022acc..fcadcd8 100644
--- a/src/styles/_music.scss
+++ b/src/styles/_music.scss
@@ -20,25 +20,37 @@
         border-radius: $radius;
     }
 
-    > img {
-        width: auto;
+    .music-bg {
+        width: 100%;
         height: 100%;
 
         position: absolute;
         top: 0;
         left: 0;
 
-        //border-radius: $radius;
-
+        filter: blur(1px) saturate(110%);
         mask-image: linear-gradient(
             to right,
-            rgba(#fff, 0.5),
-            rgba(#fff, 0) 80%
+            rgba(#fff, 0.4),
+            rgba(#fff, 0)
         );
+
         object-fit: cover;
         z-index: +1;
     }
 
+    .music-cover {
+        margin-right: 4px;
+
+        width: 80px;
+        height: 80px;
+
+        border-radius: $radius;
+
+        object-fit: cover;
+        z-index: +2;
+    }
+
     > ul {
         position: relative;
 
@@ -54,3 +66,10 @@
         }
     }
 }
+
+
+@media only screen and (max-width: 500px) {
+    #music {
+        flex-direction: column;
+    }
+}