refactor

index.html

@@ -155,11 +155,9 @@
           <a href="sound-design.html">
             My <span>Body / Music</span> is stored here
           </a>
-          <br />
           <a href="blog/index.html">
             I <span>Write / Die</span> within these walls
           </a>
-          <br />
           <a href="blog/2024-09-28-about-me.html"
             ><span>Study / Bury</span> me here
           </a>

res/asset-sitewide-nav-home.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="800" height="800" fill="#ffffff" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
- <g transform="translate(0,18.138)">
-  <path d="m434.16 275.24v200.48h-125.84v-125.28h-104.64v125.28h-125.84v-200.48l178.16-139.52z"/>
-  <path d="m0 224.54 256-203.75 256 203.75-29.79 43.082-226.21-180.04-226.21 180.04z"/>
-  <path d="m439.85 0v130.4l-63.28-50.4v-80z"/>
- </g>
-</svg>

style.css

@@ -26,12 +26,10 @@
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-
 *::-moz-selection {
   background-color: var(--accent-0);
   color: var(--max-0);
 }
-
 *::selection {
   background-color: var(--accent-0);
   color: var(--max-0);
@@ -42,13 +40,11 @@
   src: url("./res/asset-font-Redaction-Regular.woff2") format("woff2");
   font-display: swap;
 }
-
 @font-face {
   font-family: "mono";
   src: url("./res/asset-font-Inconsolata.woff2") format("woff2");
   font-display: swap;
 }
-
 @font-face {
   font-family: "syne";
   src: url("./res/asset-font-SyneMono-Regular.woff2") format("woff2");
@@ -57,19 +53,18 @@
 
 body {
   margin: 0;
+  margin-bottom: 45px;
   padding: 0;
   background-color: var(--background);
   color: var(--accent-0);
 
   font-family: "Redaction", serif;
-  margin-bottom: 45px;
 }
 
 a {
-  text-decoration: none;
   color: var(--accent-1);
+  text-decoration: none;
 }
-
 a:hover {
   color: var(--max-1);
 }
@@ -78,7 +73,6 @@ a:hover {
   -webkit-animation: load 2s ease-in-out infinite alternate;
   animation: load 2s ease-in-out infinite alternate;
 }
-
 @keyframes load {
   0% {
     background-color: var(--load-0);
@@ -98,8 +92,8 @@ a:hover {
   text-align: center;
 }
 #content-warnings h1 {
-  font-size: 2rem;
   margin: 10px 0;
+  font-size: 2rem;
 }
 #content-warnings ul {
   display: -webkit-box;
@@ -109,23 +103,24 @@ a:hover {
   flex-wrap: wrap;
   max-width: 1200px;
   margin: 16px auto;
-
-  list-style-type: none;
   padding: 0;
+
   -webkit-box-pack: space-evenly;
   -ms-flex-pack: space-evenly;
   justify-content: space-evenly;
+
+  list-style-type: none;
 }
 #content-warnings ul li {
-  padding: 5px 10px;
   min-width: 30%;
+  padding: 5px 10px;
   font-size: 1.2rem;
 }
 .back {
-  font-size: 1.2rem;
-  text-align: right;
   width: min(700px, 90%);
   margin: auto;
+  font-size: 1.2rem;
+  text-align: right;
 }
 
 /* Header */
@@ -139,7 +134,6 @@ header {
   height: 90px;
 
   -o-object-fit: cover;
-
   object-fit: cover;
 }
 #header-img-group-logo img {
@@ -152,6 +146,7 @@ header {
 
   height: 160px;
   width: 180px;
+
   -o-object-fit: contain;
   object-fit: contain;
 
@@ -161,63 +156,61 @@ header {
 /* NavList */
 header nav {
   position: absolute;
-  bottom: -5px;
   width: 100%;
+  bottom: -5px;
 }
-
 header nav ul {
-  margin: 0;
-  padding: 0;
-
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: space-evenly;
   -ms-flex-pack: space-evenly;
   justify-content: space-evenly;
 
+  margin: 0;
+  padding: 0;
+
   font-size: 22px;
 }
-
 header nav ul li {
   position: relative;
-  list-style: none;
   padding: 2px 0;
 
-  width: calc(100% / 5);
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+
   text-align: center;
+  list-style: none;
 }
-
 header nav #whitespace {
-  width: calc(100% / 5);
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
-
 header nav li#here a {
   cursor: not-allowed;
   background-color: var(--accent-2);
   color: var(--background);
   text-decoration: line-through;
 }
-
 header nav li#parent a {
   background-color: var(--accent-2);
   color: var(--background);
 }
-
 header nav li#parent a::after {
   content: "*";
 }
