From 1f373541be3c0b374c2048aaf3d9b3008fa13ae3 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Wed, 27 Jul 2022 18:05:50 -0400 Subject: [PATCH] add `:focus-visible` css selector to some hover styles --- components/ContactForm/ContactForm.tsx | 2 +- components/CopyButton/CopyButton.tsx | 2 +- components/Footer/Footer.tsx | 4 ++-- components/Heading/Heading.tsx | 2 +- components/Link/Link.tsx | 2 +- components/Loading/Loading.tsx | 18 ++++++++---------- components/MenuItem/MenuItem.tsx | 2 +- components/OctocatLink/OctocatLink.tsx | 2 +- components/RepositoryCard/RepositoryCard.tsx | 2 +- components/Selfie/Selfie.tsx | 2 +- components/ThemeToggle/ThemeToggle.tsx | 2 +- pages/index.tsx | 17 ++++++++--------- 12 files changed, 27 insertions(+), 30 deletions(-) diff --git a/components/ContactForm/ContactForm.tsx b/components/ContactForm/ContactForm.tsx index 9a13aa6b..196a38f2 100644 --- a/components/ContactForm/ContactForm.tsx +++ b/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, }, diff --git a/components/CopyButton/CopyButton.tsx b/components/CopyButton/CopyButton.tsx index 857319c0..a507b4af 100644 --- a/components/CopyButton/CopyButton.tsx +++ b/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, }, }, diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx index 1aed5532..038a8141 100644 --- a/components/Footer/Footer.tsx +++ b/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, }, }); diff --git a/components/Heading/Heading.tsx b/components/Heading/Heading.tsx index eb778de2..290901c3 100644 --- a/components/Heading/Heading.tsx +++ b/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, }, diff --git a/components/Link/Link.tsx b/components/Link/Link.tsx index 9c65bab5..fea64f58 100644 --- a/components/Link/Link.tsx +++ b/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}`, }, }, diff --git a/components/Loading/Loading.tsx b/components/Loading/Loading.tsx index e158e299..a6ab6cfd 100644 --- a/components/Loading/Loading.tsx +++ b/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, }); diff --git a/components/MenuItem/MenuItem.tsx b/components/MenuItem/MenuItem.tsx index d470f906..950d5892 100644 --- a/components/MenuItem/MenuItem.tsx +++ b/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}`, }, diff --git a/components/OctocatLink/OctocatLink.tsx b/components/OctocatLink/OctocatLink.tsx index a19e60e0..e216e6e7 100644 --- a/components/OctocatLink/OctocatLink.tsx +++ b/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, }, }); diff --git a/components/RepositoryCard/RepositoryCard.tsx b/components/RepositoryCard/RepositoryCard.tsx index c44c636b..791f0272 100644 --- a/components/RepositoryCard/RepositoryCard.tsx +++ b/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, }, }); diff --git a/components/Selfie/Selfie.tsx b/components/Selfie/Selfie.tsx index 2624b902..a5e09873 100644 --- a/components/Selfie/Selfie.tsx +++ b/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": { diff --git a/components/ThemeToggle/ThemeToggle.tsx b/components/ThemeToggle/ThemeToggle.tsx index e38b093f..70bef976 100644 --- a/components/ThemeToggle/ThemeToggle.tsx +++ b/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, }, }); diff --git a/pages/index.tsx b/pages/index.tsx index 4e7fd2ca..a961f607 100644 --- a/pages/index.tsx +++ b/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,🪄") 5 5, auto`, - }, -}); - const Index = () => { return ( <> @@ -225,14 +218,20 @@ const Index = () => { backend programming {" "} back when my only source of income was{" "} - 🪄") 5 5, auto`, + }, + }} > the Tooth Fairy - + . I've improved a bit since then, I think? 🤷