make /music/ ugly so I'll be forced to finish updating it

1 files changed, 19 insertions, 70 deletions

diff --git a/music/index.php b/music/index.php
index adc46cc..b92406f 100644
--- a/music/index.php
+++ b/music/index.php
@@ -4,57 +4,6 @@
 <head>
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/boilerplate.php'); ?>
   <title>music | <?php echo($_SERVER['HTTP_HOST']);?></title>
-  <style>
-    #flex-container {
-      display: flex;
-      flex-wrap: wrap;
-      filter: drop-shadow(3px 3px 6px black);
-    }
-    #flex-container a {
-      --columncount: 2;
-      position: relative;
-      width: calc(100% / var(--columncount));
-      aspect-ratio: 1;
-      background-image: var(--img);
-      background-size: cover;
-      transition-duration: 0.5s;
-      overflow: hidden;
-    }
-    #flex-container a:hover {
-      z-index: 50;
-      box-shadow: 0 0 12px 2px black;
-      transform: scale(1.15);
-      color: #df1955;
-    }
-    #flex-container a span {
-      background-color: #000000cc;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 5.2rem;
-      padding: 0 2rem;
-      display: flex;
-      align-items: center;
-      transition-duration: 0.5s;
-      box-sizing: border-box;
-    }
-    #flex-container a:hover span {
-      bottom: -5.2rem;
-    }
-    @media only screen and (max-width: 43rem) {
-      #flex-container a {
-        --columncount: 1;
-      }
-    }
-    @media only screen and (hover: none) {
-      #flex-container a:hover {
-        transform: initial;
-        z-index: initial;
-        box-shadow: initial;
-      }
-    }
-  </style>
 </head>
 
 <body>
@@ -231,25 +180,25 @@
 
 
     <p class="notice">What follows is the subset of this page's content that's still pending being redone.</p>
