move more junk out of index.css and into components

components/Content/Content.module.css

@@ -3,6 +3,28 @@
   line-height: 1.7;
 }
 
+.content a {
+  color: var(--link);
+  background-image: linear-gradient(var(--link-underline), var(--link-underline));
+  background-position: 0% 100%;
+  background-repeat: no-repeat;
+  background-size: 0% var(--link-underline-size);
+  padding-bottom: var(--link-underline-size);
+  /* background-size is for hover animation, color & border are for theme fading: */
+  transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease;
+}
+
+.content a:hover {
+  background-size: 100% var(--link-underline-size);
+}
+
+/* set an anchor's class to `no-underline` to disable all of the above */
+.content :global(a.no-underline) {
+  background: none;
+  padding-bottom: 0;
+  transition: none;
+}
+
 @media screen and (max-width: 768px) {
   .content {
     font-size: 0.925em;

components/Content/Content.tsx

@@ -1,11 +1,13 @@
+import classNames from "classnames";
 import type { ReactNode } from "react";
 
 import styles from "./Content.module.css";
 
 type Props = {
   children: ReactNode;
+  className?: string;
 };
 
-const Content = (props: Props) => <div className={styles.content} {...props} />;
+const Content = ({ className, ...rest }: Props) => <div className={classNames(styles.content, className)} {...rest} />;
 
 export default Content;