-
 header nav li#parent a:hover {
   background-color: var(--max-1) !important;
 }
-
 header nav li a {
   padding: 2px 10px;
   color: var(--accent-2);
   background-color: var(--max-0);
 }
-
 header nav li:not(#here) a:hover {
   color: var(--background);
   background-color: var(--accent-2);
@@ -226,7 +219,6 @@ header nav li:not(#here) a:hover {
 #arrow img {
   position: absolute;
   margin: 35px 0 0 -100px;
-
   width: 250px;
 }
 
@@ -244,11 +236,9 @@ header nav li:not(#here) a:hover {
   justify-content: space-evenly;
   margin: 25px 0;
 }
-
 #socials img {
   width: 40px;
 }
-
 #socials a {
   -webkit-transition: ease-in-out 100ms;
   -o-transition: ease-in-out 100ms;
@@ -262,12 +252,10 @@ header nav li:not(#here) a:hover {
 .no {
   cursor: not-allowed;
 }
-
 .no img {
   -webkit-filter: brightness(20%);
   filter: brightness(20%);
 }
-
 .no:hover img {
   -webkit-filter: brightness(20%) !important;
   filter: brightness(20%) !important;
@@ -277,16 +265,14 @@ header nav li:not(#here) a:hover {
 
 @media only screen and (max-width: 790px) {
   header {
-    margin: 32px 0 80px 0;
+    margin: 18px 0 80px 0;
   }
-
   header nav {
     position: absolute;
     bottom: -50px;
   }
-
+  header nav ul li a img {
-  header {
+    display: block;
-    margin: 18px 0 80px 0;
   }
   #header-img-group-banner img {
     height: 50px;
@@ -297,10 +283,10 @@ header nav li:not(#here) a:hover {
   }
 
   #whitespace,
-  #arrow {
+  #arrow,
+  #here {
     display: none;
   }
-
   li#music:not(#here) a {
     -webkit-animation: nav-flash 1s ease-in-out infinite alternate;
     animation: nav-flash 1s ease-in-out infinite alternate;
@@ -337,7 +323,6 @@ header nav li:not(#here) a:hover {
     background-color: var(--load-1);
   }
 }
-
 @keyframes load {
   from {
     background-color: var(--load-0);
@@ -353,14 +338,14 @@ footer#free {
   position: fixed;
   display: inline;
   max-width: min(90%, 180px);
+  margin: auto;
+  padding: 5px;
   bottom: 5px;
   left: 0;
   right: 0;
   text-align: center;
   background-color: var(--text-background);
   border-radius: 20px;
-  margin: auto;
-  padding: 5px;
 
   z-index: 100;
 }
@@ -383,84 +368,75 @@ footer#free {
   text-align: center;
   font-family: "Syne", monospace;
 }
-
 #hero-headshot img {
   width: 100%;
   height: auto;
   aspect-ratio: 1/1;
   max-height: 700px;
-  min-width: 360px;
+  min-height: 360px;
 
-  -o-object-fit: contain;
+  -o-object-fit: cover;
-
+  object-fit: cover;
-  object-fit: contain;
 }
-
 #hero-headshot p {
   margin: 0;
   color: var(--subtitle);
   font-size: 22px;
 }
-
 #hero-headshot p span {
   text-wrap: nowrap;
 }
-
 #hero-headshot aside.quote {
+  max-width: 700px;
   font-family: "mono", monospace;
   text-transform: none;
-  max-width: 700px;
 }
 
 #hero-info {
   width: min(100%, 700px);
   margin: auto 0;
 }
-
 #hero-info p {
-  font-size: 22px;
   margin: 30px 0;
-  line-height: 37px;
+  font-size: 22px;
 }
-
 #hero-info h1 {
   color: var(--max-1);
   font-size: 35px;
 }
-
 #hero-info b {
   color: var(--accent-2);
 }
