index update

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;