mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-11-20 19:40:52 -05:00
CSS modules ➡️ Stitches 🧵 (#799)
This commit is contained in:
GitHub
@@ -1,33 +1,16 @@
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import Head from "next/head";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { DefaultSeo, SocialProfileJsonLd } from "next-seo";
|
||||
import * as Fathom from "fathom-client";
|
||||
import Layout from "../components/Layout/Layout";
|
||||
import { globalStyles, theme, darkTheme } from "../lib/styles/stitches.config";
|
||||
import * as config from "../lib/config";
|
||||
import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo";
|
||||
import type { ReactElement, ReactNode } from "react";
|
||||
import type { NextPage } from "next";
|
||||
import type { AppProps as NextAppProps } from "next/app";
|
||||
|
||||
// global webfonts -- imported here so they're processed through PostCSS
|
||||
import "@fontsource/inter/latin-400.css";
|
||||
import "@fontsource/inter/latin-500.css";
|
||||
import "@fontsource/inter/latin-700.css";
|
||||
import "@fontsource/inter/variable-full.css";
|
||||
import "@fontsource/roboto-mono/latin-400.css";
|
||||
import "@fontsource/roboto-mono/latin-500.css";
|
||||
import "@fontsource/roboto-mono/latin-700.css";
|
||||
import "@fontsource/roboto-mono/variable.css";
|
||||
import "@fontsource/roboto-mono/variable-italic.css";
|
||||
|
||||
// global styles
|
||||
import "modern-normalize/modern-normalize.css";
|
||||
import "../styles/settings.css";
|
||||
import "../styles/typography.css";
|
||||
import "../styles/index.css";
|
||||
|
||||
// https://nextjs.org/docs/basic-features/layouts#with-typescript
|
||||
export type AppProps = NextAppProps & {
|
||||
Component: NextPage & {
|
||||
@@ -68,28 +51,12 @@ const App = ({ Component, pageProps }: AppProps) => {
|
||||
// allow layout overrides per-page, but default to plain `<Layout />`
|
||||
const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
|
||||
|
||||
// inject body styles defined in ../lib/styles/stitches.config.ts
|
||||
globalStyles();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* static asset preloads */}
|
||||
<Head>
|
||||
{/* TODO: these hrefs will change (unpredictably?) at some point. find a safer way to get them from webpack. */}
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
href="/_next/static/media/inter-latin-variable-full-normal.79d31200.woff2"
|
||||
crossOrigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
href="/_next/static/media/roboto-mono-latin-variable-wghtOnly-normal.3689861c.woff2"
|
||||
crossOrigin="anonymous"
|
||||
/>
|
||||
</Head>
|
||||
|
||||
{/* all SEO config is in ../lib/seo.ts except for canonical URLs, which require access to next router */}
|
||||
{/* all SEO config is in ../lib/config/seo.ts except for canonical URLs, which require access to next router */}
|
||||
<DefaultSeo
|
||||
{...defaultSeo}
|
||||
canonical={canonical}
|
||||
@@ -103,8 +70,16 @@ const App = ({ Component, pageProps }: AppProps) => {
|
||||
/>
|
||||
<SocialProfileJsonLd {...socialProfileJsonLd} />
|
||||
|
||||
{/* NOTE: this *must* come last in this fragment */}
|
||||
<ThemeProvider>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
|
||||
<ThemeProvider
|
||||
// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there
|
||||
attribute="class"
|
||||
value={{
|
||||
light: theme.className,
|
||||
dark: darkTheme.className,
|
||||
}}
|
||||
>
|
||||
{getLayout(<Component {...pageProps} />)}
|
||||
</ThemeProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Html, Head, Main, NextScript } from "next/document";
|
||||
import themes, { toCSS } from "../lib/config/themes";
|
||||
import { getCssText, preloads } from "../lib/styles/stitches.config";
|
||||
import * as config from "../lib/config";
|
||||
|
||||
// https://nextjs.org/docs/advanced-features/custom-document
|
||||
@@ -7,13 +7,12 @@ const Document = () => {
|
||||
return (
|
||||
<Html lang={config.siteLocale?.replace("_", "-")}>
|
||||
<Head>
|
||||
{/* convert themes object into inlined css variables */}
|
||||
<style
|
||||
id="theme-colors"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `:root{${toCSS(themes.light)}}[data-theme="dark"]{${toCSS(themes.dark)}}`,
|
||||
}}
|
||||
/>
|
||||
{/* static asset preloads */}
|
||||
<link rel="preload" as="font" type="font/woff2" href={preloads.fonts.InterVar} crossOrigin="anonymous" />
|
||||
<link rel="preload" as="font" type="font/woff2" href={preloads.fonts.RobotoMonoVar} crossOrigin="anonymous" />
|
||||
|
||||
{/* stitches SSR: https://stitches.dev/blog/using-nextjs-with-stitches#step-3-ssr */}
|
||||
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
|
||||
@@ -3,6 +3,18 @@ import Content from "../components/Content/Content";
|
||||
import PageTitle from "../components/PageTitle/PageTitle";
|
||||
import Link from "../components/Link/Link";
|
||||
import ContactForm from "../components/ContactForm/ContactForm";
|
||||
import { styled } from "../lib/styles/stitches.config";
|
||||
|
||||
const Wrapper = styled(Content, {
|
||||
maxWidth: "600px",
|
||||
margin: "0 auto",
|
||||
});
|
||||
|
||||
const PubKey = styled("code", {
|
||||
fontSize: "0.925em",
|
||||
wordSpacing: "-0.175em",
|
||||
whiteSpace: "normal",
|
||||
});
|
||||
|
||||
const Contact = () => (
|
||||
<>
|
||||
@@ -15,38 +27,23 @@ const Contact = () => (
|
||||
|
||||
<PageTitle>📬 Contact Me</PageTitle>
|
||||
|
||||
<Content>
|
||||
<div className="wrapper">
|
||||
<p>
|
||||
Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
|
||||
<Link href="mailto:jake@jarv.is">email me directly</Link>, send me a{" "}
|
||||
<Link href="https://twitter.com/messages/compose?recipient_id=229769022">direct message on Twitter</Link>, or{" "}
|
||||
<Link href="sms:+1-617-917-3737">text me</Link>.
|
||||
</p>
|
||||
<p>
|
||||
🔐 You can grab my public key here:{" "}
|
||||
<Link href="/pubkey.asc" title="My Public PGP Key" rel="pgpkey authn noopener" forceNewWindow>
|
||||
<code className="pubkey">6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code>
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
<Wrapper>
|
||||
<p>
|
||||
Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
|
||||
<Link href="mailto:jake@jarv.is">email me directly</Link>, send me a{" "}
|
||||
<Link href="https://twitter.com/messages/compose?recipient_id=229769022">direct message on Twitter</Link>, or{" "}
|
||||
<Link href="sms:+1-617-917-3737">text me</Link>.
|
||||
</p>
|
||||
<p>
|
||||
🔐 You can grab my public key here:{" "}
|
||||
<Link href="/pubkey.asc" title="My Public PGP Key" rel="pgpkey authn noopener" forceNewWindow>
|
||||
<PubKey>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</PubKey>
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
|
||||
<ContactForm />
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
<style jsx>{`
|
||||
.wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pubkey {
|
||||
font-size: 0.925em;
|
||||
word-spacing: -0.175em;
|
||||
white-space: normal;
|
||||
}
|
||||
`}</style>
|
||||
<ContactForm />
|
||||
</Wrapper>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@@ -3,9 +3,18 @@ import Content from "../components/Content/Content";
|
||||
import PageTitle from "../components/PageTitle/PageTitle";
|
||||
import Link from "../components/Link/Link";
|
||||
import Video from "../components/Video/Video";
|
||||
import { styled } from "../lib/styles/stitches.config";
|
||||
|
||||
import thumbnail from "../public/static/images/hillary/thumb.png";
|
||||
|
||||
const Copyright = styled("p", {
|
||||
textAlign: "center",
|
||||
fontSize: "0.9em",
|
||||
lineHeight: 1.8,
|
||||
margin: "1.25em 1em 0 1em",
|
||||
color: "$mediumLight",
|
||||
});
|
||||
|
||||
const Hillary = () => (
|
||||
<>
|
||||
<NextSeo
|
||||
@@ -27,7 +36,7 @@ const Hillary = () => (
|
||||
subs="/static/images/hillary/subs.en.vtt"
|
||||
/>
|
||||
|
||||
<p className="copyright">
|
||||
<Copyright>
|
||||
Video is property of{" "}
|
||||
<Link href="https://www.hillaryclinton.com/" style={{ fontWeight: 700 }}>
|
||||
Hillary for America
|
||||
@@ -41,18 +50,8 @@ const Hillary = () => (
|
||||
CNN / WarnerMedia
|
||||
</Link>
|
||||
. © 2016.
|
||||
</p>
|
||||
</Copyright>
|
||||
</Content>
|
||||
|
||||
<style jsx>{`
|
||||
.copyright {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.8;
|
||||
margin: 1.25em 1em 0 1em;
|
||||
color: var(--medium-light);
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
704
pages/index.tsx
704
pages/index.tsx
@@ -1,366 +1,362 @@
|
||||
import Content from "../components/Content/Content";
|
||||
import ColorfulLink from "../components/ColorfulLink/ColorfulLink";
|
||||
import Link, { CustomLinkProps } from "../components/Link/Link";
|
||||
import { styled, keyframes, darkTheme } from "../lib/styles/stitches.config";
|
||||
|
||||
const Wrapper = styled(Content, {
|
||||
fontSize: "1em",
|
||||
lineHeight: 1,
|
||||
});
|
||||
|
||||
const ColorfulLink = ({
|
||||
lightColor,
|
||||
darkColor,
|
||||
...rest
|
||||
}: CustomLinkProps & {
|
||||
lightColor: string;
|
||||
darkColor: string;
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
css={{
|
||||
color: lightColor,
|
||||
backgroundGradientHack: { color: lightColor },
|
||||
|
||||
[`.${darkTheme} &`]: {
|
||||
color: darkColor,
|
||||
backgroundGradientHack: { color: darkColor },
|
||||
},
|
||||
}}
|
||||
{...rest}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const H1 = styled("h1", {
|
||||
margin: "0 0 0.5em -0.03em",
|
||||
fontSize: "1.8em",
|
||||
fontWeight: 500,
|
||||
letterSpacing: "-0.01em",
|
||||
|
||||
"@mobile": {
|
||||
fontSize: "1.5em",
|
||||
},
|
||||
});
|
||||
|
||||
const H2 = styled("h2", {
|
||||
margin: "0.5em 0 0.5em -0.03em",
|
||||
fontSize: "1.35em",
|
||||
fontWeight: 400,
|
||||
letterSpacing: "-0.016em",
|
||||
lineHeight: 1.4,
|
||||
|
||||
"@mobile": {
|
||||
fontSize: "1.2em",
|
||||
},
|
||||
});
|
||||
|
||||
const Paragraph = styled("p", {
|
||||
margin: "0.85em 0",
|
||||
letterSpacing: "-0.004em",
|
||||
lineHeight: 1.7,
|
||||
|
||||
"&:last-of-type": {
|
||||
marginBottom: 0,
|
||||
},
|
||||
|
||||
"@mobile": {
|
||||
fontSize: "0.925em",
|
||||
},
|
||||
});
|
||||
|
||||
const hello = keyframes({
|
||||
"0%": { transform: "rotate(0deg)" },
|
||||
"5%": { transform: "rotate(14deg)" },
|
||||
"10%": { transform: "rotate(-8deg)" },
|
||||
"15%": { transform: "rotate(14deg)" },
|
||||
"20%": { transform: "rotate(-4deg)" },
|
||||
"25%": { transform: "rotate(10deg)" },
|
||||
"30%": { transform: "rotate(0deg)" },
|
||||
// pause for ~9 out of 10 seconds
|
||||
"100%": { transform: "rotate(0deg)" },
|
||||
});
|
||||
|
||||
const Wave = styled("span", {
|
||||
display: "inline-block",
|
||||
marginLeft: "0.1em",
|
||||
fontSize: "1.2em",
|
||||
animation: `${hello} 5s infinite`,
|
||||
animationDelay: "1s",
|
||||
transformOrigin: "65% 80%",
|
||||
willChange: "transform",
|
||||
});
|
||||
|
||||
const PGPKey = styled("sup", {
|
||||
margin: "0 0.15em",
|
||||
fontSize: "0.65em",
|
||||
wordSpacing: "-0.3em",
|
||||
});
|
||||
|
||||
const Quiet = styled("span", {
|
||||
color: "$mediumLight",
|
||||
});
|
||||
|
||||
const EasterEgg = styled(ColorfulLink, {
|
||||
cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
|
||||
});
|
||||
|
||||
const Index = () => (
|
||||
<>
|
||||
<Content>
|
||||
<div>
|
||||
<h1>
|
||||
Hi there! I'm Jake. <span className="wave">👋</span>
|
||||
</h1>
|
||||
<Wrapper>
|
||||
<H1>
|
||||
Hi there! I'm Jake. <Wave>👋</Wave>
|
||||
</H1>
|
||||
|
||||
<h2>
|
||||
I'm a frontend web developer based in{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&fs=1&showinfo=1&rel=0&iv_load_policy=3"
|
||||
title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube'
|
||||
lightColor="#fb4d42"
|
||||
darkColor="#ff5146"
|
||||
>
|
||||
Boston
|
||||
</ColorfulLink>
|
||||
.
|
||||
</h2>
|
||||
<H2>
|
||||
I'm a frontend web developer based in{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&fs=1&showinfo=1&rel=0&iv_load_policy=3"
|
||||
title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube'
|
||||
lightColor="#fb4d42"
|
||||
darkColor="#ff5146"
|
||||
>
|
||||
Boston
|
||||
</ColorfulLink>
|
||||
.
|
||||
</H2>
|
||||
|
||||
<p>
|
||||
I specialize in{" "}
|
||||
<ColorfulLink
|
||||
href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/"
|
||||
title='"The Brutal Lifecycle of JavaScript Frameworks" by Ian Allen'
|
||||
lightColor="#1091b3"
|
||||
darkColor="#6fcbe3"
|
||||
>
|
||||
modern JS frameworks
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="http://vanilla-js.com/"
|
||||
title="The best JS framework in the world by Eric Wastl"
|
||||
lightColor="#f48024"
|
||||
darkColor="#e18431"
|
||||
>
|
||||
vanilla JavaScript
|
||||
</ColorfulLink>{" "}
|
||||
to make nifty{" "}
|
||||
<ColorfulLink href="https://jamstack.wtf/" title="WTF is JAMstack?" lightColor="#04a699" darkColor="#08bbac">
|
||||
JAMstack sites
|
||||
</ColorfulLink>{" "}
|
||||
with dynamic{" "}
|
||||
<ColorfulLink
|
||||
href="https://nodejs.org/en/"
|
||||
title="Node.js Official Website"
|
||||
lightColor="#6fbc4e"
|
||||
darkColor="#84d95f"
|
||||
>
|
||||
Node.js
|
||||
</ColorfulLink>{" "}
|
||||
services. But I'm fluent in non-buzzwords like{" "}
|
||||
<ColorfulLink
|
||||
href="https://stitcher.io/blog/php-in-2020"
|
||||
title='"PHP in 2020" by Brent Roose'
|
||||
lightColor="#8892bf"
|
||||
darkColor="#a4afe3"
|
||||
>
|
||||
PHP
|
||||
</ColorfulLink>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.ruby-lang.org/en/"
|
||||
title="Ruby Official Website"
|
||||
lightColor="#d34135"
|
||||
darkColor="#f95a4d"
|
||||
>
|
||||
Ruby
|
||||
</ColorfulLink>
|
||||
, and{" "}
|
||||
<ColorfulLink
|
||||
href="https://golang.org/"
|
||||
title="Golang Official Website"
|
||||
lightColor="#00acd7"
|
||||
darkColor="#2ad1fb"
|
||||
>
|
||||
Go
|
||||
</ColorfulLink>{" "}
|
||||
too.
|
||||
</p>
|
||||
<Paragraph>
|
||||
I specialize in{" "}
|
||||
<ColorfulLink
|
||||
href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/"
|
||||
title='"The Brutal Lifecycle of JavaScript Frameworks" by Ian Allen'
|
||||
lightColor="#1091b3"
|
||||
darkColor="#6fcbe3"
|
||||
>
|
||||
modern JS frameworks
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="http://vanilla-js.com/"
|
||||
title="The best JS framework in the world by Eric Wastl"
|
||||
lightColor="#f48024"
|
||||
darkColor="#e18431"
|
||||
>
|
||||
vanilla JavaScript
|
||||
</ColorfulLink>{" "}
|
||||
to make nifty{" "}
|
||||
<ColorfulLink href="https://jamstack.wtf/" title="WTF is JAMstack?" lightColor="#04a699" darkColor="#08bbac">
|
||||
JAMstack sites
|
||||
</ColorfulLink>{" "}
|
||||
with dynamic{" "}
|
||||
<ColorfulLink
|
||||
href="https://nodejs.org/en/"
|
||||
title="Node.js Official Website"
|
||||
lightColor="#6fbc4e"
|
||||
darkColor="#84d95f"
|
||||
>
|
||||
Node.js
|
||||
</ColorfulLink>{" "}
|
||||
services. But I'm fluent in non-buzzwords like{" "}
|
||||
<ColorfulLink
|
||||
href="https://stitcher.io/blog/php-in-2020"
|
||||
title='"PHP in 2020" by Brent Roose'
|
||||
lightColor="#8892bf"
|
||||
darkColor="#a4afe3"
|
||||
>
|
||||
PHP
|
||||
</ColorfulLink>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.ruby-lang.org/en/"
|
||||
title="Ruby Official Website"
|
||||
lightColor="#d34135"
|
||||
darkColor="#f95a4d"
|
||||
>
|
||||
Ruby
|
||||
</ColorfulLink>
|
||||
, and{" "}
|
||||
<ColorfulLink href="https://golang.org/" title="Golang Official Website" lightColor="#00acd7" darkColor="#2ad1fb">
|
||||
Go
|
||||
</ColorfulLink>{" "}
|
||||
too.
|
||||
</Paragraph>
|
||||
|
||||
<p>
|
||||
Whenever possible, I also apply my experience in{" "}
|
||||
<ColorfulLink
|
||||
href="https://github.com/jakejarvis/awesome-shodan-queries"
|
||||
title="jakejarvis/awesome-shodan-queries on GitHub"
|
||||
lightColor="#00b81a"
|
||||
darkColor="#57f06d"
|
||||
>
|
||||
application security
|
||||
</ColorfulLink>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.cloudflare.com/learning/serverless/what-is-serverless/"
|
||||
title='"What is serverless computing?" on Cloudflare'
|
||||
lightColor="#0098ec"
|
||||
darkColor="#43b9fb"
|
||||
>
|
||||
serverless stacks
|
||||
</ColorfulLink>
|
||||
, and{" "}
|
||||
<ColorfulLink
|
||||
href="https://xkcd.com/1319/"
|
||||
title='"Automation" on xkcd'
|
||||
lightColor="#ff6200"
|
||||
darkColor="#f46c16"
|
||||
>
|
||||
DevOps automation
|
||||
</ColorfulLink>
|
||||
.
|
||||
</p>
|
||||
<Paragraph>
|
||||
Whenever possible, I also apply my experience in{" "}
|
||||
<ColorfulLink
|
||||
href="https://github.com/jakejarvis/awesome-shodan-queries"
|
||||
title="jakejarvis/awesome-shodan-queries on GitHub"
|
||||
lightColor="#00b81a"
|
||||
darkColor="#57f06d"
|
||||
>
|
||||
application security
|
||||
</ColorfulLink>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.cloudflare.com/learning/serverless/what-is-serverless/"
|
||||
title='"What is serverless computing?" on Cloudflare'
|
||||
lightColor="#0098ec"
|
||||
darkColor="#43b9fb"
|
||||
>
|
||||
serverless stacks
|
||||
</ColorfulLink>
|
||||
, and{" "}
|
||||
<ColorfulLink href="https://xkcd.com/1319/" title='"Automation" on xkcd' lightColor="#ff6200" darkColor="#f46c16">
|
||||
DevOps automation
|
||||
</ColorfulLink>
|
||||
.
|
||||
</Paragraph>
|
||||
|
||||
<p>
|
||||
I fell in love with{" "}
|
||||
<ColorfulLink
|
||||
href="/previously/"
|
||||
title="My Terrible, Horrible, No Good, Very Bad First Websites"
|
||||
lightColor="#4169e1"
|
||||
darkColor="#8ca9ff"
|
||||
>
|
||||
frontend web design
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="/notes/my-first-code/"
|
||||
title="Jake's Bulletin Board, circa 2003"
|
||||
lightColor="#9932cc"
|
||||
darkColor="#d588fb"
|
||||
>
|
||||
backend programming
|
||||
</ColorfulLink>{" "}
|
||||
back when my only source of income was{" "}
|
||||
<span className="birthday">
|
||||
<ColorfulLink
|
||||
href="/birthday/"
|
||||
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
|
||||
lightColor="#e40088"
|
||||
darkColor="#fd40b1"
|
||||
>
|
||||
the Tooth Fairy
|
||||
</ColorfulLink>
|
||||
</span>
|
||||
. <span className="quiet">I've improved a bit since then, I think...</span>
|
||||
</p>
|
||||
<Paragraph>
|
||||
I fell in love with{" "}
|
||||
<ColorfulLink
|
||||
href="/previously/"
|
||||
title="My Terrible, Horrible, No Good, Very Bad First Websites"
|
||||
lightColor="#4169e1"
|
||||
darkColor="#8ca9ff"
|
||||
>
|
||||
frontend web design
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="/notes/my-first-code/"
|
||||
title="Jake's Bulletin Board, circa 2003"
|
||||
lightColor="#9932cc"
|
||||
darkColor="#d588fb"
|
||||
>
|
||||
backend programming
|
||||
</ColorfulLink>{" "}
|
||||
back when my only source of income was{" "}
|
||||
<EasterEgg
|
||||
href="/birthday/"
|
||||
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
|
||||
lightColor="#e40088"
|
||||
darkColor="#fd40b1"
|
||||
>
|
||||
the Tooth Fairy
|
||||
</EasterEgg>
|
||||
. <Quiet>I've improved a bit since then, I think...</Quiet>
|
||||
</Paragraph>
|
||||
|
||||
<p>
|
||||
Over the years, some of my side projects{" "}
|
||||
<ColorfulLink
|
||||
href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/"
|
||||
title='"Student designs iPhone JoeyTracker app" on The Tufts Daily'
|
||||
lightColor="#ff1b1b"
|
||||
darkColor="#f06060"
|
||||
>
|
||||
have
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="/leo/"
|
||||
title="Powncer segment on The Lab with Leo Laporte (G4techTV)"
|
||||
lightColor="#f78200"
|
||||
darkColor="#fd992a"
|
||||
>
|
||||
been
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.google.com/books/edition/The_Facebook_Effect/RRUkLhyGZVgC?hl=en&gbpv=1&dq=%22jake%20jarvis%22&pg=PA226&printsec=frontcover&bsq=%22jake%20jarvis%22"
|
||||
title='"The Facebook Effect" by David Kirkpatrick (Google Books)'
|
||||
lightColor="#f2b702"
|
||||
darkColor="#ffcc2e"
|
||||
>
|
||||
featured
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="https://money.cnn.com/2007/06/01/technology/facebookplatform.fortune/index.htm"
|
||||
title='"The new Facebook is on a roll" on CNN Money'
|
||||
lightColor="#5ebd3e"
|
||||
darkColor="#78df55"
|
||||
>
|
||||
by
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.wired.com/2007/04/our-web-servers/"
|
||||
title='"Middio: A YouTube Scraper for Major Label Music Videos" on Wired'
|
||||
lightColor="#009cdf"
|
||||
darkColor="#29bfff"
|
||||
>
|
||||
various
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="https://gigaom.com/2009/10/06/fresh-faces-in-tech-10-kid-entrepreneurs-to-watch/6/"
|
||||
title='"Fresh Faces in Tech: 10 Kid Entrepreneurs to Watch" on Gigaom'
|
||||
lightColor="#3e49bb"
|
||||
darkColor="#7b87ff"
|
||||
>
|
||||
media
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/"
|
||||
title='"Your Next Client? The CEO's Son" on Advertising Age'
|
||||
lightColor="#973999"
|
||||
darkColor="#db60dd"
|
||||
>
|
||||
outlets
|
||||
</ColorfulLink>
|
||||
.
|
||||
</p>
|
||||
<Paragraph>
|
||||
Over the years, some of my side projects{" "}
|
||||
<ColorfulLink
|
||||
href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/"
|
||||
title='"Student designs iPhone JoeyTracker app" on The Tufts Daily'
|
||||
lightColor="#ff1b1b"
|
||||
darkColor="#f06060"
|
||||
>
|
||||
have
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="/leo/"
|
||||
title="Powncer segment on The Lab with Leo Laporte (G4techTV)"
|
||||
lightColor="#f78200"
|
||||
darkColor="#fd992a"
|
||||
>
|
||||
been
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.google.com/books/edition/The_Facebook_Effect/RRUkLhyGZVgC?hl=en&gbpv=1&dq=%22jake%20jarvis%22&pg=PA226&printsec=frontcover&bsq=%22jake%20jarvis%22"
|
||||
title='"The Facebook Effect" by David Kirkpatrick (Google Books)'
|
||||
lightColor="#f2b702"
|
||||
darkColor="#ffcc2e"
|
||||
>
|
||||
featured
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="https://money.cnn.com/2007/06/01/technology/facebookplatform.fortune/index.htm"
|
||||
title='"The new Facebook is on a roll" on CNN Money'
|
||||
lightColor="#5ebd3e"
|
||||
darkColor="#78df55"
|
||||
>
|
||||
by
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.wired.com/2007/04/our-web-servers/"
|
||||
title='"Middio: A YouTube Scraper for Major Label Music Videos" on Wired'
|
||||
lightColor="#009cdf"
|
||||
darkColor="#29bfff"
|
||||
>
|
||||
various
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="https://gigaom.com/2009/10/06/fresh-faces-in-tech-10-kid-entrepreneurs-to-watch/6/"
|
||||
title='"Fresh Faces in Tech: 10 Kid Entrepreneurs to Watch" on Gigaom'
|
||||
lightColor="#3e49bb"
|
||||
darkColor="#7b87ff"
|
||||
>
|
||||
media
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/"
|
||||
title='"Your Next Client? The CEO's Son" on Advertising Age'
|
||||
lightColor="#973999"
|
||||
darkColor="#db60dd"
|
||||
>
|
||||
outlets
|
||||
</ColorfulLink>
|
||||
.
|
||||
</Paragraph>
|
||||
|
||||
<p>
|
||||
You can find more of my work on{" "}
|
||||
<ColorfulLink
|
||||
href="https://github.com/jakejarvis"
|
||||
title="Jake Jarvis on GitHub"
|
||||
lightColor="#8d4eff"
|
||||
darkColor="#a379f0"
|
||||
>
|
||||
GitHub
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.linkedin.com/in/jakejarvis/"
|
||||
title="Jake Jarvis on LinkedIn"
|
||||
lightColor="#0073b1"
|
||||
darkColor="#3b9dd2"
|
||||
>
|
||||
LinkedIn
|
||||
</ColorfulLink>
|
||||
. I'm always available to connect over{" "}
|
||||
<ColorfulLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
|
||||
email
|
||||
</ColorfulLink>{" "}
|
||||
<sup className="monospace pgp_key">
|
||||
<ColorfulLink
|
||||
href="/pubkey.asc"
|
||||
rel="pgpkey authn noopener"
|
||||
title="My Public Key"
|
||||
lightColor="#757575"
|
||||
darkColor="#959595"
|
||||
style={{ background: "none" }}
|
||||
forceNewWindow
|
||||
>
|
||||
🔐 2B0C 9CF2 51E6 9A39
|
||||
</ColorfulLink>
|
||||
</sup>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://twitter.com/jakejarvis"
|
||||
title="Jake Jarvis on Twitter"
|
||||
lightColor="#00acee"
|
||||
darkColor="#3bc9ff"
|
||||
>
|
||||
Twitter
|
||||
</ColorfulLink>
|
||||
, or{" "}
|
||||
<ColorfulLink
|
||||
href="sms:+1-617-917-3737"
|
||||
title="Send SMS to +1 (617) 917-3737"
|
||||
lightColor="#6fcc01"
|
||||
darkColor="#8edb34"
|
||||
>
|
||||
SMS
|
||||
</ColorfulLink>{" "}
|
||||
as well!
|
||||
</p>
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
<style jsx>{`
|
||||
div {
|
||||
font-size: 1.1em;
|
||||
line-height: 1;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 0.5em -0.03em;
|
||||
font-size: 1.8em;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
h2 {
|
||||
margin: 0.5em 0 0.5em -0.03em;
|
||||
font-size: 1.35em;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.016em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
p {
|
||||
margin: 0.85em 0;
|
||||
letter-spacing: -0.004em;
|
||||
line-height: 1.7;
|
||||
}
|
||||
p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.wave {
|
||||
display: inline-block;
|
||||
margin-left: 0.1em;
|
||||
font-size: 1.2em;
|
||||
animation: wave 5s infinite;
|
||||
animation-delay: 1s;
|
||||
transform-origin: 65% 80%;
|
||||
will-change: transform;
|
||||
}
|
||||
.pgp_key {
|
||||
margin: 0 0.15em;
|
||||
font-size: 0.65em;
|
||||
word-spacing: -0.3em;
|
||||
}
|
||||
.quiet {
|
||||
color: var(--medium-light);
|
||||
}
|
||||
.birthday :global(a:hover) {
|
||||
/* magic wand cursor easter egg */
|
||||
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>")
|
||||
5 5,
|
||||
auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
p {
|
||||
font-size: 0.925em;
|
||||
}
|
||||
}
|
||||
|
||||
/* https://jarv.is/notes/css-waving-hand-emoji/ */
|
||||
@keyframes wave {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
5% {
|
||||
transform: rotate(14deg);
|
||||
}
|
||||
10% {
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
15% {
|
||||
transform: rotate(14deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
// pause for 3.5 out of 5 seconds
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
<Paragraph>
|
||||
You can find more of my work on{" "}
|
||||
<ColorfulLink
|
||||
href="https://github.com/jakejarvis"
|
||||
title="Jake Jarvis on GitHub"
|
||||
lightColor="#8d4eff"
|
||||
darkColor="#a379f0"
|
||||
>
|
||||
GitHub
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.linkedin.com/in/jakejarvis/"
|
||||
title="Jake Jarvis on LinkedIn"
|
||||
lightColor="#0073b1"
|
||||
darkColor="#3b9dd2"
|
||||
>
|
||||
LinkedIn
|
||||
</ColorfulLink>
|
||||
. I'm always available to connect over{" "}
|
||||
<ColorfulLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
|
||||
email
|
||||
</ColorfulLink>{" "}
|
||||
<PGPKey>
|
||||
<ColorfulLink
|
||||
href="/pubkey.asc"
|
||||
rel="pgpkey authn noopener"
|
||||
title="My Public Key"
|
||||
lightColor="#757575"
|
||||
darkColor="#959595"
|
||||
style={{ background: "none" }}
|
||||
forceNewWindow
|
||||
>
|
||||
<code>🔐 2B0C 9CF2 51E6 9A39</code>
|
||||
</ColorfulLink>
|
||||
</PGPKey>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://twitter.com/jakejarvis"
|
||||
title="Jake Jarvis on Twitter"
|
||||
lightColor="#00acee"
|
||||
darkColor="#3bc9ff"
|
||||
>
|
||||
Twitter
|
||||
</ColorfulLink>
|
||||
, or{" "}
|
||||
<ColorfulLink
|
||||
href="sms:+1-617-917-3737"
|
||||
title="Send SMS to +1 (617) 917-3737"
|
||||
lightColor="#6fcc01"
|
||||
darkColor="#8edb34"
|
||||
>
|
||||
SMS
|
||||
</ColorfulLink>{" "}
|
||||
as well!
|
||||
</Paragraph>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
export default Index;
|
||||
|
||||
@@ -3,9 +3,18 @@ import Content from "../components/Content/Content";
|
||||
import PageTitle from "../components/PageTitle/PageTitle";
|
||||
import Link from "../components/Link/Link";
|
||||
import Video from "../components/Video/Video";
|
||||
import { styled } from "../lib/styles/stitches.config";
|
||||
|
||||
import thumbnail from "../public/static/images/leo/thumb.png";
|
||||
|
||||
const Copyright = styled("p", {
|
||||
textAlign: "center",
|
||||
fontSize: "0.9em",
|
||||
lineHeight: 1.8,
|
||||
margin: "1.25em 1em 0 1em",
|
||||
color: "$mediumLight",
|
||||
});
|
||||
|
||||
const Leo = () => (
|
||||
<>
|
||||
<NextSeo
|
||||
@@ -28,7 +37,7 @@ const Leo = () => (
|
||||
subs="/static/images/leo/subs.en.vtt"
|
||||
/>
|
||||
|
||||
<p className="copyright">
|
||||
<Copyright>
|
||||
Video is property of{" "}
|
||||
<Link href="https://web.archive.org/web/20070511004304/http://www.g4techtv.ca/" style={{ fontWeight: 700 }}>
|
||||
G4techTV Canada
|
||||
@@ -38,18 +47,8 @@ const Leo = () => (
|
||||
Leo Laporte
|
||||
</Link>
|
||||
. © 2007 G4 Media, Inc.
|
||||
</p>
|
||||
</Copyright>
|
||||
</Content>
|
||||
|
||||
<style jsx>{`
|
||||
.copyright {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.8;
|
||||
margin: 1.25em 1em 0 1em;
|
||||
color: var(--medium-light);
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable camelcase */
|
||||
|
||||
import Head from "next/head";
|
||||
import { NextSeo } from "next-seo";
|
||||
import Content from "../components/Content/Content";
|
||||
import PageTitle from "../components/PageTitle/PageTitle";
|
||||
@@ -23,11 +24,69 @@ 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";
|
||||
|
||||
import "@fontsource/comic-neue/latin-400.css";
|
||||
import "@fontsource/comic-neue/latin-700.css";
|
||||
|
||||
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;
|
||||
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>
|
||||
|
||||
<NextSeo
|
||||
title="Previously on..."
|
||||
description="An incredibly embarrassing and somewhat painful trip down this site's memory lane..."
|
||||
@@ -152,62 +211,6 @@ const Previously = () => (
|
||||
)
|
||||
</Figure>
|
||||
</Content>
|
||||
|
||||
{/* a complete sh*tshow of overrides, mainly to compensate for font change */}
|
||||
<style jsx global>{`
|
||||
body {
|
||||
font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", var(--font-family-sans-variable);
|
||||
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;
|
||||
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(--medium);
|
||||
text-align: center;
|
||||
}
|
||||
hr {
|
||||
margin: 1em auto !important;
|
||||
}
|
||||
iframe {
|
||||
margin-bottom: 0.6em !important;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@@ -5,10 +5,42 @@ import PageTitle from "../components/PageTitle/PageTitle";
|
||||
import Link from "../components/Link/Link";
|
||||
import RepositoryCard from "../components/RepositoryCard/RepositoryCard";
|
||||
import { OctocatOcticon } from "../components/Icons";
|
||||
import { styled } from "../lib/styles/stitches.config";
|
||||
import { authorSocial } from "../lib/config";
|
||||
import type { GetStaticProps } from "next";
|
||||
import type { RepositoryType } from "../types";
|
||||
|
||||
const Wrapper = styled("div", {
|
||||
display: "flex",
|
||||
flexFlow: "row wrap",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
width: "100%",
|
||||
fontSize: "1.1em",
|
||||
lineHeight: 1.1,
|
||||
});
|
||||
|
||||
const Card = styled(RepositoryCard, {
|
||||
flexGrow: 1,
|
||||
margin: "0.6em",
|
||||
width: "370px",
|
||||
});
|
||||
|
||||
const ViewMore = styled("p", {
|
||||
textAlign: "center",
|
||||
marginBottom: 0,
|
||||
fontSize: "1.1em",
|
||||
fontWeight: 500,
|
||||
});
|
||||
|
||||
const GitHubLogo = styled(OctocatOcticon, {
|
||||
width: "1.2em",
|
||||
height: "1.2em",
|
||||
verticalAlign: "-0.2em",
|
||||
margin: "0 0.15em",
|
||||
fill: "$text",
|
||||
});
|
||||
|
||||
const Projects = ({ repos }) => (
|
||||
<>
|
||||
<NextSeo
|
||||
@@ -21,56 +53,18 @@ const Projects = ({ repos }) => (
|
||||
<PageTitle>💾 Projects</PageTitle>
|
||||
|
||||
<Content>
|
||||
<div className="wrapper">
|
||||
<Wrapper>
|
||||
{repos.map((repo: RepositoryType) => (
|
||||
<div key={repo.name} className="card">
|
||||
<RepositoryCard {...repo} />
|
||||
</div>
|
||||
<Card key={repo.name} {...repo} />
|
||||
))}
|
||||
</div>
|
||||
</Wrapper>
|
||||
|
||||
<p className="view_more">
|
||||
<ViewMore>
|
||||
<Link href={`https://github.com/${authorSocial.github}`}>
|
||||
View more on{" "}
|
||||
<OctocatOcticon
|
||||
fill="currentColor"
|
||||
style={{
|
||||
color: "var(--text)",
|
||||
width: "1.2em",
|
||||
height: "1.2em",
|
||||
verticalAlign: "-0.2em",
|
||||
margin: "0 0.15em",
|
||||
}}
|
||||
/>{" "}
|
||||
GitHub...
|
||||
View more on <GitHubLogo /> GitHub...
|
||||
</Link>
|
||||
</p>
|
||||
</ViewMore>
|
||||
</Content>
|
||||
|
||||
<style jsx>{`
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-grow: 1;
|
||||
margin: 0.5em;
|
||||
width: 370px;
|
||||
}
|
||||
|
||||
.view_more {
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ Y2K.getLayout = (page: ReactElement) => {
|
||||
<Wallpaper
|
||||
image={randomTile}
|
||||
tile
|
||||
style={{
|
||||
css={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
|
||||
Reference in New Issue
Block a user