diff --git a/themes/basspistol2025/assets/css/style.css b/themes/basspistol2025/assets/css/style.css index c031c3c..15baece 100644 --- a/themes/basspistol2025/assets/css/style.css +++ b/themes/basspistol2025/assets/css/style.css @@ -384,32 +384,45 @@ justify-content: space-between; #radio { - #recordPlayer { - height: 300px; - width: 300px; - background-size: cover; - background-position: center center; - border-radius:7px; - transition: all linear 1s; - } - .spinner { - border-radius: 300px !important; - animation: rotate 10s linear infinite; - } - .stop { - animation-play-state: paused; - } - .radioplayer { display: flex; flex-wrap: wrap; + justify-content: space-between; + } + + #recordPlayer { + flex: 1 1 300px; + background-size: cover; + background-position: center center; + margin-top:40px; + + img { + border-radius:7px; + transition: all linear 1s; + width: 100%; + height: auto; + object-fit: cover; + } } .legend-container { align-content: center; - margin-left: 40px; display: flex; flex-wrap: wrap; + flex: 1 1 300px; + + } + + + .spinner { + border-radius: 2000px !important; + animation: rotate 10s linear infinite; + border-style: double; + border-color: purple; + border-width: 10px; + } + .stop { + animation-play-state: paused; } .legend { @@ -423,24 +436,16 @@ justify-content: space-between; width: 100%; } - button { + #myBtn { background: transparent; border: none; padding: 0; margin: 0; + font-size: 3em; } } -@keyframes rotate { - 0% { - transform: rotate(0deg) - } - 100% { - transform: rotate(360deg) - } -} - @media screen and (max-width: 720px) { @@ -503,6 +508,23 @@ justify-content: space-between; } } } + + #radio { + + + #myBtn { + font-size: 4em; + } + } } +/* ANIMATIONS */ +@keyframes rotate { + 0% { + transform: rotate(0deg) + } + 100% { + transform: rotate(360deg) + } +} diff --git a/themes/basspistol2025/layouts/partials/body/radio.html b/themes/basspistol2025/layouts/partials/body/radio.html index 582da7d..50544e7 100644 --- a/themes/basspistol2025/layouts/partials/body/radio.html +++ b/themes/basspistol2025/layouts/partials/body/radio.html @@ -10,12 +10,10 @@

RadioStation

π•­π–†π–˜π–˜π–•π–Žπ–˜π–™π–”π–‘ π•½π–†π–‰π–Žπ–” π•Ύπ–™π–†π–™π–Žπ–”π–“

777% music, without commercials! RobotDJ-sets and live interventions! This is the sound of freedom.

- Request song πŸ“» +
-
- -
+
@@ -28,7 +26,17 @@
- 🫰 Support this Artist +
+
+ 🫰 Support this Artist +
+ πŸ“» Request song +
+ πŸ—“οΈ Schedule +
+
+
+
@@ -48,8 +56,8 @@ let supportButtonDelux = document.getElementById('supportButtonDelux'); // record player - let recordPlayer = document.getElementById('recordPlayer'); - recordPlayer.classList.add("btn"); + let coverArt = document.getElementById('coverArt'); + coverArt.classList.add("btn"); // Title and Artist let npArtist = document.getElementById('npArtist'); @@ -67,7 +75,7 @@ supportClicker.map(function(support) { // set background image in record player - recordPlayer.style.backgroundImage = "url(" + `${support.now_playing.song.art}` + ")"; + coverArt.src = `${support.now_playing.song.art}`; // print text @@ -104,12 +112,12 @@ if (audio.paused) { audio.play(); btn.innerHTML = "⏸️"; - recordPlayer.classList.add("spinner"); - recordPlayer.classList.remove("stop"); + coverArt.classList.add("spinner"); + coverArt.classList.remove("stop"); } else { audio.pause(); btn.innerHTML = "▢️"; - recordPlayer.classList.add("stop"); + coverArt.classList.add("stop"); } };