update heading link icon 🔗

components/Heading/Heading.tsx

@@ -6,8 +6,7 @@ import type { ComponentProps } from "react";
 const Anchor = styled(HeadingAnchor, {
   margin: "0 0.4em",
   padding: "0 0.2em",
-  color: "$mediumLight",
-  fontWeight: 300,
+  color: "$medium",
   opacity: 0, // overridden on hover below (except on small screens)
 
   "&:hover": {
@@ -36,12 +35,14 @@ const H = styled("h1", {
     scrollMarginTop: "6.5rem",
   },
 
+  // show anchor link when hovering anywhere over the heading line
   [`&:hover ${Anchor}`]: {
     opacity: 1,
   },
 
   variants: {
-    underline: {
+    // subtle horizontal rule under the heading, set by default on `<h2>`s
+    divider: {
       true: {
         paddingBottom: "0.25em",
         borderBottom: "1px solid $kindaLight",
@@ -52,11 +53,12 @@ const H = styled("h1", {
 
 export type HeadingProps = ComponentProps<typeof H> & {
   as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  divider?: boolean;
 };
 
-const Heading = ({ as, id, children, ...rest }: HeadingProps) => {
+const Heading = ({ as, id, divider, children, ...rest }: HeadingProps) => {
   return (
-    <H as={as} underline={as === "h2"} id={id} {...rest}>
+    <H as={as} divider={divider ?? as === "h2"} id={id} {...rest}>
       {children}
 
       {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}