mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-16 18:55:30 -04:00
adding more dumb easter eggs 🐣
This commit is contained in:
@@ -2,13 +2,17 @@
|
||||
|
||||
import Head from "next/head";
|
||||
import { NextSeo } from "next-seo";
|
||||
import dedent from "dedent";
|
||||
import Content from "../components/Content";
|
||||
import PageTitle from "../components/PageTitle";
|
||||
import Link from "../components/Link";
|
||||
import Figure from "../components/Figure";
|
||||
import IFrame from "../components/IFrame";
|
||||
import Code from "../components/CodeInline";
|
||||
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 img_wayback from "../public/static/images/previously/wayback.png";
|
||||
import img_2002_02 from "../public/static/images/previously/2002_02.png";
|
||||
@@ -25,65 +29,76 @@ 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, {
|
||||
width: "1.2em",
|
||||
height: "1.2em",
|
||||
verticalAlign: "-0.15em",
|
||||
marginRight: "0.15em",
|
||||
fill: "currentColor",
|
||||
});
|
||||
|
||||
const Previously = () => (
|
||||
<>
|
||||
<Head>
|
||||
{/* a complete sh*tshow of overrides, mainly to compensate for font change */}
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
body {
|
||||
font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
/* left header */
|
||||
header nav > a:first-of-type span:last-of-type {
|
||||
font-size: 1.4em !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
/* right header */
|
||||
header nav ul a span {
|
||||
font-size: 1.1em !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.1;
|
||||
}
|
||||
/* content */
|
||||
main > div > div {
|
||||
font-size: 1.1em !important;
|
||||
text-align: center;
|
||||
}
|
||||
main > div > div p {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
main > div > div strong {
|
||||
font-weight: 900;
|
||||
}
|
||||
main > div > div code {
|
||||
font-size: 0.85em !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
main > div > div figure:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/* footer */
|
||||
footer > div {
|
||||
font-size: 0.95em !important;
|
||||
}
|
||||
/* components */
|
||||
figcaption,
|
||||
.iframe_caption {
|
||||
margin-top: 0.2em;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
color: var(--colors-medium);
|
||||
text-align: center;
|
||||
}
|
||||
hr {
|
||||
margin: 1em auto !important;
|
||||
}
|
||||
iframe {
|
||||
margin-bottom: 0.6em !important;
|
||||
}`,
|
||||
__html: dedent`
|
||||
body {
|
||||
font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
em {
|
||||
font-style: revert !important;
|
||||
}
|
||||
/* left header */
|
||||
header nav > a:first-of-type span:last-of-type {
|
||||
font-size: 1.4em !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
/* right header */
|
||||
header nav ul a span {
|
||||
font-size: 1.1em !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.1;
|
||||
}
|
||||
/* content */
|
||||
main > div > div {
|
||||
font-size: 1.1em !important;
|
||||
text-align: center;
|
||||
}
|
||||
main > div > div p {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
main > div > div strong {
|
||||
font-weight: 900;
|
||||
}
|
||||
main > div > div code {
|
||||
font-size: 0.85em !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
main > div > div figure:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/* footer */
|
||||
footer > div {
|
||||
font-size: 0.95em !important;
|
||||
}
|
||||
/* components */
|
||||
figcaption,
|
||||
.iframe_caption {
|
||||
margin-top: 0.2em;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
color: var(--colors-medium);
|
||||
text-align: center;
|
||||
}
|
||||
hr {
|
||||
margin: 1em auto !important;
|
||||
}
|
||||
iframe {
|
||||
margin-bottom: 0.6em !important;
|
||||
}`,
|
||||
}}
|
||||
/>
|
||||
</Head>
|
||||
@@ -111,16 +126,28 @@ iframe {
|
||||
|
||||
<HorizontalRule />
|
||||
|
||||
<p>
|
||||
🚨 <strong>Trigger warning:</strong> marquees, Comic Sans, popups,{" "}
|
||||
<Code>
|
||||
<Marquee>
|
||||
🚨 <strong>Trigger warning:</strong> excessive marquees, animated GIFs, Comic Sans, popups,{" "}
|
||||
<CodeInline>
|
||||
color: <span style={{ color: "#32cd32" }}>limegreen</span>
|
||||
</Code>
|
||||
...{" "}
|
||||
<Link href="/y2k/" prefetch={false}>
|
||||
Click for the{" "}
|
||||
</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>
|
||||
<em>full</em>
|
||||
</strong>{" "}
|
||||
experience anyway.
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user