M assets/img/vista-d.png → assets/img/vista-d.png

M index.html → index.html

@@ -33,12 +33,6 @@ li {
             padding-bottom: 1rem;
         }
 
-        hr {
-            border: 2px solid var(--f_low);
-            width: 100%;
-            animation: 1.5s ease-in-out expand-width, 1s ease-in-out fade-in;
-        }
-
         .content {
             margin: 3rem auto;
             border: 3px solid var(--b_inv);
@@ -58,6 +52,7 @@ .logo {
             display: block;
             width: 8rem;
             height: 8rem;
+            margin: 0 auto;
         }
 
         .name {
@@ -71,11 +66,34 @@ text-align: center;
             animation: 1s ease-in-out fade-in, 1s ease-in-out spacing;
         }
 
-        .grid-img {
-            width: 5rem;
-            height: 5rem;
+        h2 {
+            letter-spacing: 0.5rem;
+            font-family: monospace;
+            color: var(--b_high);
+            text-align: center;
+        }
+
+        blockquote {
+            color: var(--f_high);
+            text-align: center;
+            margin: 3rem 0.5rem 1rem;
+        }
+
+        blockquote + p {
+            color: var(--f_med);
+            text-align: center;
+        }
+
+        blockquote + p > span {
+            font-style: italic;
+        }
+
+        .round-img {
+            width: 6rem;
+            height: 6rem;
             border-radius: 50%;
-            margin: 2rem;
+            display: block;
+            margin: 0 auto;
         }
 
         .header {
@@ -90,6 +108,57 @@ object-position: center;
             image-rendering: crisp-edges;
         }
 
+        .divider > hr {
+            top: -4rem;
+            position: relative;
+            padding: 0;
+            margin: 0;
+            animation: none;
+            border: 1px solid var(--b_low);
+        }
+
+        .divider > .round-img {
+            z-index: 1;
+            position: relative;
+            border: 1rem solid var(--background);
+            image-rendering: crisp-edges;
+        }
+
+        nav {
+            margin: 3rem 0 4rem;
+        }
+
+        nav ul {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        nav li {
+            padding: 0;
+            margin-top: 1rem;
+        }
+
+        nav li > a {
+            border: 1px solid var(--f_med);
+            padding: 2rem;
+            border: 1px solid var(--b_med);
+            width: fit-content;
+            padding: 0.25rem 0.5rem;
+            margin: 0.5rem;
+            box-shadow: 4px 4px var(--b_low);
+            text-decoration: none;
+            font-family: monospace;
+            font-size: 1rem;
+        }
+
+        nav li > a:hover {
+            background: var(--b_high);
+            color: var(--background);
+            border-color: var(--background);
+            box-shadow: 4px 4px var(--b_high);
+        }
+
         @media screen and (max-width: 600px) {
             .content {
                 max-width: 17rem;
@@ -103,12 +172,22 @@ .logo {
                 width: 6rem;
                 height: 6rem;
             }
+
+            .round-img {
+                width: 4rem;
+                height: 4rem;
+            }
+
+            .divider > hr {
+                top: -3rem;
+            }
         }
 
         @keyframes fade-in {
             from {
                 opacity: 0;
             }
+
             to {
                 opacity: 1;
             }
@@ -118,17 +197,9 @@ @keyframes spacing {
             from {
                 letter-spacing: normal;
             }
-            to {
-                letter-spacing: 0.5rem;
-            }
-        }
 
-        @keyframes expand-width {
-            from {
-                width: 0%;
-            }
             to {
-                width: 100%;
+                letter-spacing: 0.5rem;
             }
         }
     </style>
@@ -139,21 +210,42 @@ <div class="header">
         <img class="header-img" src="/assets/img/sunset-d.png">
     </div>
     <div class="content">
-        <div class="ident-imgs">
-            <!-- <img class="grid-img" src="/assets/img/vista-d.png"> -->
-            <img class="logo" src="/assets/svg/logo-light.svg">
-            <!-- <img class="grid-img" src="/assets/img/goat-d.png"> -->
+        <img class="logo" src="/assets/svg/logo-light.svg">
+        <h1 class="name">deserthorns</h1>
+        <nav>
+            <ul>
+                <li>
+                    <a href="/wiki">wiki</a>
+                </li>
+                <li>
+                    <a href="/etc/do">do</a>
+                </li>
+                <!-- <li>
+                    <a href="/about">about</a>
+                </li>
+                <li>
+                    <a href="/music">music</a>
+                </li>
+                <li>
+                    <a href="/photos">photos</a>
+                </li>
+                <li>
+                    <a href="/git">git</a>
+                </li>
+                <li>
+                    <a href="/etc">etc</a> -->
+                </li>
+            </ul>
+        </nav>
+        <div class="divider">            
+            <img class="round-img" src="/assets/img/vista-d.png">
+            <hr>
         </div>
-        <h1 class="name">deserthorns</h1>
-        <hr>
-        <ul>
-            <li>
-                <a href="/wiki">wiki</a>
-            </li>
-            <li>
-                <a href="/etc/do">do</a>
-            </li>
-        </ul>
+        <blockquote>
+            <p>Your hearts know in silence the secrets of the days and the nights.</p>
+            <p>But your ears thirst for the sound of your heart’s knowledge.</p>
+        </blockquote>
+        <p>- Khalil Gibran, <span>The Prophet</span></p>        
     </div>
 </body>