CSS modules ➡️ Stitches 🧵 (#799)

components/Footer/Footer.module.css

@@ -1,88 +0,0 @@
-.footer {
-  width: 100%;
-  padding: 1.25em 1.5em;
-  border-top: 1px solid var(--kinda-light);
-  background-color: var(--background-outer);
-  color: var(--medium-dark);
-
-  /* light-dark theme switch fading */
-  transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
-}
-
-.link {
-  color: inherit;
-  text-decoration: none;
-}
-
-.row {
-  display: flex;
-  width: 100%;
-  max-width: 865px;
-  margin: 0 auto;
-  justify-content: space-between;
-  font-size: 0.85em;
-  line-height: 2.3;
-}
-
-.icon {
-  width: 1.25em;
-  height: 1.25em;
-  vertical-align: -0.25em;
-  margin: 0 0.075em;
-}
-
-.nextjs:hover {
-  color: var(--medium);
-}
-
-.view_source {
-  padding-bottom: 2px;
-  border-bottom: 1px solid;
-  border-color: var(--light);
-}
-
-.view_source:hover {
-  border-color: var(--kinda-light);
-}
-
-.heart {
-  display: inline-block;
-  animation: beat 10s infinite; /* 6 bpm, call 911 if you see this please. */
-  animation-delay: 7.5s; /* offset from wave animation */
-  will-change: transform;
-}
-
-@media screen and (max-width: 768px) {
-  .footer {
-    padding: 1em 1.25em;
-  }
-
-  /* stack columns on left instead of flexboxing across */
-  .row {
-    font-size: 0.8em;
-    display: block;
-  }
-}
-
-@keyframes beat {
-  0% {
-    transform: scale(1);
-  }
-  2% {
-    transform: scale(1.25);
-  }
-  4% {
-    transform: scale(1);
-  }
-  6% {
-    transform: scale(1.2);
-  }
-  8% {
-    transform: scale(1);
-  }
-
-  /* pause for ~9 out of 10 seconds */
-  100% {
-    transform: scale(1);
-  }
-}

components/Footer/Footer.tsx

@@ -1,60 +1,128 @@
 import { memo } from "react";
-import Link from "next/link";
-import classNames from "classnames";
+import NextLink from "next/link";
 import { HeartIcon, NextjsLogo } from "../Icons";
+import { keyframes, styled } from "../../lib/styles/stitches.config";
 import * as config from "../../lib/config";
+import type { ComponentProps } from "react";
 
-import styles from "./Footer.module.css";
+const Wrapper = styled("footer", {
+  width: "100%",
+  padding: "1.25em 1.5em",
+  borderTop: "1px solid $kindaLight",
+  backgroundColor: "$backgroundOuter",
+  color: "$mediumDark",
+  transition: "color 0.25s ease, background 0.25s ease, border 0.25s ease",
 
-export type FooterProps = JSX.IntrinsicElements["footer"];
+  "@mobile": {
+    padding: "1em 1.25em",
+  },
+});
 
-const Footer = ({ className, ...rest }: FooterProps) => (
-  <footer className={classNames(styles.footer, className)} {...rest}>
-    <div className={styles.row}>
-      <div className={styles.license}>
+const Row = styled("div", {
+  display: "flex",
+  width: "100%",
+  maxWidth: "865px",
+  margin: "0 auto",
+  justifyContent: "space-between",
+  fontSize: "0.85em",
+  lineHeight: 2.3,
+
+  // stack columns on left instead of flexboxing across
+  "@mobile": {
+    fontSize: "0.8em",
+    display: "block",
+  },
+});
+
+const Link = styled("a", {
+  color: "$mediumDark",
+  textDecoration: "none",
+});
+
+const NextjsLink = styled(Link, {
+  "&:hover": {
+    color: "$medium",
+  },
+});
+
+const ViewSourceLink = styled(Link, {
+  paddingBottom: "2px",
+  borderBottom: "1px solid",
+  borderColor: "$light",
+
+  "&:hover": {
+    borderColor: "$kindaLight",
+  },
+});
+
+const beat = keyframes({
+  "0%": { transform: "scale(1)" },
+  "2%": { transform: "scale(1.25)" },
+  "4%": { transform: "scale(1)" },
+  "6%": { transform: "scale(1.2)" },
+  "8%": { transform: "scale(1)" },
+  // pause for ~9 out of 10 seconds
+  "100%": { transform: "scale(1)" },
+});
+
+const Heart = styled("span", {
+  display: "inline-block",
+  animation: `${beat} 10s infinite`,
+  animationDelay: "7.5s",
+  willChange: "transform",
+});
+
+const Icon = styled("svg", {
+  width: "1.25em",
+  height: "1.25em",
+  verticalAlign: "-0.25em",
+  margin: "0 0.075em",
+});
+
+export type FooterProps = ComponentProps<typeof Wrapper>;
+
+const Footer = ({ ...rest }: FooterProps) => (
+  <Wrapper {...rest}>
+    <Row>
+      <div>
         Content{" "}
-        <Link href="/license/" prefetch={false}>
-          <a className={styles.link} title="Creative Commons Attribution 4.0 International">
-            licensed under CC-BY-4.0
-          </a>
-        </Link>
+        <NextLink href="/license/" prefetch={false} passHref={true}>
+          <Link title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</Link>
+        </NextLink>
         ,{" "}
-        <Link href="/previously/" prefetch={false}>
-          <a className={styles.link} title="Previously on...">
-            2001
-          </a>
-        </Link>{" "}
+        <NextLink href="/previously/" prefetch={false} passHref={true}>
+          <Link title="Previously on...">2001</Link>
+        </NextLink>{" "}
         – {new Date().getFullYear()}.
       </div>
-      <div className={styles.powered_by}>
+
+      <div>
         Made with{" "}
-        <span className={styles.heart} title="Love">
-          <HeartIcon className={styles.icon} />
-        </span>{" "}
+        <Heart title="Love">
+          <Icon as={HeartIcon} />
+        </Heart>{" "}
         and{" "}
-        <a
-          className={classNames(styles.link, styles.nextjs)}
+        <NextjsLink
           href="https://nextjs.org/"
           title="Powered by Next.js"
           aria-label="Next.js"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <NextjsLogo className={styles.icon} fill="currentColor" />
-        </a>
+          <Icon as={NextjsLogo} fill="currentColor" />
+        </NextjsLink>
         .{" "}
-        <a
-          className={classNames(styles.link, styles.view_source)}
+        <ViewSourceLink
           href={`https://github.com/${config.githubRepo}`}
           title="View Source on GitHub"
           target="_blank"
           rel="noopener noreferrer"
         >
           View source.
-        </a>
+        </ViewSourceLink>
       </div>
-    </div>
-  </footer>
+    </Row>
+  </Wrapper>
 );
 
 export default memo(Footer);