menus

src/_includes/about-menu.liquid

@@ -0,0 +1,5 @@
+<h2>About</h2>
+
+<a href="/about/epiphany">Epiphany</a>
+
+<a href="/about/me/">Marley</a>

src/_includes/adoptions-menu.liquid

@@ -0,0 +1,11 @@
+<a href="/adopt/">Rules & Apply</a>
+
+<h2>Litterz</h2>
+
+<a href="/litterz/dogz/">Dogz</a>
+<a href="/litterz/catz/">Catz</a>
+
+<h2>Singlez</h2>
+
+<a href="/singlez/dogz/">Dogz</a>
+<a href="/singlez/catz/">Catz</a>

src/_includes/exit-menu.liquid

@@ -0,0 +1,6 @@
+<a href="/links/me/">Link to Epiphany</a>
+
+<h2>Links</h2>
+
+<a href="/links/active/">Active</a>
+<a href="/links/inactive/">Inactive</a>

src/_includes/layout.liquid

@@ -17,9 +17,10 @@
     <h1>Epiphany</h1>
 
     <nav class="main-nav">
-      <a href="/">index</a>
-      <a href="#" x-on:click="menu = 'adoptions'">adoptions</a>
-      <a href="#" x-on:click="menu = 'about'">about</a>
+      <a href="/">Index</a>
+      <a href="#" x-on:click="menu = 'adoptions'">Adoptions</a>
+      <a href="#" x-on:click="menu = 'about'">About</a>
+      <a href="#" x-on:click="menu = 'exit'">Exit</a>
     </nav>
   </header>
 
@@ -27,16 +28,20 @@
     {{ content }}
   </main>
 
-  <nav class="secondary-nav" id="index" x-show="menu === 'index'">
+  <nav class="secondary-nav flow" id="index" x-show="menu === 'index'">
     <img src="/img/petz/siren-2.png" alt="Siren">
   </nav>
 
-  <nav class="secondary-nav" id="adoptions" x-show="menu === 'adoptions'">
-    adoptions menu
+  <nav class="secondary-nav flow" id="adoptions" x-show="menu === 'adoptions'">
+    {% include 'adoptions-menu' %}
   </nav>
 
-  <nav class="secondary-nav" id="about" x-show="menu === 'about'">
-    about menu
+  <nav class="secondary-nav flow" id="about" x-show="menu === 'about'">
+    {% include 'about-menu' %}
+  </nav>
+
+  <nav class="secondary-nav flow" id="links" x-show="menu === 'exit'">
+    {% include 'exit-menu' %}
   </nav>
 </div>
 </body>

src/index.liquid

@@ -23,12 +23,12 @@ layout: layout.liquid
 
 <h3>15 Mar 2022</h3>
 
-<p>Epiphany has moved! I got my own domain a week or two ago and have
-  finally finished setting it up and moving Epiphany over. I also updated
-  the layout, so it doesn't use frames anymore, keeps things a bit cleaner.
-  I even learned a little jquery to do so *shudder*.</p>
+<p>Epiphany has moved! I got my own domain a week or two ago and have finally
+  finished setting it up and moving Epiphany over. I also updated the layout, so
+  it doesn't use frames anymore, keeps things a bit cleaner. I even learned a
+  little jquery to do so *shudder*.</p>
 
-<p><a href="https://punkfairie.net/" target="_blank">punkfairie.net</a> now
-  has my own personal site on it as well! It's been a looonggg time since
-  I've had a personal site, I'm super excited to have a little space again,
-  for whatever I feel like posting :)</p>
+<p><a href="https://punkfairie.net/" target="_blank">punkfairie.net</a> now has
+  my own personal site on it as well! It's been a looonggg time since I've had a
+  personal site, I'm super excited to have a little space again, for whatever I
+  feel like posting :)</p>

src/style/layout.css

@@ -52,8 +52,19 @@
     }
 
     .secondary-nav {
+        --flow-space: 0.75em;
+
         grid-area: s-nav;
         padding: var(--space-s);
+        text-align: center;
+    }
+
+    .secondary-nav a {
+        display: block;
+    }
+
+    .main-nav a, .secondary-nav a {
+        text-transform: lowercase;
     }
 
     .divide {