add color change on keypress for svg links; fix styles formatting

Author: hannakim91

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,
-        &:focus {
-          @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;
-          }
-          // this one doesn't seem to work on focus/keypress
-          &:hover,
           path {
             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>