kaboom

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)
+  }
+}

themes/basspistol2025/layouts/partials/body/radio.html

@@ -10,12 +10,10 @@
     <h2>RadioStation</h2>
     <h4>𝕭𝖆𝖘𝖘𝖕𝖎𝖘𝖙𝖔𝖑 𝕽𝖆𝖉𝖎𝖔 𝕾𝖙𝖆𝖙𝖎𝖔𝖓</h4>
     <p>777% music, without commercials! RobotDJ-sets and live interventions! This is the sound of freedom.</p>
-    <a class="button" href="https://radio.basspistol.com/">Request song 📻</a>
+
   </div>
   <div class="border radioplayer">
-    <div id="recordPlayer">
+
-      <img src="" />
-    </div>
     <div class="legend-container">
       <div class="legend">
         <button id="myBtn">▶️</button>
@@ -28,7 +26,17 @@
           </audio>
         </div>
       </div>
+      <div>
+        <br />
         <a href="" id="supportButtonDelux" class="button player">🫰 Support this Artist</a>
+        <br />
+        <a class="button" href="https://radio.basspistol.com/">📻 Request song</a>
+        <br />
+        <a class="button" href="https://radio.basspistol.com/public/basspistol/schedule">🗓️ Schedule</a>
+      </div>
+    </div>
+    <div id="recordPlayer">
+      <img src="" id="coverArt" />
     </div>
   </div>
   <div class="section-footers"></div>
@@ -48,8 +56,8 @@
   let supportButtonDelux = document.getElementById('supportButtonDelux');
 
   // record player
-  let recordPlayer = document.getElementById('recordPlayer');
+  let coverArt = document.getElementById('coverArt');
-  recordPlayer.classList.add("btn");
+  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");
+        coverArt.classList.add("spinner");
-        recordPlayer.classList.remove("stop");
+        coverArt.classList.remove("stop");
       } else {
         audio.pause();
         btn.innerHTML = "▶️";
-        recordPlayer.classList.add("stop");
+        coverArt.classList.add("stop");
       }
     };