From bc97aaf92e837101782049758c022f95dda14082 Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Sun, 14 Feb 2021 19:12:41 -0600
Subject: [PATCH] Other links moved to footer

---
 _data/links.json           | 14 +++++++++-----
 _includes/base-footer.html | 27 +++++++++++++++++++++++----
 _includes/base-header.html | 27 ++-------------------------
 _includes/content.njk      |  7 ++++---
 4 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/_data/links.json b/_data/links.json
index 9bf6f6c..e8aef94 100644
--- a/_data/links.json
+++ b/_data/links.json
@@ -1,18 +1,22 @@
 [
   {
     "title": "ava@wroten.me",
-    "url": "mailto:ava@wroten.me"
+    "url": "mailto:ava@wroten.me",
+    "description": "Wish to contact me about meetup or conference talks, work opportunities or otherwise? Reach out to me via email."
   },
   {
     "title": "Resume",
-    "url": "/files/resume.pdf"
+    "url": "/files/resume.pdf",
+    "description": "Work history, skills, volunteering and talks given all in a one page PDF."
   },
   {
     "title": "Life (Blog)",
-    "url": "https://gaiety.life/"
+    "url": "https://gaiety.life/",
+    "description": "Programming, art, design, and other queer things."
   },
   {
-    "title": "Life (Blog)",
-    "url": "https://gaiety.gallery/"
+    "title": "Art (Gallery)",
+    "url": "https://gaiety.gallery/",
+    "description": "A cross-section of my artistic brain in photography, digital, painting and more"
   }
 ]
diff --git a/_includes/base-footer.html b/_includes/base-footer.html
index 439c196..7d7683b 100644
--- a/_includes/base-footer.html
+++ b/_includes/base-footer.html
@@ -1,8 +1,27 @@
-    <footer class="mb-2 mt-12 max-w-7xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
-      <div class="text-gray-500">
-        Built in <a href="https://www.11ty.dev/">Eleventy</a> with <a href="https://tailwindui.com/">Tailwind UI</a>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="mt-12 rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
+        {%- for navItem in links -%}
+          <div class="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-pink-700">
+            <h3 class="text-lg font-medium">
+              <a href="{{navItem.url}}" class="focus:outline-none">
+                <!-- Extend touch target to entire panel -->
+                <span class="absolute inset-0" aria-hidden="true"></span>
+                {{navItem.title}}
+              </a>
+            </h3>
+            <p class="mt-2 text-sm text-gray-500">
+              {{navItem.description}}
+            </p>
+          </div>
+        {%- endfor -%}
       </div>
-    </footer>
+      
+      <footer class="mt-12 mb-4">
+        <div class="text-gray-500">
+          Built in <a href="https://www.11ty.dev/">Eleventy</a> with <a href="https://tailwindui.com/">Tailwind UI</a>
+        </div>
+      </footer>
+    </div>
   </body>
 </html>
 
diff --git a/_includes/base-header.html b/_includes/base-header.html
index 7e15df9..85d9a6e 100644
--- a/_includes/base-header.html
+++ b/_includes/base-header.html
@@ -57,12 +57,12 @@
             </a>
           </div>
           <div class="flex-1 flex justify-between sm:items-stretch sm:justify-start">
-            <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
+            <div class="hidden sm:flex sm:space-x-8">
               <a
                 href="/"
                 {% if page.url == navItem.url %}aria-current="page"{% endif %}
               >
-                <img class="h-12 w-12 rounded-full" src="/img/site/avatar.png" alt="Home">
+                <img class="h-12 w-12 mt-2 rounded-full" src="/img/site/avatar.png" alt="Home">
               </a>
               {%- for navItem in navigation -%}
                 <a
@@ -74,17 +74,6 @@
                 </a>
               {%- endfor -%}
             </div>
-            <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
-              {%- for navItem in links -%}
-                <a
-                  href="{{navItem.url}}"
-                  class="border-transparent hover:border-pink-700 text-gray-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium focus:outline-link"
-                  {% if page.url == navItem.url %}aria-current="page"{% endif %}
-                >
-                  {{navItem.title}}
-                </a>
-              {%- endfor -%}
-            </div>
           </div>
         </div>
       </div>
@@ -101,18 +90,6 @@
             </a>
           {%- endfor -%}
         </div>
-
-        <div class="pt-2 pb-4 space-y-1">
-          {%- for navItem in links -%}
-            <a
-              href="{{navItem.url}}"
-              class="border-transparent hover:border-pink-700 text-gray-500 block pl-3 pr-4 py-2 border-l-4 text-base font-medium focus:outline-link"
-              {% if page.url == navItem.url %}aria-current="page"{% endif %}
-            >
-              {{navItem.title}}
-            </a>
-          {%- endfor -%}
-        </div>
       </div>
     </nav>
   </header>
diff --git a/_includes/content.njk b/_includes/content.njk
index 6663f66..8041b9d 100644
--- a/_includes/content.njk
+++ b/_includes/content.njk
@@ -1,7 +1,7 @@
 {% include "base-header.html" %}
 
 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-  <div class="max-w-3x1 mx-auto mb-5">
+  <div class="max-w-3x1 mx-auto mb-4">
     <div class="-ml-2 mt-8 flex flex-wrap items-baseline">
       <h1 class="ml-8 mt-2 text-lg font-medium text-gray-900">
         {{ title }}
@@ -12,8 +12,9 @@
       <p class="ml-8 text-sm text-gray-500">{{description}}</p>
     </div>
   </div>
-  <div class="bg-white overflow-hidden shadow sm:rounded-lg">
-    <div class="px-4 py-5 sm:p-6">
+
+  <div class="bg-white overflow-hidden shadow rounded-lg">
+    <div class="p-4 sm:p-6">
       {{ content | safe }}
     </div>
   </div>