-    <div id="flex-container">
-      <a style="--img: url(covers/el_camino.jpg);"                  target="_blank" href="https://theblackkeys.com/?frontpage=true"                             ><span>The Black Keys - El Camino</span></a>
-      <a style="--img: url(covers/unstoppable_force.jpg);"          target="_blank" href="https://caliphate.bandcamp.com/album/unstoppable-force"               ><span>CALIPHATE - Unstoppable Force</span></a>
-      <a style="--img: url(covers/walks_of_lung.jpg);"              target="_blank" href="https://patriciataxxon.bandcamp.com/album/walks-of-lung"              ><span>Patricia Taxxon - Walks of Lung</span></a>
-      <a style="--img: url(covers/two_house.jpg);"                  target="_blank" href="https://foodhouse.bandcamp.com/album/two-house"                       ><span>Food House - two house</span></a>
-      <a style="--img: url(covers/american_automatic.jpg);"         target="_blank" href="https://en.wikipedia.org/wiki/Kill_Memory_Crash"                      ><span>Kill Memory Crash - American Automatic</span></a>
-      <a style="--img: url(covers/fucked_up_friends_3.jpg);"        target="_blank" href="https://tobaxxo.bandcamp.com/album/fucked-up-friends-3"               ><span>TOBACCO - Fucked Up Friends 3</span></a>
-      <a style="--img: url(covers/synthicate.jpg);"                 target="_blank" href="https://newretrowave.bandcamp.com/album/synthicate"                   ><span>LAZERPUNK - Synthicate</span></a>
-      <a style="--img: url(covers/peaks_and_valleys.jpg);"          target="_blank" href="https://revolutionpeak.bandcamp.com/album/peaks-and-valleys"          ><span>Revolution Peak - Peaks and Valleys</span></a>
-      <a style="--img: url(covers/triangle_unicode.jpg);"           target="_blank" href="https://wearemagonia.bandcamp.com/album/triangle-unicode-lp"          ><span>We Are Magonia - Triangle Unicode</span></a>
-      <a style="--img: url(covers/vast.jpg);"                       target="_blank" href="https://waterflame.bandcamp.com/album/vast"                           ><span>Waterflame - Vast</span></a>
-      <a style="--img: url(covers/tortured_waters.jpg);"            target="_blank" href="https://newretrowave.bandcamp.com/album/tortured-waters"              ><span>DEADLIFE - Tortured Waters</span></a>
-      <a style="--img: url(covers/spirit_phone.jpg);"               target="_blank" href="http://www.neilcic.com/"                                              ><span>Lemon Demon - Spirit Phone</span></a>
-      <a style="--img: url(covers/millenialism.jpg);"               target="_blank" href="https://music.businesscasual.biz/album/millennialism"                 ><span>NYSE - MILLENNIALISM</span></a>
-      <a style="--img: url(covers/revolution_radio.jpg);"           target="_blank" href="https://greenday.com/"                                                ><span>Green Day - Revolution Radio</span></a>
-      <a style="--img: url(covers/this_is_all_yours.jpg);"          target="_blank" href="https://altjband.com/"                                                ><span>Alt-J - This Is All Yours</span></a>
-      <a style="--img: url(covers/the_last_ninja_2_c64_ost.jpg);"   target="_blank" href="https://www.youtube-nocookie.com/embed/bjbN2RyZXHI"                   ><span>Matt Gray - The Last Ninja 2 (C64) OST</span></a>
-      <a style="--img: url(covers/aeon_core.jpg);"                  target="_blank" href="https://perctrax.bandcamp.com/album/aeon-core"                        ><span>Scalameriya - Aeon Core</span></a>
-    </div>
+    <ul id="flex-container">
+      <li><a style="--img: url(covers/el_camino.jpg);"                  target="_blank" href="https://theblackkeys.com/?frontpage=true"                             ><span>The Black Keys - El Camino</span></a></li>
+      <li><a style="--img: url(covers/unstoppable_force.jpg);"          target="_blank" href="https://caliphate.bandcamp.com/album/unstoppable-force"               ><span>CALIPHATE - Unstoppable Force</span></a></li>
+      <li><a style="--img: url(covers/walks_of_lung.jpg);"              target="_blank" href="https://patriciataxxon.bandcamp.com/album/walks-of-lung"              ><span>Patricia Taxxon - Walks of Lung</span></a></li>
+      <li><a style="--img: url(covers/two_house.jpg);"                  target="_blank" href="https://foodhouse.bandcamp.com/album/two-house"                       ><span>Food House - two house</span></a></li>
+      <li><a style="--img: url(covers/american_automatic.jpg);"         target="_blank" href="https://en.wikipedia.org/wiki/Kill_Memory_Crash"                      ><span>Kill Memory Crash - American Automatic</span></a></li>
+      <li><a style="--img: url(covers/fucked_up_friends_3.jpg);"        target="_blank" href="https://tobaxxo.bandcamp.com/album/fucked-up-friends-3"               ><span>TOBACCO - Fucked Up Friends 3</span></a></li>
+      <li><a style="--img: url(covers/synthicate.jpg);"                 target="_blank" href="https://newretrowave.bandcamp.com/album/synthicate"                   ><span>LAZERPUNK - Synthicate</span></a></li>
+      <li><a style="--img: url(covers/peaks_and_valleys.jpg);"          target="_blank" href="https://revolutionpeak.bandcamp.com/album/peaks-and-valleys"          ><span>Revolution Peak - Peaks and Valleys</span></a></li>
+      <li><a style="--img: url(covers/triangle_unicode.jpg);"           target="_blank" href="https://wearemagonia.bandcamp.com/album/triangle-unicode-lp"          ><span>We Are Magonia - Triangle Unicode</span></a></li>
+      <li><a style="--img: url(covers/vast.jpg);"                       target="_blank" href="https://waterflame.bandcamp.com/album/vast"                           ><span>Waterflame - Vast</span></a></li>
+      <li><a style="--img: url(covers/tortured_waters.jpg);"            target="_blank" href="https://newretrowave.bandcamp.com/album/tortured-waters"              ><span>DEADLIFE - Tortured Waters</span></a></li>
+      <li><a style="--img: url(covers/spirit_phone.jpg);"               target="_blank" href="http://www.neilcic.com/"                                              ><span>Lemon Demon - Spirit Phone</span></a></li>
+      <li><a style="--img: url(covers/millenialism.jpg);"               target="_blank" href="https://music.businesscasual.biz/album/millennialism"                 ><span>NYSE - MILLENNIALISM</span></a></li>
+      <li><a style="--img: url(covers/revolution_radio.jpg);"           target="_blank" href="https://greenday.com/"                                                ><span>Green Day - Revolution Radio</span></a></li>
+      <li><a style="--img: url(covers/this_is_all_yours.jpg);"          target="_blank" href="https://altjband.com/"                                                ><span>Alt-J - This Is All Yours</span></a></li>
+      <li><a style="--img: url(covers/the_last_ninja_2_c64_ost.jpg);"   target="_blank" href="https://www.youtube-nocookie.com/embed/bjbN2RyZXHI"                   ><span>Matt Gray - The Last Ninja 2 (C64) OST</span></a></li>
+      <li><a style="--img: url(covers/aeon_core.jpg);"                  target="_blank" href="https://perctrax.bandcamp.com/album/aeon-core"                        ><span>Scalameriya - Aeon Core</span></a></li>
+    </ul>
   </main>
   <?php include($_SERVER['DOCUMENT_ROOT'] . '/footer.php');?>