index update

index.html

@@ -129,17 +129,6 @@
     </nav>
 
     <main id="hero">
-      <section id="hero-headshot">
-        <picture>
-          <source srcset="res/img-home-headshot.avif" type="image/avif" />
-          <source srcset="res/img-home-headshot.webp" type="image/webp" />
-          <img
-            src="res/img-home-headshot.jpg"
-            alt="An image of nnwhen; their face obscured with paints"
-          />
-        </picture>
-        <p>It/Its; She/Her; They/Them</p>
-      </section>
       <section id="hero-info">
         <h1>I am <b>nnwhen</b></h1>
         <p>
@@ -195,6 +184,28 @@
           </a>
         </nav>
       </section>
+
+      <section id="hero-headshot">
+        <section id="directory">
+          <h1>Directory</h1>
+          <ul>
+            <li><a href="now.html">Now</a></li>
+            <li><a href="poetry/index.html">Poetry</a></li>
+            <li><a href="mirror.html">Samples and Stems</a></li>
+            <li><a href="artwork.html">Artworks</a></li>
+          </ul>
+        </section>
+
+        <picture>
+          <source srcset="res/img-home-headshot.avif" type="image/avif" />
+          <source srcset="res/img-home-headshot.webp" type="image/webp" />
+          <img
+            src="res/img-home-headshot.jpg"
+            alt="An image of nnwhen; their face obscured with paints"
+          />
+        </picture>
+        <p>It/Its; She/Her; They/Them</p>
+      </section>
     </main>
 
     <footer id="free">

style.css

@@ -310,7 +310,7 @@ li#music:not(#here) a {
     height: 50px;
   }
   #header-img-group-logo img {
-    height: 60px;
+    height: 80px;
     width: 100px;
   }
 
@@ -381,12 +381,9 @@ footer#free {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+  flex-direction: row-reverse;
+  -ms-flex-wrap: wrap-reverse;
+  flex-wrap: wrap-reverse;
   -webkit-box-pack: space-evenly;
   -ms-flex-pack: space-evenly;
   justify-content: space-evenly;
@@ -394,6 +391,9 @@ footer#free {
   text-align: center;
   font-family: "Syne", monospace;
 }
+#hero-headshot {
+  position: relative;
+}
 #hero-headshot img {
   width: 100%;
   height: auto;
@@ -405,9 +405,14 @@ footer#free {
   object-fit: cover;
 }
 #hero-headshot p {
-  margin: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 2px 5px;
   color: var(--subtitle);
   font-size: 1.375rem;
+  background-color: var(--text-background);
 }
 #hero-headshot p span {
   text-wrap: nowrap;
@@ -466,6 +471,18 @@ footer#free {
   animation: shake 2s linear alternate infinite;
 }
 
+#directory {
+  position: absolute;
+  margin: 20px;
+  padding: 0 20px;
+  text-align: left;
+  background-color: var(--text-background);
+}
+#directory ul {
+  list-style: "> ";
+  padding: 0 0 0 10px;
+}
+
 /* asset layouts */
 .ly-sect {
   margin: 20px auto;