Migrate to app router (#2254)

components/SkipToContent/SkipToContent.module.css

@@ -0,0 +1,29 @@
+/* accessible invisibility stuff pulled from @reach/skip-nav:
+https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css */
+
+.hiddenLink {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  position: absolute;
+}
+
+.hiddenLink:focus {
+  padding: 1rem;
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  z-index: 99999;
+  width: auto;
+  height: auto;
+  clip: auto;
+  background: var(--colors-superDuperLight);
+  color: var(--colors-link);
+  border: 2px solid var(--colors-kindaLight);
+  border-radius: var(--radii-corner);
+  text-decoration: underline;
+}

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>
   );
 };