From 7049b4b4d9d0cf80424e9b8f7693869ca38fadcc Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Sat, 27 Feb 2021 15:03:06 -0600
Subject: [PATCH] Consistent focus styles everywhere

---
 _includes/base-footer.html | 2 +-
 _includes/base-header.html | 6 ++++--
 _includes/pinned.njk       | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/_includes/base-footer.html b/_includes/base-footer.html
index 5732092..ca0a3c2 100644
--- a/_includes/base-footer.html
+++ b/_includes/base-footer.html
@@ -1,7 +1,7 @@
     <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">
+          <div class="relative group bg-white p-6 focus:outline-link">
             <h3 class="text-lg font-medium">
               <a href="{{navItem.url}}" class="focus:outline-none">
                 <!-- Extend touch target to entire panel -->
diff --git a/_includes/base-header.html b/_includes/base-header.html
index 8f57b30..817234b 100644
--- a/_includes/base-header.html
+++ b/_includes/base-header.html
@@ -55,7 +55,7 @@
         <div class="relative flex justify-between h-16">
           <div class="absolute inset-y-0 left-0 flex justify-between w-full sm:hidden">
             <button
-              class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+              class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-link"
               aria-expanded="false"
               onclick="mobileToggle()"
               id="mobileToggleButton">
@@ -69,15 +69,17 @@
             </button>
             <a
               href="/"
+              class="focus:outline-link"
               {% if page.url == navItem.url %}aria-current="page"{% endif %}
             >
-              <img class="h-12 w-12 p-2 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>
           </div>
           <div class="flex-1 flex justify-between sm:items-stretch sm:justify-start">
             <div class="hidden sm:flex sm:space-x-8">
               <a
                 href="/"
+                class="focus:outline-link"
                 {% if page.url == navItem.url %}aria-current="page"{% endif %}
               >
                 <img class="h-12 w-12 mt-2 rounded-full" src="/img/site/avatar.png" alt="Home">
diff --git a/_includes/pinned.njk b/_includes/pinned.njk
index 42282ca..78ab334 100644
--- a/_includes/pinned.njk
+++ b/_includes/pinned.njk
@@ -21,7 +21,7 @@
               </span>
             </a>
           </div>
-          <a href="{{ content.url }}" class="block mt-4">
+          <a href="{{ content.url }}" class="block mt-4 focus:outline-link">
             <h3 class="text-xl font-semibold text-gray-900 hover:underline">
               {{ content.data.title }}
             </h3>