Migrate to app router (#2254)

components/SkipToContent/SkipToContent.tsx

@@ -1,41 +1,12 @@
-import { styled, theme } from "../../lib/styles/stitches.config";
-
-const HiddenLink = styled("a", {
-  // accessible invisibility stuff pulled from @reach/skip-nav:
-  // https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  height: "1px",
-  width: "1px",
-  margin: "-1px",
-  padding: 0,
-  overflow: "hidden",
-  position: "absolute",
-
-  "&:focus": {
-    padding: "1rem",
-    position: "fixed",
-    top: "10px",
-    left: "10px",
-    zIndex: 99999,
-    width: "auto",
-    height: "auto",
-    clip: "auto",
-    background: theme.colors.superDuperLight,
-    color: theme.colors.link,
-    border: `2px solid ${theme.colors.kindaLight}`,
-    borderRadius: theme.radii.corner,
-    textDecoration: "underline",
-  },
-});
+import styles from "./SkipToContent.module.css";
 
 const skipNavId = "skip-nav";
 
 export const SkipToContentLink = () => {
   return (
-    <HiddenLink href={`#${skipNavId}`} tabIndex={0}>
+    <a href={`#${skipNavId}`} tabIndex={0} className={styles.hiddenLink}>
       Skip to content
-    </HiddenLink>
+    </a>
   );
 };