fix font css vars

components/SkipNav/SkipNav.module.css

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

components/SkipNav/SkipNav.tsx

@@ -0,0 +1,17 @@
+import styles from "./SkipNav.module.css";
+
+const skipNavId = "skip-nav";
+
+export const SkipNavLink = () => {
+  return (
+    <a href={`#${skipNavId}`} tabIndex={0} className={styles.hidden}>
+      Skip to content
+    </a>
+  );
+};
+
+export const SkipNavTarget = () => {
+  return <div id={skipNavId} />;
+};
+
+export default SkipNavLink;

components/SkipNav/index.ts

@@ -0,0 +1,2 @@
+export * from "./SkipNav";
+export { default } from "./SkipNav";