1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 03:05:24 -04:00

fix font css vars

This commit is contained in:
Jake Jarvis 2025-04-10 20:23:34 -04:00
parent a63098b150
commit eb84ec37ee
Signed by: jake
SSH Key Fingerprint: SHA256:nCkvAjYA6XaSPUqc4TfbBQTpzr8Xj7ritg/sGInCdkc
13 changed files with 71 additions and 82 deletions

View File

@ -6,13 +6,13 @@
GITHUB_TOKEN= GITHUB_TOKEN=
KV_REST_API_TOKEN= KV_REST_API_TOKEN=
KV_REST_API_URL= KV_REST_API_URL=
RESEND_API_KEY=
RESEND_FROM_EMAIL=
RESEND_TO_EMAIL=
TURNSTILE_SECRET_KEY=
NEXT_PUBLIC_GISCUS_CATEGORY_ID= NEXT_PUBLIC_GISCUS_CATEGORY_ID=
NEXT_PUBLIC_GISCUS_REPO_ID= NEXT_PUBLIC_GISCUS_REPO_ID=
NEXT_PUBLIC_ONION_DOMAIN= NEXT_PUBLIC_ONION_DOMAIN=
NEXT_PUBLIC_TURNSTILE_SITE_KEY= NEXT_PUBLIC_TURNSTILE_SITE_KEY=
NEXT_PUBLIC_UMAMI_URL= NEXT_PUBLIC_UMAMI_URL=
NEXT_PUBLIC_UMAMI_WEBSITE_ID= NEXT_PUBLIC_UMAMI_WEBSITE_ID=
RESEND_API_KEY=
RESEND_FROM_EMAIL=
RESEND_TO_EMAIL=
TURNSTILE_SECRET_KEY=

View File

@ -11,6 +11,7 @@ export const GeistSans = GeistSansLoader({
"system-ui", "system-ui",
"sans-serif", "sans-serif",
], ],
variable: "--fonts-sans",
preload: true, preload: true,
}); });
@ -28,5 +29,6 @@ export const GeistMono = GeistMonoLoader({
"monospace", "monospace",
], ],
adjustFontFallback: false, adjustFontFallback: false,
variable: "--fonts-mono",
preload: true, preload: true,
}); });

View File

