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"
+ />
+
- Track Name
@@ -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;
+ }
+}