added content for djent and metalcore

content.yaml

@@ -42,6 +42,31 @@ music:
     music-paragraph: "I mostly listen to metal, more specifically djent, progressive, death, black and core.
       Outside of metal I like post-hardcore, post-rock, shoegaze, (german) indie pop and some songs from lots of other genres.
       On this page I'll list some Bands, Albums and Songs that I like, as well as display some music stats."
+    djent-paragraph: "Even though djent is a subgenre of progressive metal, I need to mention it here. Not only do I listen to it the most,
+      but I also think the distinction is clear enough to list it as a seperate genres.
+      Djent is definitely my favourite. Bands that play in this style are so diverse and the discography of most of my favourites are a goldmine.
+      The big three are some of my all-time favourite bands. Periphery, Tesseract and Meshuggah relased more excellent music in the past 1-3 decades than you can listen to.
+      Meshuggah have been consistent with their style for over 30 years. Tesseract always had a great mix of sensual, melancholic and heavy. 
+      Periphery stayed true to their roots and their roots are 'doing whatever they wanna do'. Especially because of Periphery's diverse discography, listening to them never gets boring.
+      They have an album for every day of the week, no matter the mood.
+      <br>Other bands I need to mention are VOLA, Vildhjarta, The Contortionist and Karmanjakah. All with their very unique style."
+    metalcore-paragraph: >-
+      I had a bit of a weird relationship with metalcore over the years. Some of the first
+      bands I listened to made metalcore. As a teenager I almost exclusively listened to
+      Bring Me The Horizon, Atreyu and Escape the Fate. That changed in 2015, when Bring
+      Me The Horizon released their "That's the Spirit" and Atreyu their "Long Live". 
+      At the time I found them terrible and it devasted me to a point I started searching for other music.
+      I grew to love Melodic Deathmetal instead and left Metalcore behind.<br>
+      All changed when I discovered ERRA in 2022 and later Invent Animate.
+      This new 'era' of Metalcore suited me well. The genre developed over the years just like my taste.
+      ERRA's high energy and djent-infused riffs immediately hooked me and Invent Animate soon grew to be one of my all-time favourites.
+    invent-animate-paragraph: >-
+      The first song I listened to of them was Cloud Cascade. After finishing an ERRA-album the song automatically played after and I knew this was my new obsession.
+      Melodic, unique and melacholic riffs, paired with passionate vocals and that breakdown...
+      I binged their discography the same week and their album "Greyview" became one of my all-time favourites.
+      Invent Animate supported ERRA during their 2023 Europe-tour and I hate to say that Invent Animate stole the show from ERRA.
+      When they released their album "heavener", I couldn't believe how good it was. I had it on repeat for the following weeks and still listen to it regularly.
+
   de:
     music-heading: "mein Musikgeschmack"
     page-title: "Marco's musikgeschmack"
@@ -49,3 +74,28 @@ music:
     music-paragraph: "I mostly listen to metal, more specifically djent, progressive, death, black and core.
       Outside of metal I like post-hardcore, post-rock, shoegaze, (german) indie pop and some songs from lots of other genres.
       On this page I'll list some Bands, Albums and Songs that I like, as well as display some music stats."
+    djent-paragraph: "Even though djent is a subgenre of progressive metal, I need to mention it here. Not only do I listen to it the most,
+      but I also think the distinction is clear enough to list it as a seperate genres.
+      Djent is definitely my favourite. Bands that play in this style are so diverse and the discography of most of my favourites are a goldmine.
+      The big three are some of my all-time favourite bands. Periphery, Tesseract and Meshuggah relased more excellent music in the past 1-3 decades than you can listen to.
+      Meshuggah have been consistent with their style for over 30 years. Tesseract always had a great mix of sensual, melancholic and heavy. 
+      Periphery stayed true to their roots and their roots are 'doing whatever they wanna do'. Especially because of Periphery's diverse discography, listening to them never gets boring.
+      They have an album for every day of the week, no matter the mood.
+      Other bands I need to mention are VOLA, Vildhjarta, The Contortionist and Karmanjakah. All with their very unique style."
+    metalcore-paragraph: >-
+      I had a bit of a weird relationship with metalcore over the years. Some of the first
+      bands I listened to made metalcore. As a teenager I almost exclusively listened to
+      Bring Me The Horizon, Atreyu and Escape the Fate. That changed in 2015, when Bring
+      Me The Horizon released their "That's the Spirit" and Atreyu their "Long Live". 
+      At the time I found them terrible and it devasted me to a point I started searching for other music.
+      I grew to love Melodic Deathmetal instead and left Metalcore behind.<br>
+      All changed when I discovered ERRA in 2022 and later Invent Animate.
+      This new 'era' of Metalcore suited me well. The genre developed over the years just like my taste.
+      ERRA's high energy and djent-infused riffs immediately hooked me and Invent Animate soon grew to be one of my all-time favourites.
+    invent-animate-paragraph: >-
+      The first song I listened to of them was Cloud Cascade. After finishing an ERRA-album the song automatically played after and I knew this was my new obsession.
+      Melodic, unique and melacholic riffs, paired with passionate vocals and that breakdown...
+      I binged their discography the same week and their album "Greyview" became one of my all-time favourites.
+      Invent Animate supported ERRA during their 2023 Europe-tour and I hate to say that Invent Animate stole the show from ERRA.
+      When they released their album "heavener", I couldn't believe how good it was. I had it on repeat for the following weeks and still listen to it regularly.
+      

public/styles.css

@@ -26,6 +26,7 @@ p {
 
 a {
   color: #DD7FB6;
+  font-family: ubuntuSansMono;
   text-decoration: none
 }
 
@@ -95,12 +96,20 @@ div.audiocard {
   background-color: #51324A;
   display: inline-flex;
   text-align: left;
-  flex-direction: row;
-  box-sizing: border-box;
   padding: 15px;
   border-radius: 15px;
 }
 
+div.audiocard-floating-left {
+  margin: 0 20px 20px 0;
+  float: left;
+}
+
+div.audiocard-floating-right {
+  margin: 0 0 20px 20px;
+  float: right;
+}
+
 div.audioinner {
   padding-left: 15px;
   display: inline-flex;
@@ -110,10 +119,10 @@ div.audioinner {
 
 img.albumcoversmall {
   height: 100px;
-  width: 90px;
+  width: 100px;
+  border-radius: 12px;;
 }
 
-
 div.audioinner a,
 p {
   margin: 5px;

template-music.html

@@ -27,12 +27,12 @@
     </header>
 
     <h2 id="djent">djent</h2>
-    <div class="audiocard">
+
+    <div class="audiocard audiocard-floating-left">
         <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>
@@ -42,14 +42,15 @@
         </div>
     </div>
 
+    <p>{{djent-paragraph}}</p>
+
     <h2 id="metalcore">metalcore</h2>
 
-    <div class="audiocard">
+    <div class="audiocard audiocard-floating-right">
         <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>
@@ -59,6 +60,12 @@
         </div>
     </div>
 
+    <p>{{metalcore-paragraph}}</p>
+
+    <h3>invent animate</h3>
+
+    <p>{{invent-animate-paragraph}}</p>
+
     <h2 id="progressive">progressive metal</h2>
 
     <div class="audiocard">
@@ -66,7 +73,6 @@
             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>