add :focus-visible css selector to some hover styles

components/ContactForm/ContactForm.tsx

@@ -78,7 +78,7 @@ const SubmitButton = styled("button", {
   color: theme.colors.text,
   backgroundColor: theme.colors.kindaLight,
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.superDuperLight,
     backgroundColor: theme.colors.link,
   },

components/CopyButton/CopyButton.tsx

@@ -17,7 +17,7 @@ const Button = styled("button", {
       false: {
         color: theme.colors.mediumDark,
 
-        "&:hover": {
+        "&:hover, &:focus-visible": {
           color: theme.colors.link,
         },
       },

components/Footer/Footer.tsx

@@ -38,7 +38,7 @@ const PlainLink = styled(Link, {
 });
 
 const NextjsLink = styled(PlainLink, {
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.medium,
   },
 });
@@ -47,7 +47,7 @@ const ViewSourceLink = styled(PlainLink, {
   paddingBottom: "2px",
   borderBottom: `1px solid ${theme.colors.light}`,
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     borderColor: theme.colors.kindaLight,
   },
 });

components/Heading/Heading.tsx

@@ -9,7 +9,7 @@ const Anchor = styled(HeadingAnchor, {
   color: theme.colors.medium,
   opacity: 0, // overridden on hover below (except on small screens)
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.link,
   },
 

components/Link/Link.tsx

@@ -25,7 +25,7 @@ const StyledLink = styled(NextLink, {
           transition: `background-size ${theme.transitions.linkHover}`,
         },
 
-        "&:hover": {
+        "&:hover, &:focus-visible": {
           backgroundSize: `100% ${theme.borderWidths.underline}`,
         },
       },

components/Loading/Loading.tsx

@@ -1,15 +1,6 @@
 import { styled, theme, keyframes } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 
-const pulse = keyframes({
-  "0%, 80%, 100%": {
-    transform: "scale(0)",
-  },
-  "40%": {
-    transform: "scale(0.6)",
-  },
-});
-
 const Wrapper = styled("div", {
   display: "inline-block",
   textAlign: "center",
@@ -18,7 +9,14 @@ const Wrapper = styled("div", {
 const Box = styled("div", {
   display: "inline-block",
   height: "100%",
-  animation: `${pulse} 1.5s infinite ease-in-out both`,
+  animation: `${keyframes({
+    "0%, 80%, 100%": {
+      transform: "scale(0)",
+    },
+    "40%": {
+      transform: "scale(0.6)",
+    },
+  })} 1.5s infinite ease-in-out both`,
   backgroundColor: theme.colors.mediumLight,
 });
 

components/MenuItem/MenuItem.tsx

@@ -14,7 +14,7 @@ const MenuLink = styled(Link, {
         borderBottom: `0.2em solid ${theme.colors.linkUnderline}`,
       },
       false: {
-        "&:hover": {
+        "&:hover, &:focus-visible": {
           marginBottom: "-0.2em",
           borderBottom: `0.2em solid ${theme.colors.kindaLight}`,
         },

components/OctocatLink/OctocatLink.tsx

@@ -7,7 +7,7 @@ const GitHubLink = styled(Link, {
   margin: "0 0.4em",
   color: theme.colors.text,
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.link,
   },
 });

components/RepositoryCard/RepositoryCard.tsx

@@ -42,7 +42,7 @@ const MetaItem = styled("div", {
 const MetaLink = styled(Link, {
   color: "inherit",
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.link,
   },
 });

components/Selfie/Selfie.tsx

@@ -24,7 +24,7 @@ const SelfieLink = styled(Link, {
   alignItems: "center",
   color: theme.colors.mediumDark,
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.link,
 
     "@medium": {

components/ThemeToggle/ThemeToggle.tsx

@@ -14,7 +14,7 @@ const Button = styled("button", {
   cursor: "pointer",
   color: theme.colors.mediumDark,
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.warning,
   },
 });

pages/index.tsx

@@ -103,13 +103,6 @@ const Quiet = styled("span", {
   color: theme.colors.mediumLight,
 });
 
-const EasterEgg = styled(ColorfulLink, {
-  // rotated 🪄 emoji on hover
-  "&:hover": {
-    cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
-  },
-});
-
 const Index = () => {
   return (
     <>
@@ -225,14 +218,20 @@ const Index = () => {
           backend programming
         </ColorfulLink>{" "}
         back when my only source of income was{" "}
-        <EasterEgg
+        <ColorfulLink
           href="/birthday/"
           title="🎉 Cranky Birthday Boy on VHS Tape 📼"
           lightColor="#e40088"
           darkColor="#fd40b1"
+          css={{
+            // rotated 🪄 emoji on hover
+            "&:hover": {
+              cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
+            },
+          }}
         >
           the Tooth Fairy
-        </EasterEgg>
+        </ColorfulLink>
         . <Quiet>I've improved a bit since then, I think? 🤷</Quiet>
       </Paragraph>