Mirror page reopen - Open Access addition

archive.html

@@ -193,9 +193,9 @@
           </section>
 
           <section class="ly-item ly-rect ly-archive">
-            <a href="#" class="no">
-              <h1 style="text-decoration: line-through">Mirror</h1>
-              <h2>Currently unavailable</h2>
+            <a href="mirror.html">
+              <h1>Mirror</h1>
+              <h2>Extra resources I host</h2>
               <picture>
                 <source
                   srcset="res/img-artchive-mirror.avif"

mirror.html

@@ -74,7 +74,7 @@
           />
           <img src="res/asset-sitewide-header-banner.png" alt="" />
         </picture>
-        <a aria-label="Return to the Homepage" href="index.html">
+        <a aria-label="Return to the Homepage" tabindex="-1" href="#">
           <picture id="header-img-group-logo">
             <source
               srcset="res/asset-sitewide-header-ennspace.avif"
@@ -91,31 +91,30 @@
           </picture>
         </a>
       </div>
-      <nav>
-        <ul>
-          <li>
-            <a aria-label="Go Back to Homepage" href="index.html">home</a>
-          </li>
-          <li>
-            <a aria-label="Listen to my music" href="sound-design.html"
-              >music</a
-            >
-          </li>
-          <div aria-hidden="true" id="whitespace"></div>
-          <li id="parent">
-            <a
-              aria-label="The Hub that links to my Art, Poetry and Other-Media"
-              href="archive.html"
-              >archive</a
-            >
-          </li>
-          <li>
-            <a href="blog/index.html">blog</a>
-          </li>
-        </ul>
-      </nav>
     </header>
 
+    <nav id="navigation">
+      <ul>
+        <li>
+          <a aria-label="Go Back to Homepage" href="index.html">home</a>
+        </li>
+        <li id="music">
+          <a aria-label="Listen to my music" href="sound-design.html">music</a>
+        </li>
+        <div aria-hidden="true" id="whitespace"></div>
+        <li id="parent">
+          <a
+            aria-label="My archive of Art, Poetry and Other-Media"
+            href="archive.html"
+            >archive</a
+          >
+        </li>
+        <li>
+          <a aria-label="Go to my Blog" href="blog/index.html">blog</a>
+        </li>
+      </ul>
+    </nav>
+
     <aside id="socials">
       <a
         href="https://www.soundcloud.com/nnwhen"
@@ -154,47 +153,51 @@
     >
       The Mirror
     </h1>
-    <main id="main" class="list">
-      <!-- <section class="list-entity">
-        <div class="list-entity-info">
-          <hgroup>
-            <h2>
-              <a aria-label="Les" href="">LES::</a>
-            </h2>
-            <h3>Photography, Music, Art.</h3>
-          </hgroup>
-          <p>Les is a multi-talented artist</p>
-          <a href="">Direct Link to Les' website</a>
-        </div>
+    <main id="main">
+      <section class="ly-mirror">
         <picture>
-          <source
-            srcset="res/asset-sitewide-header-banner.avif"
-            type="image/avif"
+          <source srcset="res/img-mirror-openaccess.avif" type="image/avif" />
+          <source srcset="res/img-mirror-openaccess.webp" type="image/webp" />
+          <img
+            src="res/img-mirror-openaccess.jpg"
+            alt="An image of a face refracted through water. It is split diagonally, the two images are almost identical. The one has an overlain audio spectrum with red text, the other is just the image."
           />
-          <source
-            srcset="res/asset-sitewide-header-banner.webp"
-            type="image/webp"
-          />
-          <img src="res/img-artwork-42.jpg" alt="Portrait of Les" />
         </picture>
+        <section class="mirror-info">
+          <header>
+            <h1>Open Access</h1>
+            <h2>Instrumental and Stems</h2>
+          </header>
+          <p>
+            Resources from
+            <a
+              href="https://nnwhen.bandcamp.com/track/open-access"
+              target="_blank"
+              >my release: "Open Access"</a
+            >
+          </p>
+          <ol>
+            <h3>Downloads</h3>
+            <li>
+              <a
+                href="mirror/mus-OA/01 - Open Access [Instrumental].flac"
+                target="_blank"
+                >"Open Access" - Instrumental</a
+              >
+            </li>
+            <li>
+              <a href="mirror/mus-OA/Open Access Stems.zip" target="_blank"
+                >"Open Access" - Stems</a
+              >
+            </li>
+            <li>
+              <a href="mirror/mus-OA/Open Access Imagery.zip" target="_blank"
+                >"Open Access" - Imagery</a
+              >
+            </li>
+          </ol>
+        </section>
       </section>
-      <h2>nnwhen</h2>
-      <h3>Torrents</h3>
-      <p>
-        Download using the bittorrent protocol and support nnwhen by making sure
-        their art is always available and decentralised.
-      </p>
-      <ul>
-        <li>
-          <a aria-label="Music Torrent" href="">Music</a>
-        </li>
-        <li>
-          <a aria-label="Artwork Torrent" href="">Artwork</a>
-        </li>
-        <li>
-          <a aria-label="Poetry Torrent" href="">Poetry</a>
-        </li>
-      </ul> -->
     </main>
 
     <footer id="free">

style.css

@@ -10,6 +10,7 @@
   --accent-0: #c8beb5;
   --accent-1: #f18d74;
   --accent-2: #e3beb3;
+  --accent-3: #2e2827;
   --subtitle: #aca4a0;
 
   --title-background: #00000075;
@@ -69,6 +70,10 @@ a:hover {
   color: var(--max-1);
 }
 
+img {
+  display: block;
+}
+
 .load-enable img {
   -webkit-animation: load 2s ease-in-out infinite alternate;
   animation: load 2s ease-in-out infinite alternate;
@@ -662,6 +667,40 @@ footer#free {
   transition: ease-in-out 200ms;
 }
 
+/* Mirror List */
+.ly-mirror {
+  display: flex;
+  width: min(95%, 1200px);
+  margin: 20px auto;
+
+  background-color: var(--accent-3);
+}
+.ly-mirror img,
+.ly-mirror picture {
+  width: 250px;
+  height: 250px;
+  object-fit: cover;
+  margin-right: 20px;
+  animation: load 1s infinite alternate;
+}
+.ly-mirror h1,
+.ly-mirror h2,
+.ly-mirror h3 {
+  margin: 0;
+}
+.ly-mirror h3 {
+  text-align: center;
+  background-color: var(--background);
+  margin-bottom: 5px;
+}
+.ly-mirror h1 {
+  font-size: x-large;
+}
+.ly-mirror h2 {
+  font-size: larger;
+  font-family: "mono", monospace;
+}
+
 /* Directory List Pages */
 .list {
   width: min(95%, 850px);