diff --git a/components/Link/Link.tsx b/components/Link/Link.tsx index 292ba695..30cb6556 100644 --- a/components/Link/Link.tsx +++ b/components/Link/Link.tsx @@ -13,12 +13,15 @@ const StyledLink = styled(NextLink, { // fancy animated link underline effect (on by default) 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)`, + // the local `$$underlineColor` variable. + setUnderlineVars: {}, + // underline height is based on link's font size + $$underlineSize: "calc(0.1em + 0.05rem)", + + backgroundImage: `linear-gradient($$underlineColor, $$underlineColor)`, backgroundPosition: "0% 100%", backgroundRepeat: "no-repeat", - backgroundSize: "0% $underline", + backgroundSize: "0% $$underlineSize", paddingBottom: "0.2rem", "@media (prefers-reduced-motion: no-preference)": { @@ -26,7 +29,7 @@ const StyledLink = styled(NextLink, { }, "&:hover": { - backgroundSize: "100% $underline", + backgroundSize: "100% $$underlineSize", }, }, false: {}, diff --git a/lib/styles/stitches.config.ts b/lib/styles/stitches.config.ts index feb684cf..b3d8e3ee 100644 --- a/lib/styles/stitches.config.ts +++ b/lib/styles/stitches.config.ts @@ -1,4 +1,4 @@ -import { createStitches, defaultThemeMap } from "@stitches/react"; +import { createStitches } from "@stitches/react"; // modified modern-normalize.css in object form: // https://github.com/jakejarvis/stitches-normalize/blob/main/src/index.ts @@ -51,10 +51,6 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme codeDeletion: "#ff1b1b", }, - borderWidths: { - underline: "calc(0.1em + 0.05rem)", - }, - radii: { rounded: "0.65em", }, @@ -65,20 +61,18 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme medium: "(max-width: 768px)", // used rarely only for SUPER narrow windows: small: "(max-width: 380px)", - // ...note: things then COMPLETELY break at 300px. + // ...note: things then COMPLETELY break at 300px. but it's 2022 let's be real. }, utils: { - setUnderlineVar: ({ color, alpha = 0.4 }) => ({ + setUnderlineVars: ({ + color = "$colors$linkUnderline", // see theme values below + alpha = 0.4, + }) => ({ // allow both pre-set rgba stitches variables and hex values - $$underline: color.startsWith("#") ? hexToRgba(color, alpha) : color, + $$underlineColor: color.startsWith("#") ? hexToRgba(color, alpha) : color, }), }, - - themeMap: { - ...defaultThemeMap, - backgroundSize: "borderWidths", - }, }); export const darkTheme = createTheme({ diff --git a/pages/index.tsx b/pages/index.tsx index 306f9138..238adee9 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -14,11 +14,11 @@ const ColorfulLink = ({ ) => { +const RandomWallpaper = ({ style, ...rest }: ComponentProps) => { const [wallpaperUrl, setWallpaperUrl] = useState(""); // set a random retro Windows ME desktop tile for the entire content area @@ -101,7 +101,7 @@ Y2K.getLayout = (page: ReactElement) => { }, }} > - {page} + {page} ); };