refactor the link underline logic to produce smaller output

components/CodeBlock/CodeBlock.tsx

@@ -14,13 +14,9 @@ const Code = styled("code", {
   transition: "background 0.25s ease, border 0.25s ease",
 
   variants: {
-    highlight: {
-      // the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file
+    // the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file
+    showLineNumbers: {
       true: {
-        // leave room for clipboard button to the right of the first line
-        ".code-line:first-of-type": {
-          marginRight: "3em",
-        },
         ".line-number::before": {
           display: "inline-block",
           width: "1.5em",
@@ -30,6 +26,14 @@ const Code = styled("code", {
           content: "attr(line)", // added to spans by prism
           userSelect: "none",
         },
+        // leave room for clipboard button to the right of the first line
+        ".code-line:first-of-type": {
+          marginRight: "3em",
+        },
+      },
+    },
+    highlight: {
+      true: {
         ".token": {
           "&.comment, &.prolog, &.cdata": {
             color: "$codeComment",
@@ -65,6 +69,10 @@ const Code = styled("code", {
       },
     },
   },
+
+  defaultVariants: {
+    showLineNumbers: true,
+  },
 });
 
 const InlineCode = styled(Code, {

components/ContactForm/ContactForm.tsx

@@ -254,7 +254,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
               Markdown syntax
             </Link>{" "}
             is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [
-            <Link href="https://jarv.is" forceNewWindow>
+            <Link href="https://jarv.is" fancy={false} forceNewWindow>
               links
             </Link>
             ](https://jarv.is), and <code>`code`</code>.

components/Content/Content.tsx

@@ -5,7 +5,7 @@ const Content = styled("div", {
   lineHeight: 1.7,
   color: "$text",
 
-  "@mobile": {
+  "@medium": {
     fontSize: "0.925em",
     lineHeight: 1.85,
   },

components/Footer/Footer.tsx

@@ -13,7 +13,7 @@ const Wrapper = styled("footer", {
   color: "$mediumDark",
   transition: "color 0.25s ease, background 0.25s ease, border 0.25s ease",
 
-  "@mobile": {
+  "@medium": {
     padding: "1em 1.25em",
   },
 });
@@ -28,7 +28,7 @@ const Row = styled("div", {
   lineHeight: 2.3,
 
   // stack columns on left instead of flexboxing across
-  "@mobile": {
+  "@medium": {
     fontSize: "0.8em",
     display: "block",
   },

components/Header/Header.tsx

@@ -14,7 +14,7 @@ const Wrapper = styled("header", {
   // light-dark theme switch fading
   transition: "color 0.25s ease, background 0.25s ease, border 0.25s ease",
 
-  "@mobile": {
+  "@medium": {
     padding: "0.75em 1.25em",
     height: "5.9em",
   },
@@ -43,11 +43,11 @@ const Nav = styled("nav", {
 });
 
 const ResponsiveMenu = styled(Menu, {
-  "@mobile": {
+  "@medium": {
     maxWidth: "325px",
   },
 
-  "@superNarrow": {
+  "@small": {
     maxWidth: "225px",
   },
 });

components/Heading/Heading.tsx

@@ -20,7 +20,7 @@ const Anchor = styled("a", {
   },
 
   // don't require hover to show anchor link on small (likely touch) screens
-  "@mobile": {
+  "@medium": {
     opacity: 1,
   },
 });
@@ -34,7 +34,7 @@ const H = styled("h1", {
   // note: use rem so it isn't based on the heading's font size.
   scrollMarginTop: "5.5rem",
 
-  "@mobile": {
+  "@medium": {
     scrollMarginTop: "6.5rem",
   },
 

components/Link/Link.tsx

@@ -7,18 +7,30 @@ import type { LinkProps as NextLinkProps } from "next/link";
 const FancyLink = styled("a", {
   color: "$link",
   textDecoration: "none",
-  transition: "background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease",
 
-  backgroundPosition: "0% 100%",
-  backgroundRepeat: "no-repeat",
-  backgroundSize: "0% $underline",
-  paddingBottom: "0.2rem",
+  variants: {
+    // fancy animated link underline effect
+    fancy: {
+      true: {
+        // sets psuedo linear-gradient() for the underline's color; see stitches config for the weird calculation behind the
+        // local `$$underline` variable.
+        setUnderlineVar: { color: "$colors$linkUnderline" },
+        backgroundImage: `linear-gradient($$underline, $$underline)`,
+        backgroundPosition: "0% 100%",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "0% $underline",
+        transition: "background-size 0.25s ease-in-out",
+        paddingBottom: "0.2rem",
 
-  // sets psuedo linear-gradient() for cool underline effect
-  backgroundGradientHack: {},
+        "&:hover": {
+          backgroundSize: "100% $underline",
+        },
+      },
+    },
+  },
 
-  "&:hover": {
-    backgroundSize: "100% $underline",
+  defaultVariants: {
+    fancy: true,
   },
 });
 

components/Menu/Menu.tsx

@@ -10,13 +10,13 @@ const Wrapper = styled("ul", {
   padding: 0,
   margin: 0,
 
-  "@mobile": {
+  "@medium": {
     width: "100%",
     justifyContent: "space-between",
     marginLeft: "1em",
   },
 
-  "@superNarrow": {
+  "@small": {
     marginLeft: "1.4em",
   },
 });
@@ -26,11 +26,11 @@ const Item = styled("li", {
   display: "inline-flex",
   marginLeft: "1em",
 
-  "@mobile": {
+  "@medium": {
     marginLeft: 0,
   },
 
-  "@superNarrow": {
+  "@small": {
     // the home icon is kinda redundant when space is SUPER tight
     "&:first-of-type": {
       display: "none",

components/MenuItem/MenuItem.tsx

@@ -34,7 +34,7 @@ const Label = styled("span", {
   marginTop: "0.1em",
   marginLeft: "0.8em",
 
-  "@mobile": {
+  "@medium": {
     display: "none",
   },
 });
@@ -44,7 +44,7 @@ const Icon = styled("svg", {
   height: "1.25em",
   verticalAlign: "-0.3em",
 
-  "@mobile": {
+  "@medium": {
     width: "1.8em",
     height: "1.8em",
   },

components/NoteTitle/NoteTitle.tsx

@@ -13,7 +13,7 @@ const Title = styled("h1", {
     margin: "0 0.075em",
   },
 
-  "@mobile": {
+  "@medium": {
     fontSize: "1.8em",
   },
 });

components/NotesList/NotesList.tsx

@@ -16,7 +16,7 @@ const Section = styled("section", {
     marginBottom: 0,
   },
 
-  "@mobile": {
+  "@medium": {
     margin: "1.8em 0",
   },
 });
@@ -26,7 +26,7 @@ const Year = styled("h2", {
   marginTop: 0,
   marginBottom: "0.5em",
 
-  "@mobile": {
+  "@medium": {
     fontSize: "2em",
   },
 });

components/PageTitle/PageTitle.tsx

@@ -10,7 +10,7 @@ const Title = styled("h1", {
   fontSize: "2em",
   textAlign: "center",
 
-  "@mobile": {
+  "@medium": {
     fontSize: "1.8em",
   },
 });

components/Selfie/Selfie.tsx

@@ -12,7 +12,7 @@ const ConstrainImage = styled("div", {
   lineHeight: 0,
   padding: 0,
 
-  "@mobile": {
+  "@medium": {
     width: "70px",
     height: "70px",
   },
@@ -22,7 +22,7 @@ const Image = styled(NextImage, {
   border: "1px solid $light !important",
   borderRadius: "50%",
 
-  "@mobile": {
+  "@medium": {
     borderWidth: "2px !important",
   },
 });
@@ -36,7 +36,7 @@ const Link = styled("a", {
   "&:hover": {
     color: "$link",
 
-    "@mobile": {
+    "@medium": {
       [`${Image}`]: {
         borderColor: "$linkUnderline !important",
       },
@@ -50,7 +50,7 @@ const Name = styled("span", {
   fontWeight: 500,
   lineHeight: 1,
 
-  "@mobile": {
+  "@medium": {
     display: "none",
   },
 });