@ -1,4 +1,7 @@
/*! Adapted from modern-normalize.css | MIT License | https://github.com/sindresorhus/modern-normalize */ /*!
* modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize/tree/v3.0.1
*/
*, *,
::before, ::before,
::after { ::after {
@ -15,6 +18,7 @@ html {
body { body {
margin: 0; margin: 0;
font-family: var(--fonts-sans); font-family: var(--fonts-sans);
background-color: var(--colors-background-inner);
} }
code, code,

View File

@ -1,7 +1,3 @@
.body {
background-color: var(--colors-background-inner);
}
.layout { .layout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -1,11 +1,11 @@
import { JsonLd } from "react-schemaorg"; import { JsonLd } from "react-schemaorg";
import clsx from "clsx";
import Analytics from "./analytics"; import Analytics from "./analytics";
import { ThemeProvider, ThemeScript } from "../contexts/ThemeContext"; import { ThemeProvider, ThemeScript } from "../contexts/ThemeContext";
import Header from "../components/Header"; import Header from "../components/Header";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import { SkipToContentLink, SkipToContentTarget } from "../components/SkipToContent"; import { SkipNavLink, SkipNavTarget } from "../components/SkipNav";
import { defaultMetadata } from "../lib/helpers/metadata"; import { defaultMetadata } from "../lib/helpers/metadata";
import { setRootCssVariables } from "../lib/helpers/styles";
import * as config from "../lib/config"; import * as config from "../lib/config";
import { BASE_URL, MAX_WIDTH } from "../lib/config/constants"; import { BASE_URL, MAX_WIDTH } from "../lib/config/constants";
import type { Metadata } from "next"; import type { Metadata } from "next";
@ -69,25 +69,21 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
/> />
</head> </head>
<body className={styles.body}> <body
<style className={clsx(GeistSans.variable, GeistMono.variable)}
precedence={styles.layout} style={{ ["--max-width" as string]: `${MAX_WIDTH}px` }}
{...setRootCssVariables({ >
"fonts-sans": GeistSans.style.fontFamily,
"fonts-mono": GeistMono.style.fontFamily,
"max-width": `${MAX_WIDTH}px`,
})}
/>
<ThemeProvider> <ThemeProvider>
<SkipToContentLink /> <SkipNavLink />
<div className={styles.layout}> <div className={styles.layout}>
<Header /> <Header />
<main className={styles.default}> <main className={styles.default}>
<SkipToContentTarget /> <div className={styles.container}>
<div className={styles.container}>{children}</div> <SkipNavTarget />
{children}
</div>
</main> </main>
<Footer /> <Footer />

View File

@ -3,8 +3,10 @@
margin-bottom: 0.5em; margin-bottom: 0.5em;
line-height: 1.5; line-height: 1.5;
/* offset (approximately) with sticky header so jumped-to content isn't hiding behind it. /*
note: use rem so it isn't based on the heading's font size. */ * offset (approximately) with sticky header so jumped-to content isn't hiding behind it.
* note: use rem so it isn't based on the heading's font size.
*/
scroll-margin-top: 5.5rem; scroll-margin-top: 5.5rem;
} }

View File

@ -1,5 +1,6 @@
/* accessible invisibility stuff pulled from @reach/skip-nav: /*
https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css */ * Pulled from @reach/skip-nav: https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css
*/
.hidden { .hidden {
border: 0; border: 0;

View File

@ -1,8 +1,8 @@
import styles from "./SkipToContent.module.css"; import styles from "./SkipNav.module.css";
const skipNavId = "skip-nav"; const skipNavId = "skip-nav";
export const SkipToContentLink = () => { export const SkipNavLink = () => {
return ( return (
<a href={`#${skipNavId}`} tabIndex={0} className={styles.hidden}> <a href={`#${skipNavId}`} tabIndex={0} className={styles.hidden}>
Skip to content Skip to content
@ -10,8 +10,8 @@ export const SkipToContentLink = () => {
); );
}; };
export const SkipToContentTarget = () => { export const SkipNavTarget = () => {
return <div id={skipNavId} />; return <div id={skipNavId} />;
}; };
export default SkipToContentLink; export default SkipNavLink;

View File

@ -0,0 +1,2 @@
export * from "./SkipNav";
export { default } from "./SkipNav";

View File

@ -1,2 +0,0 @@
export * from "./SkipToContent";
export { default } from "./SkipToContent";

View File

@ -1,7 +1,9 @@
import { registerOTel } from "@vercel/otel"; import { registerOTel } from "@vercel/otel";
export const register = () => { export const register = () => {
registerOTel({ if (process.env.VERCEL_ENV === "production") {
serviceName: "jarvis", registerOTel({
}); serviceName: "jarvis",
});
}
}; };

View File

@ -1,14 +0,0 @@
import hash from "@emotion/hash";
// a little hacky-hack to have react combine all of these css var declarations into a single <style> tag up top. see:
// https://react.dev/reference/react-dom/components/style#rendering-an-inline-css-stylesheet
export const setRootCssVariables = (vars: Record<string, string>) => {
const root = Object.entries(vars)
.map(([key, value]) => `--${key}:${value}`)
.join(";");
return {
href: hash(root),
dangerouslySetInnerHTML: { __html: `:root{${root}}` },
};
};

62
pnpm-lock.yaml generated
View File

@ -859,20 +859,20 @@ packages:
resolution: {integrity: sha512-lp4qAiMTD4sNWW4DbKLBkfiMZ4jbAboJIGOQr5DvciMRI494OapieI9qiODpOt0XBr1LjIDy1xAGAnVs5supTA==} resolution: {integrity: sha512-lp4qAiMTD4sNWW4DbKLBkfiMZ4jbAboJIGOQr5DvciMRI494OapieI9qiODpOt0XBr1LjIDy1xAGAnVs5supTA==}
engines: {node: '>=14'} engines: {node: '>=14'}
'@opentelemetry/semantic-conventions@1.30.0': '@opentelemetry/semantic-conventions@1.31.0':
resolution: {integrity: sha512-4VlGgo32k2EQ2wcCY3vEU28A0O13aOtHz3Xt2/2U5FAh9EfhD6t6DqL5Z6yAnRCntbTFDU4YfbpyzSlHNWycPw==} resolution: {integrity: sha512-cYJeP+6qN0UnBv1r09hXl0YorB8kXHv61BC0NUlBA8vxrylZ4/C8lnva3gd1E8n33DNYSaiGW+DuGoSt0QQ7Dw==}
engines: {node: '>=14'} engines: {node: '>=14'}
'@pkgjs/parseargs@0.11.0': '@pkgjs/parseargs@0.11.0':
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'} engines: {node: '>=14'}
'@pkgr/core@0.2.1': '@pkgr/core@0.2.2':
resolution: {integrity: sha512-VzgHzGblFmUeBmmrk55zPyrQIArQN4vujc9shWytaPdB3P7qhi0cpaiKIr7tlCmFv2lYUwnLospIqjL9ZSAhhg==} resolution: {integrity: sha512-25L86MyPvnlQoX2MTIV2OiUcb6vJ6aRbFa9pbwByn95INKD5mFH2smgjDhq+fwJoqAgvgbdJLj6Tz7V9X5CFAQ==}
engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
'@polka/url@1.0.0-next.28': '@polka/url@1.0.0-next.29':
resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==} resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
'@react-email/render@1.0.5': '@react-email/render@1.0.5':
resolution: {integrity: sha512-CA69HYXPk21HhtAXATIr+9JJwpDNmAFCvdMUjWmeoD1+KhJ9NAxusMRxKNeibdZdslmq3edaeOKGbdQ9qjK8LQ==} resolution: {integrity: sha512-CA69HYXPk21HhtAXATIr+9JJwpDNmAFCvdMUjWmeoD1+KhJ9NAxusMRxKNeibdZdslmq3edaeOKGbdQ9qjK8LQ==}
@ -1337,8 +1337,8 @@ packages:
resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
engines: {node: '>=6'} engines: {node: '>=6'}
caniuse-lite@1.0.30001712: caniuse-lite@1.0.30001713:
resolution: {integrity: sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig==} resolution: {integrity: sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==}
ccount@2.0.1: ccount@2.0.1:
resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@ -1574,8 +1574,8 @@ packages:
eastasianwidth@0.2.0: eastasianwidth@0.2.0:
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
electron-to-chromium@1.5.134: electron-to-chromium@1.5.135:
resolution: {integrity: sha512-zSwzrLg3jNP3bwsLqWHmS5z2nIOQ5ngMnfMZOWWtXnqqQkPVyOipxK98w+1beLw1TB+EImPNcG8wVP/cLVs2Og==} resolution: {integrity: sha512-8gXUdEmvb+WCaYUhA0Svr08uSeRjM2w3x5uHOc1QbaEVzJXB8rgm5eptieXzyKoVEtinLvW6MtTcurA65PeS1Q==}
emoji-regex-xs@1.0.0: emoji-regex-xs@1.0.0:
resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==} resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
@ -2131,8 +2131,8 @@ packages:
hermes-parser@0.25.1: hermes-parser@0.25.1:
resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==} resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
hookified@1.8.1: hookified@1.8.2:
resolution: {integrity: sha512-GrO2l93P8xCWBSTBX9l2BxI78VU/MAAYag+pG8curS3aBGy0++ZlxrQ7PdUOUVMbn5BwkGb6+eRrnf43ipnFEA==} resolution: {integrity: sha512-5nZbBNP44sFCDjSoB//0N7m508APCgbQ4mGGo1KJGBYyCKNHfry1Pvd0JVHZIxjdnqn8nFRBAN/eFB6Rk/4w5w==}
hosted-git-info@7.0.2: hosted-git-info@7.0.2:
resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==} resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
@ -2465,8 +2465,8 @@ packages:
engines: {node: '>=18.12.0'} engines: {node: '>=18.12.0'}
hasBin: true hasBin: true
listr2@8.2.5: listr2@8.3.2:
resolution: {integrity: sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==} resolution: {integrity: sha512-vsBzcU4oE+v0lj4FhVLzr9dBTv4/fHIa57l+GCwovP8MoFNZJTOhGU8PXd4v2VJCbECAaijBiHntiekFMLvo0g==}
engines: {node: '>=18.0.0'} engines: {node: '>=18.0.0'}
lit-element@4.1.1: lit-element@4.1.1:
@ -4450,7 +4450,7 @@ snapshots:
'@opentelemetry/core@2.0.0(@opentelemetry/api@1.9.0)': '@opentelemetry/core@2.0.0(@opentelemetry/api@1.9.0)':
dependencies: dependencies:
'@opentelemetry/api': 1.9.0 '@opentelemetry/api': 1.9.0
'@opentelemetry/semantic-conventions': 1.30.0 '@opentelemetry/semantic-conventions': 1.31.0
'@opentelemetry/instrumentation@0.200.0(@opentelemetry/api@1.9.0)': '@opentelemetry/instrumentation@0.200.0(@opentelemetry/api@1.9.0)':
dependencies: dependencies:
@ -4473,7 +4473,7 @@ snapshots:
dependencies: dependencies:
'@opentelemetry/api': 1.9.0 '@opentelemetry/api': 1.9.0
'@opentelemetry/core': 2.0.0(@opentelemetry/api@1.9.0) '@opentelemetry/core': 2.0.0(@opentelemetry/api@1.9.0)
'@opentelemetry/semantic-conventions': 1.30.0 '@opentelemetry/semantic-conventions': 1.31.0
'@opentelemetry/sdk-logs@0.200.0(@opentelemetry/api@1.9.0)': '@opentelemetry/sdk-logs@0.200.0(@opentelemetry/api@1.9.0)':
dependencies: dependencies:
@ -4497,14 +4497,14 @@ snapshots:
'@opentelemetry/semantic-conventions@1.28.0': {} '@opentelemetry/semantic-conventions@1.28.0': {}
'@opentelemetry/semantic-conventions@1.30.0': {} '@opentelemetry/semantic-conventions@1.31.0': {}
'@pkgjs/parseargs@0.11.0': '@pkgjs/parseargs@0.11.0':
optional: true optional: true
'@pkgr/core@0.2.1': {} '@pkgr/core@0.2.2': {}
'@polka/url@1.0.0-next.28': {} '@polka/url@1.0.0-next.29': {}
'@react-email/render@1.0.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': '@react-email/render@1.0.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies: dependencies:
@ -4945,8 +4945,8 @@ snapshots:
browserslist@4.24.4: browserslist@4.24.4:
dependencies: dependencies:
caniuse-lite: 1.0.30001712 caniuse-lite: 1.0.30001713
electron-to-chromium: 1.5.134 electron-to-chromium: 1.5.135
node-releases: 2.0.19 node-releases: 2.0.19
update-browserslist-db: 1.1.3(browserslist@4.24.4) update-browserslist-db: 1.1.3(browserslist@4.24.4)
@ -4963,7 +4963,7 @@ snapshots:
cacheable@1.8.10: cacheable@1.8.10:
dependencies: dependencies:
hookified: 1.8.1 hookified: 1.8.2
keyv: 5.3.2 keyv: 5.3.2
call-bind-apply-helpers@1.0.2: call-bind-apply-helpers@1.0.2:
@ -4985,7 +4985,7 @@ snapshots:
callsites@3.1.0: {} callsites@3.1.0: {}
caniuse-lite@1.0.30001712: {} caniuse-lite@1.0.30001713: {}
ccount@2.0.1: {} ccount@2.0.1: {}
@ -5199,7 +5199,7 @@ snapshots:
eastasianwidth@0.2.0: {} eastasianwidth@0.2.0: {}
electron-to-chromium@1.5.134: {} electron-to-chromium@1.5.135: {}
emoji-regex-xs@1.0.0: {} emoji-regex-xs@1.0.0: {}
@ -5732,7 +5732,7 @@ snapshots:
dependencies: dependencies:
cacheable: 1.8.10 cacheable: 1.8.10
flatted: 3.3.3 flatted: 3.3.3
hookified: 1.8.1 hookified: 1.8.2
flatted@3.3.3: {} flatted@3.3.3: {}
@ -6025,7 +6025,7 @@ snapshots:
dependencies: dependencies:
hermes-estree: 0.25.1 hermes-estree: 0.25.1
hookified@1.8.1: {} hookified@1.8.2: {}
hosted-git-info@7.0.2: hosted-git-info@7.0.2:
dependencies: dependencies:
@ -6331,7 +6331,7 @@ snapshots:
debug: 4.4.0 debug: 4.4.0
execa: 8.0.1 execa: 8.0.1
lilconfig: 3.1.3 lilconfig: 3.1.3
listr2: 8.2.5 listr2: 8.3.2
micromatch: 4.0.8 micromatch: 4.0.8
pidtree: 0.6.0 pidtree: 0.6.0
string-argv: 0.3.2 string-argv: 0.3.2
@ -6339,7 +6339,7 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
listr2@8.2.5: listr2@8.3.2:
dependencies: dependencies:
cli-truncate: 4.0.0 cli-truncate: 4.0.0
colorette: 2.0.20 colorette: 2.0.20
@ -6908,7 +6908,7 @@ snapshots:
'@swc/counter': 0.1.3 '@swc/counter': 0.1.3
'@swc/helpers': 0.5.15 '@swc/helpers': 0.5.15
busboy: 1.6.0 busboy: 1.6.0
caniuse-lite: 1.0.30001712 caniuse-lite: 1.0.30001713
postcss: 8.4.31 postcss: 8.4.31
react: 19.1.0 react: 19.1.0
react-dom: 19.1.0(react@19.1.0) react-dom: 19.1.0(react@19.1.0)
@ -7676,7 +7676,7 @@ snapshots:
sirv@2.0.4: sirv@2.0.4:
dependencies: dependencies:
'@polka/url': 1.0.0-next.28 '@polka/url': 1.0.0-next.29
mrmime: 2.0.1 mrmime: 2.0.1
totalist: 3.0.1 totalist: 3.0.1
@ -7937,7 +7937,7 @@ snapshots:
synckit@0.11.3: synckit@0.11.3:
dependencies: dependencies:
'@pkgr/core': 0.2.1 '@pkgr/core': 0.2.2
tslib: 2.8.1 tslib: 2.8.1
table@6.9.0: table@6.9.0: