Fancify the links a bit

_layouts/corrupt_index.html

@@ -22,7 +22,11 @@
 
     <header>
       <a href="/">
-        <div>The</div><div>Internet</div><div>Vagabond</div>
+        <div>
+          <span class="first">T</span>he
+          <span class="first">I</span>nternet
+          <span class="first">V</span>agabond
+        </div>
       </a>
     </header>
 

_layouts/corrupt_post.html

@@ -21,7 +21,11 @@
   <div class="cor_page">
       <header>
         <a href="/">
-          <div>The</div><div>Internet</div><div>Vagabond</div>
+          <div>
+            <span class="first">T</span>he
+            <span class="first">I</span>nternet
+            <span class="first">V</span>agabond
+          </div>
         </a>
       </header>
       <main>

src/styles/corrupt_layout.css

@@ -23,6 +23,11 @@ header a {
     height: 100%;
 }
 
+header .wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
 footer {
     background-color: #202020;
     border-top: 1px solid var(--hilite);

src/styles/corrupt_typog.css

@@ -9,28 +9,34 @@ ul,ol,p {
 }
 
 a,a:visited,a:link,a:focus {
-    text-decoration: none; 
+    text-decoration: none;
     color: darkgrey;
+    transition: color 0.5s;
 }
 
 a:hover {
     color: white;
+    transition: color 0.5s;
 }
 
 nav a:hover {
     color: var(--hilite);
+    transition: color 0.5s;
 }
 
 header div {
     color: darkgrey; letter-spacing: 0.8em;
 }
 
-header a:hover > div {
+header span {
     color: white;
+    letter-spacing: 0.9em;
+    transition: color 2s;
 }
 
-header div::first-letter {
-    color: white;
+header a:hover > div > span {
+    color: var(--hilite);
+    transition: color 1s;
 }
 
 footer #email {