mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-03 18:06:38 -04:00
only declare Comic Neue font face on /previously
This commit is contained in:
@ -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™</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",
|
||||
},
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user