tidying up layout + fonts

index.css

@@ -1,22 +1,41 @@
+@font-face { font-family: 'digital7'; src: url('fonts/digital-7.ttf'); }
+@font-face { font-family: 'monofonto'; src: url('fonts/monofonto.ttf'); }
+@font-face { font-family: 'Hack-Regular'; src: url('fonts/Hack-Regular.ttf'); }
+
 body
 {
     background-color: #28262C;
     color: #F9F5FF;
 }
 
+button
+{
+	background: none;
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+}
+
 .hidden
 {
-    display: none;
+    display: none !important;
 }
 
 .header
 {
-    font-size: 28px;
+    font-family: 'digital7';
+    color: #758E4F;
+    font-size: 48px;
     text-align: center;
+    margin-bottom: 10px;
 }
 
 .main
 {
+    font-family: 'monofonto';
     display: flex;
     flex-direction: row;
 }
@@ -26,6 +45,10 @@ body
     display: flex;
     flex-direction: column;
     width: 50%;
+    border-right: 1px solid white;
+    min-height: 600px;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 .showlist
@@ -35,12 +58,14 @@ body
 
 .show
 {
-    color: #14248A;
+    font-family: 'Hack-Regular';
+    color: #998FC7;
     cursor: pointer;
 }
 
 .tracklist
 {
+    font-family: 'monofonto';
     font-size: 14px;
 }
 
@@ -57,16 +82,49 @@ body
     width: 50%;
 }
 
-.audio-player
+#audio-player
 {
     display: flex;
-    width: 50%;
+    width: 100%;
+    flex-direction: column;
     align-items: center;
 }
 
-.audio-player button
+.player
 {
-    height: 14px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 75%;
+}
+
+.player .time
+{
+    margin: 10px;
+}
+
+.volume
+{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.volume #mute-icon
+{
+    margin: 10px;
+}
+
+.volume #mute-icon svg
+{
+    width: 50px;
+    height: 50px;
+}
+
+.volume #mute-icon svg path
+{
+    stroke: #F9F5FF !important;
+    fill: #F9F5FF !important;
 }
 
 .show-info

index.html

@@ -32,12 +32,21 @@
         <div class="information-and-showlist">
             <div class="information">
                 <p>Monads Music Mindset is a weekly internet radio program broadcasted on Mondays at 7PM Pacific Standard Time.</p>
-                <p>This page contains the archives of recorded broadcasts. I hope you'll join us for a live show!</p>
+                <p>This page contains the archives of recorded broadcasts, and can also stream the live broadcast. I hope you'll join us for a live show!</p>
             </div>
 
-            <div class="showlist">
+            <div id="showlist">
                 <div class="show">
-                    <span class=>002: psych trippin'</span>
+                    <span class="title">Live!</span>
+                    <span class="audioURL hidden">http://moonside.games:8000/MonadsMusicMindset</span>
+                    <div class="tracklist hidden">
+                        <span>Live with DJ Dankwraith</span>
+                        <span>Mondays at 7PM PST</span>
+                    </div>
+                </div>
+
+                <div class="show">
+                    <span class="title">002: psych trippin'</span>
                     <span class="audioURL hidden">audio/MonadsMusicMindset002.mp3</span>
                     <div class="tracklist hidden">
                         <span>Spacemen 3 - Losin' Touch With My Mind</span>
@@ -73,21 +82,39 @@
                         <span>Lusine - Operation Costs (Disassembled Mix)</span>
                         <span>Fennesz & Sakamoto - Kokoro</span>
                         <span>Bruno Pronsato - Feel Right</span>
+                        <span>Gas - Zauberberg 4</span>
+                        <span>Thomas Felhmann - Rainbow Over Stadtautobahn</span>
+                        <span>Jürgen Müller - Traumfolge Einier Qualle (Dream Sequence for a Jellyfish)</span>
+                        <span>Aphex Twin - Xtal</span>
+                        <span>Kaito - Trust</span>
+                        <span>Oval - Do While Apple-X</span>
+                        <span>Baths - Miasma Sky</span>
+                        <span>Gui Boratto - Take My Breath Away</span>
+                        <span>Orbital - Halcyon + On + On</span>
+                        <span>Steve Hauschildt - Tragedy & Geometry</span>
+                        <span>Luomo - Tessio</span>
+                        <span>Pole - Strand</span>
+                        <span>Triola - Ag Penthouse</span>
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="audio-player-and-tracks">
-            <div class="audio-player">
-                <audio></audio>
-                <button id="play-icon">▶️</button>
-                <span id="current-time" class="time">0:00</span>
-                <input type="range" id="seek-slider" max="100" value="0">
-                <span id="duration" class="time">0:00</span>
-                <output id="volume-output">100</output>
-                <input type="range" id="volume-slider" max="100" value="100">
-                <button id="mute-icon"></button>
+            <span id="audio-title" class="show"></span>
+
+            <div id="audio-player" class="hidden">
+                <audio preload="metadata"></audio>
+                <div class="player">
+                    <button id="play-icon">▶</button>
+                    <span id="current-time" class="time">0:00:00</span>
+                    <input type="range" id="seek-slider" max="100" value="0">
+                    <span id="duration" class="time">0:00:00</span>
+                </div>
+                <div class="volume">
+                    <span id="mute-icon">Volume</span>
+                    <input type="range" id="volume-slider" max="100" value="100">
+                </div>
             </div>
 
             <div id="show-info">

index.js

@@ -1,14 +1,15 @@
 const audio = document.querySelector('audio');
+const audioPlayer = document.getElementById('audio-player');
+const audioTitle = document.getElementById('audio-title');
 const durationContainer = document.getElementById('duration');
 const seekSlider = document.getElementById('seek-slider');
 const currentTimeContainer = document.getElementById('current-time');
 const playIconContainer = document.getElementById('play-icon');
 const volumeSlider = document.getElementById('volume-slider');
-const outputContainer = document.getElementById('volume-output');
 
 const showInfo = document.getElementById('show-info');
 
-let shows = document.getElementsByClassName('show');
+let shows = document.getElementById('showlist').children;
 
 for (var i = 0; i < shows.length; i += 1)
 {
@@ -16,11 +17,13 @@ for (var i = 0; i < shows.length; i += 1)
     let urlSpan = show.children[1];
     let audioURL = urlSpan.textContent;
     show.addEventListener('click', () => {
+        audioTitle.textContent = show.children[0].textContent;
+        audioPlayer.classList.remove('hidden');
         audio.src = audioURL;
         audio.load();
         showInfo.removeChild(showInfo.children[0]);
         showInfo.appendChild(show.children[2].cloneNode(true));
-        showInfo.children[0].classList.remove("hidden");
+        showInfo.children[0].classList.remove('hidden');
     });
 }
 
@@ -64,15 +67,16 @@ playIconContainer.addEventListener('click', () => {
     if(playState === PlayState.Pause) {
         audio.play();
         playState = PlayState.Play;
+        playIconContainer.textContent = '❚❚';
     } else {
         audio.pause();
         playState = PlayState.Pause;
+        playIconContainer.textContent = '▶';
     }
 });
 
 volumeSlider.addEventListener('input', (e) => {
     const value = e.target.value;
-    outputContainer.textContent = value;
     audio.volume = value / 100;
 });