1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 09:25:22 -04:00

only declare Comic Neue font face on /previously

This commit is contained in:
Jake Jarvis 2022-05-26 09:41:41 -04:00
parent 1e1ecd89ea
commit c2648a0943
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
6 changed files with 128 additions and 117 deletions

View File

@ -1,3 +1,5 @@
import type { AtRule } from "@stitches/react/types/css";
// Legacy
import comicNeueLatin400NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff";
import comicNeueLatin400NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff2";
@ -11,8 +13,7 @@ import comicNeueLatin700ItalicWoff2 from "@fontsource/comic-neue/files/comic-neu
export const name = {
regular: "Comic Neue",
};
export const preloadUrls = [];
export const family = [
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,
fontStyle: "normal",

View File

@ -1,3 +1,5 @@
import type { AtRule } from "@stitches/react/types/css";
// Legacy
import interLatin400NormalWoff from "@fontsource/inter/files/inter-latin-400-normal.woff";
import interLatin400NormalWoff2 from "@fontsource/inter/files/inter-latin-400-normal.woff2";
@ -15,7 +17,7 @@ export const name = {
};
// re-export hashed URL(s) of the most prominent file so we can preload it in head:
export const preloadUrls = [interLatinVarFullNormalWoff2];
export const family = [
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,
fontStyle: "normal",

View File

@ -1,3 +1,5 @@
import type { AtRule } from "@stitches/react/types/css";
// Legacy
import robotoMonoLatin400NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff";
import robotoMonoLatin400NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2";
@ -22,7 +24,7 @@ export const name = {
};
// re-export hashed URL(s) of the most prominent file so we can preload it in head:
export const preloadUrls = [robotoMonoLatinVarWghtOnlyNormalWoff2];
export const family = [
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,
fontStyle: "normal",

View File

@ -8,7 +8,7 @@ import normalizeCss from "stitches-normalize";
import hexToRgba from "hex-to-rgba";
// web fonts
import { Inter, RobotoMono, ComicNeue } from "./fonts";
import { Inter, RobotoMono } from "./fonts";
export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme } = createStitches({
theme: {
@ -119,7 +119,7 @@ export const globalStyles = globalCss(
// @ts-ignore
...normalizeCss({ systemFonts: false }),
{
"@font-face": [...Inter.family, ...RobotoMono.family, ...ComicNeue.family],
"@font-face": [...Inter.family, ...RobotoMono.family],
body: {
backgroundColor: "$backgroundInner",
@ -161,4 +161,4 @@ export const globalStyles = globalCss(
);
// re-export hashed URLs of the most important variable fonts so we can preload them in pages/_document.tsx
export const preloadUrls = [...Inter.preloadUrls, ...RobotoMono.preloadUrls, ...ComicNeue.preloadUrls];
export const preloadUrls = [...Inter.preloadUrls, ...RobotoMono.preloadUrls];

View File

@ -11,7 +11,8 @@ import CodeInline from "../components/CodeInline";
import HorizontalRule from "../components/HorizontalRule";
import Marquee from "../components/Marquee";
import { Windows95Logo } from "../components/Icons";
import { styled } from "../lib/styles/stitches.config";
import { styled, globalCss } from "../lib/styles/stitches.config";
import { ComicNeue } from "../lib/styles/fonts";
import type { ReactElement } from "react";
import img_wayback from "../public/static/images/previously/wayback.png";
@ -29,7 +30,21 @@ import img_2012_09 from "../public/static/images/previously/2012_09.png";
import img_2018_04 from "../public/static/images/previously/2018_04.png";
import img_2020_03 from "../public/static/images/previously/2020_03.png";
const WindowsIcon = styled(Windows95Logo, {
const ScreenShot = styled(Figure, {
margin: "1em auto",
"& figcaption": {
fontSize: "0.9em",
lineHeight: 1.5,
color: "$medium",
},
});
const Divider = styled(HorizontalRule, {
margin: "1em auto",
});
const Icon = styled("svg", {
width: "1.2em",
height: "1.2em",
verticalAlign: "-0.15em",
@ -51,7 +66,7 @@ const Previously = () => {
<PageTitle>🕰 Previously on...</PageTitle>
<Content>
<Figure
<ScreenShot
src={img_wayback}
href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
alt="Timeline of this website's past."
@ -60,38 +75,38 @@ const Previously = () => {
...the{" "}
<Link href="https://web.archive.org/web/20010501000000*/jakejarvis.com">Cringey Chronicles&trade;</Link> of
this website's past.
</Figure>
</ScreenShot>
<HorizontalRule />
<Divider />
<Marquee>
🚨 <strong>Trigger warning:</strong> excessive marquees, animated GIFs, Comic Sans, popups,{" "}
<CodeInline>
🚨 Trigger warning: excessive marquees, animated GIFs, Comic Sans, popups,{" "}
<CodeInline
css={{
fontSize: "0.85em",
fontWeight: 400,
}}
>
color: <span style={{ color: "#32cd32" }}>limegreen</span>
</CodeInline>{" "}
ahead...
</Marquee>
<p style={{ marginTop: 0 }}>
<Link
href="/y2k/"
prefetch={false}
css={{
"&:hover": {
// classic windows 9x hand cursor easter egg
cursor: `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto`,
},
}}
>
<WindowsIcon /> Click here for the{" "}
<strong>
<em>full</em>
</strong>{" "}
experience anyway.
</Link>
</p>
<Link
href="/y2k/"
prefetch={false}
css={{
"&:hover": {
// classic windows 9x hand cursor easter egg
cursor: `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto`,
},
fontSize: "0.95em",
}}
>
<Icon as={Windows95Logo} /> Click here for the <em>full</em> experience anyway.
</Link>
<figure style={{ margin: 0 }}>
<ScreenShot as="figure">
<IFrame
src="https://jakejarvis.github.io/my-first-website/"
title="My Terrible, Horrible, No Good, Very Bad First Website"
@ -103,68 +118,73 @@ const Previously = () => {
<Link href="https://jakejarvis.github.io/my-first-website/">November 2001</Link> (
<Link href="https://github.com/jakejarvis/my-first-website">view source</Link>)
</figcaption>
</figure>
</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2002_02}>February 2002</Figure>
<ScreenShot src={img_2002_02}>February 2002</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2002_10}>October 2002</Figure>
<ScreenShot src={img_2002_10}>October 2002</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2003_08}>August 2003</Figure>
<ScreenShot src={img_2003_08}>August 2003</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2004_11}>November 2004</Figure>
<ScreenShot src={img_2004_11}>November 2004</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2006_04}>April 2006</Figure>
<ScreenShot src={img_2006_04}>April 2006</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2006_05}>May 2006</Figure>
<ScreenShot src={img_2006_05}>May 2006</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2007_01}>January 2007</Figure>
<ScreenShot src={img_2007_01}>January 2007</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2007_04}>April 2007</Figure>
<ScreenShot src={img_2007_04}>April 2007</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2007_05}>May 2007</Figure>
<ScreenShot src={img_2007_05}>May 2007</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2009_07}>July 2009</Figure>
<ScreenShot src={img_2009_07}>July 2009</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2012_09} href="https://focused-knuth-7bc10d.netlify.app/" alt="September 2012">
<ScreenShot src={img_2012_09} href="https://focused-knuth-7bc10d.netlify.app/" alt="September 2012">
<Link href="https://focused-knuth-7bc10d.netlify.app/">September 2012</Link> (
<Link href="https://github.com/jakejarvis/jarv.is/tree/v1">view source</Link>)
</Figure>
</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2018_04} href="https://hungry-mayer-40e790.netlify.app/" alt="April 2018">
<ScreenShot src={img_2018_04} href="https://hungry-mayer-40e790.netlify.app/" alt="April 2018">
<Link href="https://hungry-mayer-40e790.netlify.app/">April 2018</Link> (
<Link href="https://github.com/jakejarvis/jarv.is/tree/v2">view source</Link>)
</Figure>
</ScreenShot>
<HorizontalRule />
<Divider />
<Figure src={img_2020_03} href="https://quiet-truffle-92842d.netlify.app/" alt="March 2020">
<ScreenShot
src={img_2020_03}
href="https://quiet-truffle-92842d.netlify.app/"
alt="March 2020"
css={{ marginBottom: 0 }}
>
<Link href="https://quiet-truffle-92842d.netlify.app/">March 2020</Link> (
<Link href="https://github.com/jakejarvis/jarv.is-hugo">view source</Link>)
</Figure>
</ScreenShot>
</Content>
</>
);
@ -172,18 +192,30 @@ const Previously = () => {
// a complete sh*tshow of "global" overrides, mainly to compensate for font change
Previously.getLayout = (page: ReactElement) => {
// only declare Comic Neue typeface if/when this page is loaded.
// note: other "global" styles for this page are declared via the `css={{...}}` prop below instead, because these
// persist when navigating away to a different page.
globalCss({
"@font-face": [...ComicNeue.family],
})();
return (
<Layout
css={{
fontFamily: '"Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif',
fontWeight: 600,
header: {
"& em": {
fontStyle: "revert !important",
},
"& header": {
// title text
"& > nav > a:first-of-type > span:last-of-type": {
fontSize: "1.4em",
fontWeight: 700,
},
// menu item text
"& > nav > ul > li > a > span": {
fontSize: "1.1em",
@ -192,38 +224,12 @@ Previously.getLayout = (page: ReactElement) => {
},
},
"main > div > div": {
"& main > div > div": {
fontSize: "1.1em",
textAlign: "center",
"& em": {
fontStyle: "revert !important",
},
"& p": {
fontSize: "0.95em",
},
"& strong": {
fontWeight: 900,
},
"& code": {
fontSize: "0.85em",
fontWeight: 400,
},
"& hr": {
margin: "1em auto",
},
"& figcaption": {
fontSize: "0.9em",
lineHeight: 1.5,
color: "$medium",
textAlign: "center",
},
"& figure:last-of-type": {
marginBottom: 0,
},
},
"footer > div": {
"& footer > div": {
fontSize: "0.95em",
},
}}

View File

@ -286,9 +286,9 @@
js-tokens "^4.0.0"
"@babel/parser@^7.12.7", "@babel/parser@^7.16.7", "@babel/parser@^7.18.0":
version "7.18.0"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.0.tgz#10a8d4e656bc01128d299a787aa006ce1a91e112"
integrity sha512-AqDccGC+m5O/iUStSJy3DGRIUFu7WbY/CppZYwrEUB4N0tZlnI8CSTsgL7v5fHVFmUbRv2sd+yy27o8Ydt4MGg==
version "7.18.3"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.3.tgz#39e99c7b0c4c56cef4d1eed8de9f506411c2ebc2"
integrity sha512-rL50YcEuHbbauAFAysNsJA4/f89fGTOBRNs9P81sniKnKAr4xULe5AecolcsKbi88xu0ByWYDj/S1AJ3FSFuSQ==
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.17.12":
version "7.17.12"
@ -984,17 +984,17 @@
"@babel/plugin-transform-typescript" "^7.17.12"
"@babel/runtime-corejs3@^7.10.2":
version "7.18.2"
resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.18.2.tgz#c8bd68f520c8c5e82698a53ad3ec8b712b735580"
integrity sha512-HpagHkRJkbIS3jt9Vd/ESmaQ0AzkMZai0ahICwpTam+pVCaz7zExPlzLcEfsNokgKM9LJtk2jN/Su8OKdhFIKQ==
version "7.18.3"
resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.18.3.tgz#52f0241a31e0ec61a6187530af6227c2846bd60c"
integrity sha512-l4ddFwrc9rnR+EJsHsh+TJ4A35YqQz/UqcjtlX2ov53hlJYG5CxtQmNZxyajwDVmCxwy++rtvGU5HazCK4W41Q==
dependencies:
core-js-pure "^3.20.2"
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.9", "@babel/runtime@^7.8.4":
version "7.18.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.2.tgz#674575748fa99cf03694e77fc00de8e5117b42a0"
integrity sha512-mTV1PibQHr88R1p4nH/uhR/TJ0mXGEgKTx6Mnd1cn/DSA9r8fqbd+d31xujI2C1pRWtxjy+HAcmtB+MEcF4VNg==
version "7.18.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
dependencies:
regenerator-runtime "^0.13.4"
@ -2152,9 +2152,9 @@ camelcase@^6.2.0:
integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
caniuse-lite@^1.0.30001332:
version "1.0.30001342"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001342.tgz#87152b1e3b950d1fbf0093e23f00b6c8e8f1da96"
integrity sha512-bn6sOCu7L7jcbBbyNhLg0qzXdJ/PMbybZTH/BA6Roet9wxYRm6Tr9D0s0uhLkOZ6MSG+QU6txUgdpr3MXIVqjA==
version "1.0.30001343"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001343.tgz#8e1107e30d9a4d2f63782b48ae0a3ce34e2f9c2a"
integrity sha512-8KeCrAtPMabo/XW14B+R9sZYoClx1n0b+WYgwDKZPtWR3TcdvWzdSy7mPyFEmR5WU1St9v1PW6sdO5dkFOEzfA==
ccount@^1.0.0:
version "1.1.0"
@ -2290,7 +2290,7 @@ color-convert@^2.0.1:
color-name@1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
color-name@~1.1.4:
version "1.1.4"
@ -2600,9 +2600,9 @@ eastasianwidth@^0.2.0:
integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
electron-to-chromium@^1.4.118:
version "1.4.138"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.138.tgz#3ec41ca589aaf505dfe2034fde913329af801730"
integrity sha512-IOyp2Seq3w4QLln+yZWcMF3VXhhduz4bwg9gfI+CnP5TkzwNXQ8FCZuwwPsnes73AfWdf5J2n2OXdUwDUspDPQ==
version "1.4.139"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.139.tgz#e634b69769ab4a54626bbd9e1475de872839c89a"
integrity sha512-lYxzcUCjWxxVug+A7UxBCUiVr13TCjfZFYJS9Lq1VpU/ErwV4a6zUQo9dfojuGpw/L/x9REGuBl6ICQPGgbs3g==
emoji-regex@^8.0.0:
version "8.0.0"
@ -3938,16 +3938,16 @@ lit-element@^3.2.0:
lit-html "^2.2.0"
lit-html@^2.2.0:
version "2.2.4"
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.2.4.tgz#95edc7f060743a798303b8e48e331c32ddbeb179"
integrity sha512-IPY0V0z/QWcTduxb6DlP46Un8n6tG+mHSAijGcPozfXTjVkvFLN4/irPzthtq/eC8RU+7CUqh6h4KB7tnRPJfg==
version "2.2.5"
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.2.5.tgz#e2b4fbdb3b57e38a3bce23c8473d72ba0e652ed8"
integrity sha512-e56Y9V+RNA+SGYsWP2DGb/wad5Ccd3xUZYjmcmbeZcnc0wP4zFQRXeXn7W3bbfBekmHDK2dOnuYNYkg0bQjh/w==
dependencies:
"@types/trusted-types" "^2.0.2"
lit@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.4.tgz#4907d071a427620b83653e39a1664dbdacbfb982"
integrity sha512-O7t+uizo1/Br0y+5RaWRzPkd4MsoL4XY2eq7n2wrESyCCjeagq4ERZKsyKX40jbmsz4bAAs7/0qNRX11TuXzoA==
version "2.2.5"
resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.5.tgz#60e8dd5b751fe31f849c64f74f1784a88235d664"
integrity sha512-Ln463c0xJZfzVxBcHddNvFQQ8Z22NK7KgNmrzwFF1iESHUud412RRExzepj18wpTbusgwoTnOYuoTpo9uyNBaQ==
dependencies:
"@lit/reactive-element" "^1.3.0"
lit-element "^3.2.0"
@ -4569,9 +4569,9 @@ micromark-util-events-to-acorn@^1.0.0:
vfile-message "^3.0.0"
micromark-util-html-tag-name@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.0.0.tgz#75737e92fef50af0c6212bd309bc5cb8dbd489ed"
integrity sha512-NenEKIshW2ZI/ERv9HtFNsrn3llSPZtY337LID/24WeLqMzeZhBEE6BQ0vS2ZBjshm5n40chKtJ3qjAbVV8S0g==
version "1.1.0"
resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.1.0.tgz#eb227118befd51f48858e879b7a419fc0df20497"
integrity sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==
micromark-util-normalize-identifier@^1.0.0:
version "1.0.0"