wip: update links to have same animation on keypress as mouse hover

src/components/BottomLinks.astro

@@ -13,7 +13,7 @@ const { previousLink, previousLinkText, nextLink, nextLinkText } = Astro.props;
   class="border-t-2 border-blue-light border-solid flex flex-wrap mt-24 w-full"
 >
   <a
-    class="border-r-2 border-blue-light border-solid flex-1 font-bold p-4 lg:p-12 w-1/2 hover:bg-blue-light"
+    class="border-r-2 border-blue-light border-solid flex-1 font-bold p-4 lg:p-12 w-1/2 hover:bg-blue-light focus:bg-blue-light"
     href={previousLink}
   >
     <span class="text-navy text-sm lg:text-xl"> Previous</span>
@@ -24,7 +24,7 @@ const { previousLink, previousLinkText, nextLink, nextLinkText } = Astro.props;
   </a>
 
   <a
-    class="flex-1 font-bold p-4 lg:p-12 w-1/2 hover:bg-blue-light"
+    class="flex-1 font-bold p-4 lg:p-12 w-1/2 hover:bg-blue-light focus:bg-blue-light"
     href={nextLink}
   >
     <span class="text-navy text-sm lg:text-xl">Next Up</span>

src/components/RecentBlogPosts.astro

@@ -76,7 +76,8 @@ const { posts } = Astro.props;
       @apply text-navy;
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       @apply text-red;
     }
   }

src/components/Tabs.scss

@@ -12,7 +12,7 @@
     letter-spacing: 1px;
     padding: 10px 20px 10px 10px;
 
-    &:hover {
+    &:hover, &:focus {
       @apply cursor-pointer text-navy;
       box-shadow: inset 0 -2px var(--navy);
     }

src/components/WaveFooter.astro

@@ -116,33 +116,27 @@ const year = new Date().getFullYear();
         class="flex flex-wrap items-center justify-center w-full lg:justify-start"
       >
         <div class="flex justify-center w-full lg:justify-start">
-          <div class="social-links flex items-center pl-2 pr-2 justify-start">
+          <div class="flex items-center pl-2 pr-2 justify-start">
             <a
               aria-label="GitHub"
-              class="p-2"
+              class="p-2 github-logo"
               href="https://github.com/shipshapecode"
             >
-              <div class="github-logo">
-                <Icon name="github" />
-              </div>
+              <Icon name="github" />
             </a>
             <a
               aria-label="Twitter"
-              class="p-2"
+              class="p-2 twitter-logo"
               href="https://twitter.com/shipshapecode"
             >
-              <div class="twitter-logo">
-                <Icon name="twitter" />
-              </div>
+              <Icon name="twitter" />
             </a>
             <a
               aria-label="LinkedIn"
-              class="p-2"
+              class="p-2 linkedin-logo"
               href="https://www.linkedin.com/company/ship-shape/"
             >
-              <div class="linkedin-logo">
-                <Icon name="linkedin" />
-              </div>
+              <Icon name="linkedin" />
             </a>
           </div>
         </div>
@@ -158,60 +152,65 @@ const year = new Date().getFullYear();
 <style lang="scss" is:global>
   .wave {
     @apply bg-navy pt-24;
+  }
+  .footer-logo {
+    path {
+      fill: var(--white);
+      stroke: var(--white);
+      stroke-width: 1.25rem;
+    }
+  }
 
-    .footer-logo {
-      path {
-        fill: var(--white);
-        stroke: var(--white);
-        stroke-width: 1.25rem;
+  .footer-bottom {
+    a {
+      @apply font-bold text-white;
+
+      &:hover,
+      &:focus {
+        @apply text-red-light;
       }
     }
 
-    .footer-bottom {
-      a {
-        @apply font-bold text-white;
-
-        &:hover {
-          @apply text-red-light;
+    .github-logo,
+    .linkedin-logo,
+    .twitter-logo {
+      svg {
+        path {
+          @apply transition-colors;
+          fill: var(--white);
+          transition-duration: 0.25s;
+          transition-property: fill;
         }
       }
-
-      .social-links {
+      &:hover,
+      &:focus {
         svg {
           path {
-            fill: var(--white);
-            transition-duration: 0.25s;
-            transition-property: fill;
-          }
-
-          &:hover {
-            path {
-              fill: var(--red-light);
-            }
+            fill: var(--red-light);
           }
         }
       }
     }
+  }
 
-    .github-logo {
-      svg {
-        height: 22px;
-        width: 23px;
-      }
+  .github-logo {
+    svg {
+      height: 22px;
+      width: 23px;
     }
+  }
 
-    .linkedin-logo {
-      svg {
-        height: 20px;
-        width: 19px;
-      }
+  .linkedin-logo {
+    svg {
+      height: 20px;
+      width: 19px;
     }
+  }
 
-    .twitter-logo {
-      svg {
-        height: 19px;
-        width: 23px;
-      }
+  .twitter-logo {
+    svg {
+      height: 19px;
+      width: 23px;
     }
   }
 </style>

src/pages/about.astro

@@ -454,7 +454,8 @@ const description =
       }
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       svg {
         path {
           fill: var(--red-light);

src/styles/_base.scss

@@ -14,7 +14,8 @@ a {
     @apply text-red;
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     @apply text-navy;
   }
 }
@@ -67,7 +68,8 @@ h6 {
     @apply text-navy;
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     @apply cursor-pointer text-red;
 
     svg {

src/styles/tailwind/components/blog-tag.css

@@ -7,6 +7,6 @@
   @apply text-grey-light;
 }
 
-.blog-tag:hover {
+.blog-tag:hover, .blog-tag:focus {
   @apply bg-navy text-white;
 }

src/styles/tailwind/components/buttons.css

@@ -24,7 +24,7 @@
   @apply !text-white;
 }
 
-.btn-white:hover {
+.btn-white:hover, .btn-white:focus {
   @apply !bg-blue-light !text-navy;
 }
 

src/styles/tailwind/components/nav-menu.css

@@ -24,7 +24,7 @@
   @apply text-navy;
 }
 
-.nav-link:hover {
+.nav-link:hover, .nav-link:focus {
   @apply text-red-light;
 }
 
@@ -51,7 +51,7 @@
     @apply text-white;
   }
 
-  .nav-link-alt:hover {
+  .nav-link-alt:hover, .nav-link-alt:focus {
     @apply text-red-light;
   }
 }