jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-16 16:15:33 -04:00
Code Issues Activity

refactor the link underline logic to produce smaller output

Browse Source
This commit is contained in:
Jake Jarvis
2022-03-04 09:33:44 -05:00
parent 71fe4455d1
commit f8b6378faf
16 changed files with 77 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
lib/styles/stitches.config.ts
View File

@@ -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)",
superNarrow: "(max-width: 380px)",
// most responsive styles will go here:
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;
return {
backgroundImage: `linear-gradient(${rgba}, ${rgba})`,
};
},
$$underline: color.startsWith("#") ? hex2rgba(color, alpha) : color,
}),
},
themeMap: {