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