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%",
+  variants: {
-  backgroundRepeat: "no-repeat",
+    // fancy animated link underline effect
-  backgroundSize: "0% $underline",
+    fancy: {
-  paddingBottom: "0.2rem",
+      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
+        "&:hover": {
-  backgroundGradientHack: {},
+          backgroundSize: "100% $underline",
+        },
+      },
+    },
+  },
 
-  "&:hover": {
+  defaultVariants: {
-    backgroundSize: "100% $underline",
+    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",
   },
 });

lib/styles/stitches.config.ts

@@ -9,7 +9,7 @@ import Inter from "./fonts/inter";
 import RobotoMono from "./fonts/roboto-mono";
 import ComicNeue from "./fonts/comic-neue";
 
-export const { styled, css, getCssText, globalCss, keyframes, theme, createTheme } = createStitches({
+export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme } = createStitches({
   theme: {
     fonts: {
       sans: `Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,
@@ -60,19 +60,17 @@ export const { styled, css, getCssText, globalCss, keyframes, theme, createTheme
   },
 
   media: {
-    mobile: "(max-width: 768px)",
+    // most responsive styles will go here:
-    superNarrow: "(max-width: 380px)",
+    medium: "(max-width: 768px)",
+    // used rarely only for SUPER narrow windows:
+    small: "(max-width: 380px)",
   },
 
   utils: {
-    backgroundGradientHack: ({ color = "$linkUnderline" }) => {
+    setUnderlineVar: ({ color, alpha = 0.4 }) => ({
       // allow both pre-set rgba stitches variables and hex values
-      const rgba = color.startsWith("#") ? hex2rgba(color, 0.4) : color;
+      $$underline: color.startsWith("#") ? hex2rgba(color, alpha) : color,
-
+    }),
-      return {
-        backgroundImage: `linear-gradient(${rgba}, ${rgba})`,
-      };
-    },
   },
 
   themeMap: {

package.json

@@ -17,7 +17,8 @@
     "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "analyze": "cross-env ANALYZE=true next build",
-    "lint": "eslint . && prettier --check ."
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
     "@fontsource/comic-neue": "4.5.3",

pages/index.tsx

@@ -12,25 +12,28 @@ const ColorfulLink = ({
   lightColor,
   darkColor,
   css,
+  fancy = true,
   ...rest
 }: CustomLinkProps & {
   lightColor: string;
   darkColor: string;
   css?: Stitches.CSS;
+  fancy?: boolean;
 }) => {
   return (
     <Link
       css={{
         color: lightColor,
-        backgroundGradientHack: { color: lightColor },
+        setUnderlineVar: { color: lightColor },
 
         [`.${darkTheme} &`]: {
           color: darkColor,
-          backgroundGradientHack: { color: darkColor },
+          setUnderlineVar: { color: darkColor },
         },
 
         ...css,
       }}
+      fancy={fancy}
       {...rest}
     />
   );
@@ -42,7 +45,7 @@ const H1 = styled("h1", {
   fontWeight: 500,
   letterSpacing: "-0.01em",
 
-  "@mobile": {
+  "@medium": {
     fontSize: "1.5em",
   },
 });
@@ -54,7 +57,7 @@ const H2 = styled("h2", {
   letterSpacing: "-0.016em",
   lineHeight: 1.4,
 
-  "@mobile": {
+  "@medium": {
     fontSize: "1.2em",
   },
 });
@@ -68,7 +71,7 @@ const Paragraph = styled("p", {
     marginBottom: 0,
   },
 
-  "@mobile": {
+  "@medium": {
     fontSize: "0.925em",
   },
 });
@@ -333,7 +336,7 @@ const Index = () => (
           title="My Public Key"
           lightColor="#757575"
           darkColor="#959595"
-          css={{ background: "none !important" }}
+          fancy={false}
           forceNewWindow
         >
           <code>🔐 2B0C 9CF2 51E6 9A39</code>