-
 #hero-info p a {
+  display: block;
+  width: min(95%, 500px);
+  margin: 20px auto;
   padding: 0 5px;
+
   -webkit-transition: 150ms ease-in-out;
   -o-transition: 150ms ease-in-out;
   transition: 150ms ease-in-out;
 }
-
 #hero-info p a:hover {
   background-color: var(--accent-0);
   color: var(--background);
 }
-
 #hero-info span {
+  padding: 0 10px;
+
   background-color: var(--accent-0);
   color: var(--background);
-
-  padding: 0 10px;
   font-weight: bolder;
   text-wrap: nowrap;
 }
 #hero-info span:hover {
-  cursor: not-allowed;
   background-color: var(--max-0);
+
   -webkit-transition: ease-in-out 100ms;
   -o-transition: ease-in-out 100ms;
   transition: ease-in-out 100ms;
 
   -webkit-animation: shake 2s linear alternate infinite;
-
   animation: shake 2s linear alternate infinite;
 }
 
@@ -468,20 +444,21 @@ footer#free {
 .ly-sect {
   margin: 40px 0;
 }
-
 .ly-sect > h1 {
-  text-wrap: nowrap;
   position: relative;
-  padding: 3px 8px;
   margin: 0 20%;
+  padding: 3px 8px;
 
   font-size: 32px;
+  text-wrap: nowrap;
 }
-
 .ly-cont {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  width: min(95%, 2000px);
+  margin: 10px auto;
+
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
@@ -491,11 +468,10 @@ footer#free {
   -webkit-box-pack: space-evenly;
   -ms-flex-pack: space-evenly;
   justify-content: space-evenly;
-  margin: 10px auto;
-  width: min(95%, 2000px);
 }
 
 .ly-item {
+  position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -503,11 +479,9 @@ footer#free {
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
 
   margin: 10px;
 }
-
 .ly-item a h1 {
   color: var(--accent-2);
 }
@@ -515,69 +489,61 @@ footer#free {
   background-color: var(--text-background);
   color: var(--max-1);
 }
-
 .ly-item h1 {
   padding: 2px;
   background-color: var(--title-background);
 
   -webkit-transition: ease-in-out 100ms;
-
   -o-transition: ease-in-out 100ms;
-
   transition: ease-in-out 100ms;
 }
-
 .ly-sect.ly-square {
   margin: 40px 0;
 }
-
 .ly-sect.ly-square > h1 {
   display: inline-block;
   margin: 20px 20% 0 20%;
-  text-align: center;
   background-color: var(--max-0);
   color: var(--max-1);
+
+  text-align: center;
 }
 .ly-sect.ly-square > h1:hover {
   background-color: var(--accent-2);
   color: var(--background);
 }
-
 .ly-sect.ly-square .h1-circle img {
   position: absolute;
+  margin: auto;
+  width: 200px;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  margin: auto;
-  width: 200px;
 }
 
 .ly-item {
   margin-bottom: 30px;
 }
-
 .ly-item audio {
   width: 100%;
 }
-
 .ly-item.ly-square {
   width: min(95%, 350px);
 }
-
 .ly-item.ly-square h1 {
   position: absolute;
+  margin: auto;
   top: 0;
   left: 0;
   right: 0;
-  margin: auto;
 
   text-align: center;
   text-shadow: var(--background) 1px 1px 0;
 }
-
 .ly-item.ly-square img {
   width: 100%;
+
   aspect-ratio: 1/1;
   -o-object-fit: cover;
   object-fit: cover;
@@ -587,69 +553,66 @@ footer#free {
   width: 80%;
   max-height: 160px;
 }
