fix font css vars

components/Heading/Heading.module.css

@@ -3,8 +3,10 @@
   margin-bottom: 0.5em;
   line-height: 1.5;
 
-  /* offset (approximately) with sticky header so jumped-to content isn't hiding behind it.
-     note: use rem so it isn't based on the heading's font size. */
+  /*
+   * offset (approximately) with sticky header so jumped-to content isn't hiding behind it.
+   * note: use rem so it isn't based on the heading's font size.
+   */
   scroll-margin-top: 5.5rem;
 }
 

components/SkipNav/SkipNav.module.css

@@ -1,5 +1,6 @@
-/* accessible invisibility stuff pulled from @reach/skip-nav:
-https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css */
+/*
+ * Pulled from @reach/skip-nav: https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css
+ */
 
 .hidden {
   border: 0;

components/SkipNav/SkipNav.tsx

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

components/SkipNav/index.ts

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

components/SkipToContent/index.ts

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