added music players to music page

public/styles.css

@@ -77,14 +77,52 @@ a:hover {
 
 iframe {
   border: none;
-  overflow: hidden
 }
 
-#nowplayingwidget {
+iframe.nowplaying {
+  width: 400px;
+  height: 170px;
+
+}
+
+div.nowplaying {
   position: fixed;
   bottom: 15px;
   left: 15px;
-  float: left;
+}
+
+div.audiocard {
+  background-color: #51324A;
+  display: inline-flex;
+  text-align: left;
+  flex-direction: row;
+  box-sizing: border-box;
+  padding: 15px;
+  border-radius: 15px;
+}
+
+div.audioinner {
+  padding-left: 15px;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+img.albumcoversmall {
+  height: 100px;
+  width: 90px;
+}
+
+
+div.audioinner a,
+p {
+  margin: 5px;
+}
+
+iframe.bandcamptracksmall {
+  border: 0;
+  width: 400px;
+  height: 42px
 }
 
 /*colors:

template-music.html

@@ -16,19 +16,74 @@
         <a href="index.html">home</a>
         <a href="music.html">music</a>
     </div>
+    <div class="nowplaying">
+        <iframe class="nowplaying" title="last.fm now playing widget"
+            src="https://lastfm-embed.vercel.app/api/currently-playing?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6"></iframe>
+    </div>
 
     <header id="about">
         <h1>{{music-heading}}</h1>
         <p>{{music-paragraph}}</p>
     </header>
-    <div id="nowplayingwidget">
+
-        <iframe height="160" title="last.fm now playing widget" src="https://lastfm-embed.vercel.app/api/currently-playing?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6"></iframe>
+    <h2 id="djent">djent</h2>
+    <div class="audiocard">
+        <img class="albumcoversmall"
+            src="https://archive.org/download/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321-28191981668_thumb250.jpg"
+            alt="Album cover of Periphery's Juggernaut: Alpha">
+        <div class="audioinner">
+
+            <p>Periphery - Rainbow Gravity</p>
+            <a href="https://sumerianrecords.bandcamp.com/album/juggernaut-alpha">Juggernaut: Alpha</a>
+            <audio controls>
+                <source src="../music/Periphery - Juggernnaut Alpha.mp3" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>
     </div>
 
-    <h2>some music stats</h2>
+    <h2 id="metalcore">metalcore</h2>
-    <iframe width="600" height="700" title="last.fm top songs 7 days" src="https://lastfm-embed.vercel.app/api/top-tracks?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=7day&layout=vertical&rows=0&columns=2"></iframe>
+
-    <iframe width="600" height="700" title="last.fm top artists last month" src="https://lastfm-embed.vercel.app/api/top-artists?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=1month&layout=vertical&rows=6&columns=2&usePlaceholderImage=false"></iframe>
+    <div class="audiocard">
-    <iframe width="600" title="last.fm top artists last month" src="https://lastfm-embed.vercel.app/api/stats?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&numberFormat=periods"></iframe>
+        <img class="albumcoversmall"
+            src="https://archive.org/download/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054-26050116040_thumb250.jpg"
+            alt="Album cover of Invent Animate's Greyview">
+        <div class="audioinner">
+
+            <p>Invent Animate - Cloud Cascade</p>
+            <a href="https://inventanimate.bandcamp.com/album/greyview">Greyview</a>
+            <audio controls>
+                <source src="../music/Invent Animate - Cloud Cascade.mp3" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>
+    </div>
+
+    <h2 id="progressive">progressive metal</h2>
+
+    <div class="audiocard">
+        <img class="albumcoversmall"
+            src="https://archive.org/download/mbid-dcb6d817-0f33-4faa-8720-fb720396a0a8/mbid-dcb6d817-0f33-4faa-8720-fb720396a0a8-14429420393_thumb250.jpg"
+            alt="Album cover of Fallujah's Dreamless">
+        <div class="audioinner">
+
+            <p>Fallujah - Dreamless</p>
+            <a href="https://fallujah.bandcamp.com/album/dreamless">Dreamless</a>
+            <audio controls>
+                <source src="../music/Fallujah - Dreamless.mp3" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>
+    </div>
+
+    <h2 id="stats">some music stats</h2>
+
+    <iframe width="550" height="650" title="last.fm top songs 7 days"
+        src="https://lastfm-embed.vercel.app/api/top-tracks?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=7day&layout=vertical&rows=0&columns=2"></iframe>
+    <iframe width="550" height="650" title="last.fm top artists last month"
+        src="https://lastfm-embed.vercel.app/api/top-artists?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=1month&layout=vertical&rows=6&columns=2&usePlaceholderImage=false"></iframe>
+    <iframe width="500" title="last.fm top artists last month"
+        src="https://lastfm-embed.vercel.app/api/stats?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&numberFormat=periods"></iframe>
 </body>
 
 </html>