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;

components/Footer/Footer.module.css

@@ -8,9 +8,7 @@
 }
 
 .footer a {
-  color: var(--medium-dark);
-  background: none;
-  padding-bottom: 0;
+  color: inherit;
 }
 
 .row {
@@ -24,7 +22,7 @@
 }
 
 .view_source {
-  padding-bottom: 2px !important;
+  padding-bottom: 2px;
   border-bottom: 1px solid;
   border-color: var(--light);
 }

components/Heading/Heading.module.css

@@ -22,17 +22,15 @@
 .anchor {
   margin: 0 0.25em;
   padding: 0 0.25em;
-  color: var(--medium-light);
+  color: var(--medium-light) !important;
   font-weight: 300;
-  background: none;
-  transition: none;
   opacity: 0; /* overridden on hover */
 }
 .anchor::before {
   content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
 }
 .anchor:hover {
-  color: var(--link);
+  color: var(--link) !important;
 }
 /* make anchor `#` link show up on hover over the corresponding heading */
 .heading:hover .anchor {

components/Heading/Heading.tsx

@@ -16,7 +16,7 @@ const Heading = ({ as: Component, id, className, children, ...rest }: Props) =>
 
       {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
       {id && (Component === "h2" || Component === "h3") && (
-        <a className={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
+        <a className={classNames("no-underline", styles.anchor)} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
       )}
     </Component>
   );

components/Menu/Menu.module.css

@@ -14,13 +14,10 @@
   display: inline-flex;
   align-items: center;
   color: var(--medium-dark);
-  background: none;
-  padding-bottom: 0;
 }
 
 .menu li .link:hover {
   color: var(--link);
-  transition: none;
 }
 
 .menu li .icon {

components/Name/Name.module.css

@@ -2,13 +2,10 @@
   display: inline-flex;
   align-items: center;
   color: var(--medium-dark);
-  background: none;
-  padding-bottom: 0;
 }
 
 .link:hover {
   color: var(--link);
-  transition: none;
 }
 
 .selfie {

components/NoteMeta/NoteMeta.module.css

@@ -8,9 +8,7 @@
 }
 
 .meta a {
-  color: var(--medium);
-  background: none;
-  padding-bottom: 0;
+  color: inherit;
 }
 
 .meta > div {

components/NoteTitle/NoteTitle.module.css

@@ -6,9 +6,7 @@
 }
 
 .title a {
-  background: none;
-  padding-bottom: 0;
-  color: var(--text);
+  color: inherit;
 }
 
 .title code {

components/NotesList/NotesList.module.css

@@ -1,4 +1,6 @@
 .section {
+  font-size: 1.1em;
+  line-height: 1.1;
   margin: 2.4em 0;
 }
 

components/OctocatLink/OctocatLink.module.css

@@ -1,10 +1,8 @@
 .link {
   margin: 0 0.4em;
-  color: var(--text);
-  background: none !important;
-  padding-bottom: 0;
+  color: var(--text) !important;
 }
 
 .link:hover {
-  color: var(--link);
+  color: var(--link) !important;
 }

components/OctocatLink/OctocatLink.tsx

@@ -9,7 +9,12 @@ type Props = {
 };
 
 const OctocatLink = ({ repo, className }: Props) => (
-  <a className={styles.link} href={`https://github.com/${repo}`} target="_blank" rel="noopener noreferrer">
+  <a
+    className={classNames("no-underline", styles.link)}
+    href={`https://github.com/${repo}`}
+    target="_blank"
+    rel="noopener noreferrer"
+  >
     <OctocatOcticon fill="currentColor" className={classNames("icon", className)} />
   </a>
 );

components/PageTitle/PageTitle.module.css

@@ -6,9 +6,7 @@
 }
 
 .title a {
-  background: none;
-  padding-bottom: 0;
-  color: var(--text);
+  color: inherit;
 }
 
 @media screen and (max-width: 768px) {

components/RepositoryCard/RepositoryCard.module.css

@@ -34,13 +34,11 @@
 }
 
 .meta_item a {
-  background: none;
-  padding-bottom: 0;
-  color: var(--medium);
+  color: inherit !important;
 }
 
 .meta_item a:hover {
-  color: var(--link);
+  color: var(--link) !important;
 }
 
 .octicon,

components/RepositoryCard/RepositoryCard.tsx

@@ -28,6 +28,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
       {stars > 0 && (
         <div className={styles.meta_item}>
           <a
+            className="no-underline"
             href={`${url}/stargazers`}
             title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
             target="_blank"
@@ -42,6 +43,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
       {forks > 0 && (
         <div className={styles.meta_item}>
           <a
+            className="no-underline"
             href={`${url}/network/members`}
             title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
             target="_blank"