-
 .ly-item.ly-rect.ly-archive h1 {
   position: absolute;
   display: inline;
+  margin: auto;
+  padding: 2px 8px;
   bottom: 20px;
   left: 25px;
-  margin: auto;
   font-size: 22px;
-
-  padding: 2px 8px;
   background-color: var(--text-background);
 
   -webkit-transition: ease-in-out 100ms;
-
   -o-transition: ease-in-out 100ms;
-
   transition: ease-in-out 100ms;
+
   z-index: 2;
 }
 .ly-item.ly-rect.ly-archive h2 {
   position: absolute;
   display: inline;
+  margin: auto;
+  padding: 5px 8px;
   top: 15px;
   right: 15px;
-  margin: auto;
-  font-size: 15px;
 
-  padding: 5px 8px;
+  font-size: 15px;
   background-color: var(--text-background);
   color: var(--max-1);
 
   -webkit-transition: ease-in-out 100ms;
-
   -o-transition: ease-in-out 100ms;
-
   transition: ease-in-out 100ms;
+
   z-index: 2;
 }
 .ly-item.ly-rect.ly-dir h1 {
+  margin-top: 2px;
+  margin-bottom: 12px;
   background-color: transparent;
   text-shadow: 1px 1px 0 black;
   font-size: 26px;
-  margin-top: 2px;
+
-  margin-bottom: 12px;
   -webkit-transition: ease-in-out 100ms;
-
   -o-transition: ease-in-out 100ms;
-
   transition: ease-in-out 100ms;
+
   z-index: 2;
 }
 .ly-item.ly-rect.ly-dir h2 {
-  background-color: transparent;
-  text-shadow: 1px 1px 0 black;
-  font-size: 21px;
   margin-top: 2px;
   margin-bottom: 12px;
   margin-left: 35px;
+
+  background-color: transparent;
+  text-shadow: 1px 1px 0 black;
+  font-size: 21px;
+
   -webkit-transition: ease-in-out 100ms;
-
   -o-transition: ease-in-out 100ms;
-
   transition: ease-in-out 100ms;
+
   z-index: 2;
 }
 .ly-item.ly-rect a:hover h1,
@@ -661,19 +624,17 @@ footer#free {
   -webkit-filter: drop-shadow(var(--max-0) 5px 5px 5px);
   filter: drop-shadow(var(--max-0) 5px 5px 5px);
 }
-
 .ly-item.ly-rect img {
   width: 100%;
   max-height: 160px;
   min-height: 160px;
+
   aspect-ratio: 5/1;
   -o-object-fit: cover;
   object-fit: cover;
 
   -webkit-transition: ease-in-out 200ms;
-
   -o-transition: ease-in-out 200ms;
-
   transition: ease-in-out 200ms;
 }
 
@@ -686,8 +647,8 @@ footer#free {
   font-family: "mono";
 }
 .list li {
-  font-size: 22px;
   padding: 2px 0;
+  font-size: 22px;
 }
 .list ul,
 .list ol {
@@ -712,12 +673,13 @@ footer#free {
   flex-direction: row-reverse;
 }
 .list-entity picture img {
+  width: 100%;
+  height: 100%;
+
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center;
   object-position: center;
-  width: 100%;
-  height: 100%;
 }
 .list-entity picture {
   width: min(250px, 100%);
@@ -733,32 +695,6 @@ footer#free {
   margin: 5px 15px;
 }
 
-/* 404 page */
-.fzf {
-  text-align: center;
-}
-
-.fzf h1 {
-  color: var(--max-1);
-  font-family: "mono", monospace;
-  font-style: normal;
-}
-
-.fzf h2 {
-  color: var(--max-1);
-  font-family: "Syne", monospace;
-  text-align: justify;
-  -moz-text-align-last: justify;
-  text-align-last: justify;
-  text-wrap: nowrap;
-  overflow-x: hidden;
-  padding: 0 10%;
-  margin: auto;
-  background-color: var(--accent-1);
-  color: var(--background);
-  text-decoration: line-through;
-}
-
 /* animations */
 @-webkit-keyframes shake {
   0% {
@@ -840,10 +776,12 @@ footer#free {
 
 /* Accessibility */
 .skip-to-content {
-  background-color: var(--max-0);
+  position: absolute;
   padding: 8px;
   margin: 0;
-  position: absolute;
+
+  left: 40px;
+
   -webkit-transform: translateY(-70px);
   -ms-transform: translateY(-70px);
   transform: translateY(-70px);
@@ -852,10 +790,11 @@ footer#free {
   -o-transition: transform 0.2s;
   transition: transform 0.2s;
   transition: transform 0.2s, -webkit-transform 0.2s;
-  left: 40px;
+
+  background-color: var(--max-0);
+
   z-index: 1;
 }
-
 .skip-to-content:focus {
   -webkit-transform: translateY(0%);
   -ms-transform: translateY(0%);