move more junk out of index.css and into components

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>
   );