diff --git a/components/flag.js b/components/flag.js index bb4863e7..340a0c06 100644 --- a/components/flag.js +++ b/components/flag.js @@ -57,9 +57,13 @@ const Base = styled('a')` ${scrolled}; ` -const Flag = props => ( +const Flag = ({props}) => ( - + ) diff --git a/components/hackers-wanted/letter.mdx b/components/hackers-wanted/letter.mdx index 760fe829..194f294f 100644 --- a/components/hackers-wanted/letter.mdx +++ b/components/hackers-wanted/letter.mdx @@ -1,8 +1,5 @@ -# Hackers Wanted - Some people are allergic to unthinking rules and outdated systems. They want the world to be better, more magical, more free. Some also have the creative energy to do something about it—without the need for instructions, and without needing to be asked. These people are hackers. This is our love letter to them, on behalf of a society that’s long failed them. - Some of us have always been overlooked, misunderstood, underappreciated; looked at with wariness instead of wonder; set aside instead of embraced. Throughout most of history, this has been the fate of the hacker. Though no society has ever suffered from having too many—and indeed many have failed their potential by nurturing too few—we’ve been slow to free hackers to do great things. @@ -15,10 +12,8 @@ But for all their qualities—their drive, their ingenuity, their stubborn persi Hollywood and headlines have long been unkind to hackers. The popular image is of shadowy misfits who break into sensitive networks to steal things or hold them hostage—or just to prove that they can. - It’s not that hackers don’t do those things, or that those who do should have a different name. But when we distinguish between good and bad hackers as “white hats” or “black hats” we’re missing the more basic point: the bad ones are just young people we failed, mostly by never asking them to do something great. - Hackers need challenges equal to their gifts, and opportunities equal to their ambitions. Else they’ll grow frustrated and find themselves throwing their talents at whatever or whomever offers the most money or status—which can lead them to dark and tragic places. But this is our problem as much as theirs. More, really. Hackers are a precious natural resource, the lifeblood of our best futures. While we can’t create or micromanage them, we can—and must—support them in healthy directions. @@ -92,11 +87,11 @@ You can be a lone wolf sometimes. But you’ll go further in a pack. Hackers can’t be taught really. They take ownership over their own education. When they find an interesting problem, they figure out what they need to learn and they pursue it with an enthusiasm that we mostly know now only from long memory. We can ensure that the available curriculum is good; we can’t make them read it, nor determine how they’ll read it. But this isn’t to say they aren’t teachable, at least in the sense of taking direction and feedback. They just see the world differently. As we should hope they do. - + The great challenges of our times were shaped in part by our past responses to them. If we truly want to solve them, we need to be willing to turn them over to those who perceive them differently, who can approach them from new angles, with more energy and less baggage. -Put another way, we need to let hackers hack. +Put another way, we need to let hackers hack. So consider this a giant sign in the window: Hackers Wanted. We see you, whether you’re in a Bay Area garage or a rural village that the rest of the world can’t find on the map. We value you. We want to stand alongside you as you build things—crazy, useful, beautiful things; things we may not even understand until you teach us. -The door is open. \ No newline at end of file +The door is open. \ No newline at end of file diff --git a/components/nav.js b/components/nav.js index 3287ee41..2f5fbbcc 100644 --- a/components/nav.js +++ b/components/nav.js @@ -166,7 +166,7 @@ const ToggleContainer = styled(Flex)` } ` -function Header({ unfixed, color, bgColor, dark, fixed, ...props }) { +function Header({ unfixed, color, bgColor, dark, fixed, flag, ...props }) { const [scrolled, setScrolled] = useState(false) const [toggled, setToggled] = useState(false) const [mobile, setMobile] = useState(false) diff --git a/package.json b/package.json index cca063cc..d79d4fb6 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "geopattern": "^1.2.3", "globby": "^11.0.4", "graphql": "^16.6.0", + "gsap": "^3.11.5", "js-confetti": "^0.11.0", "lodash": "^4.17.21", "next": "^12.3.1", diff --git a/pages/hackers-wanted.js b/pages/hackers-wanted.js index 8e8b114a..4d4df931 100644 --- a/pages/hackers-wanted.js +++ b/pages/hackers-wanted.js @@ -1,172 +1,208 @@ -import { Box, Image, Button, Flex, Text } from 'theme-ui' -// import styles from '@sakun/system.css' -import ForceTheme from '../components/force-theme' +import { + Box, + Button, + Card, + Container, + Grid, + Flex, + Heading, + Image, + Link, + Text +} from 'theme-ui' import Meta from '@hackclub/meta' import Head from 'next/head' -import styles from '../styles/Home.module.css' +import NextLink from 'next/link' +import Nav from '../components/nav' +import SlideDown from '../components/slide-down' +import FadeIn from '../components/fade-in' +import Icon from '../components/icon' +import Footer from '../components/footer' +import { keyframes } from '@emotion/react' import Hackers from '../components/hackers-wanted/letter.mdx' -import React, { useEffect, useState } from 'react' -import { useSession, getSession, signIn, signOut } from 'next-auth/react' -import Github from 'next-auth/providers/github' +import ForceTheme from '../components/force-theme' +import { useEffect, useState } from 'react' +import anime from 'animejs/lib/anime.es.js' +import Fade from 'react-reveal/Fade' import useSWR from 'swr' import fetcher from '../lib/fetcher' -import { Fade } from 'react-reveal' -import HButton from '../components/hackers-wanted/button' +import { useSession, getSession, signIn, signOut } from 'next-auth/react' +import Draggable from 'react-draggable' + /** @jsxImportSource theme-ui */ +// cursor credits to https://linear.app/change + const styled = ` -::-webkit-scrollbar { - background-color: #fff; - width: 22px; -} -::-webkit-scrollbar-track { - background: linear-gradient( - 45deg, - #000 25%, - transparent 0, - transparent 75%, - #000 0, - #000 - ), - linear-gradient( - 45deg, - #000 25%, - transparent 0, - transparent 75%, - #000 0, - #000 - ); - background-color: #fff; - background-position: 0 0, 2px 2px; - background-size: 4px 4px; - border-left: 3px solid #000; - width: 10px; -} -::-webkit-scrollbar-thumb { - background-color: #fff; - border: 2px solid #000; - border-right: none; - box-sizing: content-box; - width: 20px; -} -::-webkit-scrollbar-button:horizontal:end:increment, -::-webkit-scrollbar-button:horizontal:start:decrement, -::-webkit-scrollbar-button:vertical:end:increment, -::-webkit-scrollbar-button:vertical:start:decrement { - display: block; -} -::-webkit-scrollbar-button:vertical:start { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' stroke='%23000' d='M.5.5h21v22.375H.5z'/%3E%3Cpath fill='%23000' d='M1 23h20v-2H1zM1.375 12.375h5.5V11h-5.5zM6.875 17.875h6.875V16.5H6.875zM6.875 17.875v-5.5H5.5v5.5zM9.625 5.5V4.125H8.25V5.5zM11 4.125V2.75H9.625v1.375zM19.25 12.375V11h-1.375v1.375zM17.875 11V9.625H16.5V11zM16.5 9.625V8.25h-1.375v1.375zM15.125 8.25V6.875H13.75V8.25zM13.75 6.875V5.5h-1.375v1.375zM12.375 5.5V4.125H11V5.5zM8.25 6.875V5.5H6.875v1.375zM6.875 8.25V6.875H5.5V8.25zM5.5 9.625V8.25H4.125v1.375zM4.125 11V9.625H2.75V11z'/%3E%3Cpath fill='%23000' d='M2.75 12.375V11H1.375v1.375zM15.125 17.875v-5.5H13.75v5.5zM13.75 12.375h5.5V11h-5.5z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - height: 23.38px; -} -::-webkit-scrollbar-button:vertical:start:active { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' stroke='%23000' d='M.5.5h21v22.38H.5z'/%3E%3Cpath fill='%23000' d='M1 23.005h20v-2H1zM1.375 12.378h5.5v-1.375h-5.5zM6.875 17.879h6.875V6.877H6.875zM6.875 17.879v-5.501H5.5v5.5zM9.625 5.501V4.126H8.25v1.375zM11 4.126V2.75H9.625v1.375zM19.25 12.378v-1.375h-1.375v1.375zM17.875 11.002V9.627H13.75v1.375zM16.5 9.627V8.252h-2.75v1.375zM15.125 8.252V6.877H13.75v1.375zM13.75 6.876V5.501h-1.375v1.375zM12.375 5.501V4.126h-2.75v1.375zM12.375 6.876V5.501h-5.5v1.375zM6.875 8.252V6.877H5.5v1.375zM6.875 9.627V8.252h-2.75v1.375zM6.875 11.002V9.627H2.75v1.375z'/%3E%3Cpath fill='%23000' d='M2.75 12.378v-1.375H1.375v1.375zM15.125 17.879v-5.501H13.75v5.5zM13.75 12.378h5.5v-1.375h-5.5z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - height: 23.38px; -} -::-webkit-scrollbar-button:vertical:end { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' stroke='%23000' d='M.5 22.875h21V.5H.5z'/%3E%3Cpath fill='%23000' d='M1 .375h20v2H1zM1.375 11h5.5v1.375h-5.5zM6.875 5.5h6.875v1.375H6.875zM6.875 5.5V11H5.5V5.5zM9.625 17.875v1.375H8.25v-1.375zM11 19.25v1.375H9.625V19.25zM19.25 11v1.375h-1.375V11zM17.875 12.375v1.375H16.5v-1.375zM16.5 13.75v1.375h-1.375V13.75zM15.125 15.125V16.5H13.75v-1.375zM13.75 16.5v1.375h-1.375V16.5zM12.375 17.875v1.375H11v-1.375zM8.25 16.5v1.375H6.875V16.5zM6.875 15.125V16.5H5.5v-1.375zM5.5 13.75v1.375H4.125V13.75zM4.125 12.375v1.375H2.75v-1.375z'/%3E%3Cpath fill='%23000' d='M2.75 11v1.375H1.375V11zM15.125 5.5V11H13.75V5.5zM13.75 11h5.5v1.375h-5.5z'/%3E%3C/svg%3E"); - height: 23.38px; -} -::-webkit-scrollbar-button:vertical:end:active { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' stroke='%23000' d='M.5 22.88h21V.5H.5z'/%3E%3Cpath fill='%23000' d='M1 .375h20v2H1zM1.375 11.002h5.5v1.375h-5.5zM6.875 5.501h6.875v11.002H6.875zM6.875 5.501v5.501H5.5v-5.5zM9.625 17.879v1.375H8.25v-1.375zM11 19.254v1.375H9.625v-1.375zM19.25 11.002v1.375h-1.375v-1.375zM17.875 12.378v1.375H13.75v-1.375zM16.5 13.753v1.375h-2.75v-1.375zM15.125 15.128v1.375H13.75v-1.375zM13.75 16.503v1.375h-1.375v-1.375zM12.375 17.879v1.375h-2.75v-1.375zM12.375 16.503v1.375h-5.5v-1.375zM6.875 15.128v1.375H5.5v-1.375zM6.875 13.753v1.375h-2.75v-1.375zM6.875 12.378v1.375H2.75v-1.375z'/%3E%3Cpath fill='%23000' d='M2.75 11.002v1.375H1.375v-1.375zM15.125 5.501v5.501H13.75v-5.5zM13.75 11.002h5.5v1.375h-5.5z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - height: 23.38px; -} -::-webkit-scrollbar-button:horizontal:start { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' stroke='%23000' d='M.813 22.187v-21h22.375v21z'/%3E%3Cpath fill='%23000' d='M23.313 21.688v-20h-2v20zM12.688 21.313v-5.5h-1.376v5.5zM18.188 15.813V8.936h-1.375v6.876z'/%3E%3Cpath fill='%23000' d='M18.188 15.813h-5.5v1.374h5.5zM5.813 13.063H4.438v1.374h1.375zM4.438 11.688H3.063v1.374h1.374zM12.688 3.438h-1.376v1.374h1.376zM11.313 4.813H9.937v1.375h1.376zM9.938 6.188H8.562v1.375h1.376zM8.563 7.563H7.187v1.375h1.375zM7.188 8.938H5.813v1.374h1.375zM5.813 10.313H4.438v1.374h1.375zM7.188 14.438H5.813v1.374h1.375zM8.563 15.813H7.187v1.374h1.375zM9.938 17.188H8.562v1.375h1.376zM11.313 18.563H9.937v1.375h1.376zM12.688 19.938h-1.376v1.375h1.376zM18.188 7.563h-5.5v1.375h5.5z'/%3E%3Cpath fill='%23000' d='M12.688 8.938v-5.5h-1.376v5.5z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - height: 23.38px; -} -::-webkit-scrollbar-button:horizontal:start:active { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' stroke='%23000' d='M.81 22.19v-21h22.38v21z'/%3E%3Cpath fill='%23000' d='M23.315 21.69v-20h-2v20zM12.688 21.315v-5.5h-1.375v5.5zM18.189 15.815V8.94H7.187v6.875z'/%3E%3Cpath fill='%23000' d='M18.189 15.815h-5.501v1.375h5.5zM5.811 13.065H4.436v1.375h1.375zM4.436 11.69H3.06v1.375h1.375zM12.688 3.44h-1.375v1.375h1.375zM11.312 4.815H9.937V8.94h1.375zM9.937 6.19H8.562v2.75h1.375z'/%3E%3Cpath fill='%23000' d='M8.562 7.565H7.187V8.94h1.375zM7.186 8.94H5.811v1.375h1.375zM5.811 10.315H4.436v2.75h1.375zM7.186 10.315H5.811v5.5h1.375zM8.562 15.815H7.187v1.375h1.375z'/%3E%3Cpath fill='%23000' d='M9.937 15.815H8.562v2.75h1.375zM11.312 15.815H9.937v4.125h1.375zM12.688 19.94h-1.375v1.375h1.375zM18.189 7.565h-5.501V8.94h5.5z'/%3E%3Cpath fill='%23000' d='M12.688 8.94v-5.5h-1.375v5.5z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - height: 23.38px; -} -::-webkit-scrollbar-button:horizontal:end { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' stroke='%23000' d='M23.188 22.188v-21H.813v21z'/%3E%3Cpath fill='%23000' d='M.688 21.687v-20h2v20zM11.313 21.312v-5.5h1.375v5.5zM5.813 15.812V8.937h1.375v6.875zM5.813 15.813h5.5v1.375h-5.5zM18.188 13.063h1.375v1.375h-1.375zM19.563 11.688h1.375v1.375h-1.375zM11.313 3.438h1.375v1.375h-1.375zM12.688 4.813h1.375v1.375h-1.375zM14.063 6.188h1.375v1.375h-1.375zM15.438 7.563h1.375v1.375h-1.375zM16.813 8.938h1.375v1.375h-1.375zM18.188 10.313h1.375v1.375h-1.375zM16.813 14.438h1.375v1.375h-1.375zM15.438 15.813h1.375v1.375h-1.375zM14.063 17.188h1.375v1.375h-1.375zM12.688 18.563h1.375v1.375h-1.375z'/%3E%3Cpath fill='%23000' d='M11.313 19.938h1.375v1.375h-1.375zM5.813 7.563h5.5v1.375h-5.5zM11.313 8.937v-5.5h1.375v5.5z'/%3E%3C/svg%3E"); - height: 23.38px; -} -::-webkit-scrollbar-button:horizontal:end:active { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' stroke='%23000' d='M23.19 22.19v-21H.81v21z'/%3E%3Cpath fill='%23000' d='M.685 21.69v-20h2v20zM11.312 21.315v-5.5h1.375v5.5zM5.811 15.815V8.94h11.002v6.875z'/%3E%3Cpath fill='%23000' d='M5.811 15.815h5.501v1.375H5.811zM18.189 13.065h1.375v1.375h-1.375zM19.564 11.69h1.375v1.375h-1.375zM11.312 3.44h1.375v1.375h-1.375zM12.688 4.815h1.375V8.94h-1.375zM14.063 6.19h1.375v2.75h-1.375zM15.438 7.565h1.375V8.94h-1.375zM16.814 8.94h1.375v1.375h-1.375zM18.189 10.315h1.375v2.75h-1.375zM16.814 10.315h1.375v5.5h-1.375zM15.438 15.815h1.375v1.375h-1.375zM14.063 15.815h1.375v2.75h-1.375zM12.688 15.815h1.375v4.125h-1.375zM11.312 19.94h1.375v1.375h-1.375zM5.811 7.565h5.501V8.94H5.811z'/%3E%3Cpath fill='%23000' d='M11.312 8.94v-5.5h1.375v5.5z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - height: 23.38px; -} - body { - background: linear-gradient(90deg, #fff 21px, transparent 1%) 50%, - linear-gradient(#fff 21px, transparent 1%) 50%, #000; - background-attachment: fixed; - background-size: 22px 22px; - min-height: 100vh; - min-width: 100vw; - margin: 0; - padding: 0; - overflow-x: hidden; + cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23000' d='M8 5h1v1H8z'/%3E%3Cpath fill='%23fff' d='M8 4h1v1H8z'/%3E%3Cpath fill='%23000' d='M8 6h1v1H8zM8 7h1v1H8zM8 8h1v1H8zM8 9h1v1H8zM8 10h1v1H8zM8 11h1v1H8zM8 12h1v1H8zM8 13h1v1H8zM8 14h1v1H8z'/%3E%3Cpath fill='%23000' d='M8 15h1v1H8z' opacity='.8'/%3E%3Cpath fill='%23fff' d='M8 16h1v1H8zM7 5h1v1H7zM7 4h1v1H7zM7 6h1v1H7zM7 7h1v1H7zM7 8h1v1H7zM7 9h1v1H7zM7 10h1v1H7zM7 11h1v1H7zM7 12h1v1H7zM7 13h1v1H7zM7 14h1v1H7zM7 15h1v1H7zM9 5h1v1H9z'/%3E%3Cpath fill='%23000' d='M9 6h1v1H9zM9 7h1v1H9zM9 8h1v1H9zM9 9h1v1H9zM9 10h1v1H9zM9 11h1v1H9zM9 12h1v1H9zM9 13h1v1H9zM9 14h1v1H9z'/%3E%3Cpath fill='%23fff' d='M9 15h1v1H9zM10 6h1v1h-1z'/%3E%3Cpath fill='%23000' d='M10 7h1v1h-1zM10 8h1v1h-1zM10 9h1v1h-1zM10 10h1v1h-1zM10 11h1v1h-1zM10 12h1v1h-1zM10 13h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M10 14h1v1h-1zM11 7h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 8h1v1h-1zM11 9h1v1h-1zM11 10h1v1h-1zM11 11h1v1h-1zM11 12h1v1h-1zM11 13h1v1h-1zM11 14h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M11 15h1v1h-1zM11 16h1v1h-1zM12 8h1v1h-1z'/%3E%3Cpath fill='%23000' d='M12 9h1v1h-1zM12 10h1v1h-1zM12 11h1v1h-1zM12 12h1v1h-1zM12 13h1v1h-1zM12 14h1v1h-1zM12 15h1v1h-1zM12 16h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 17h1v1h-1zM12 18h1v1h-1zM13 9h1v1h-1z'/%3E%3Cpath fill='%23000' d='M13 10h1v1h-1zM13 11h1v1h-1zM13 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 13h1v1h-1zM13 14h1v1h-1z'/%3E%3Cpath fill='%23000' d='M13 15h1v1h-1zM13 16h1v1h-1zM13 17h1v1h-1zM13 18h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 19h1v1h-1zM14 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M14 11h1v1h-1zM14 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M14 13h1v1h-1zM14 15h1v1h-1zM14 16h1v1h-1z'/%3E%3Cpath fill='%23000' d='M14 17h1v1h-1zM14 18h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M14 19h1v1h-1zM15 11h1v1h-1z'/%3E%3Cpath fill='%23000' d='M15 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M15 13h1v1h-1zM15 17h1v1h-1zM15 18h1v1h-1zM16 12h1v1h-1zM16 13h1v1h-1z'/%3E%3C/svg%3E") 7 4, default; } -a { - color: #000; - text-decoration: underline; -} -hr { - border-top: 0.15em solid #000; -} -.heading, h1 { - font-size: 1em; + font-family: Terminal_Grotesk; + font-weight: 400; + cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23000' d='M8 4h1v1H8zM9 4h1v1H9z'/%3E%3Cpath fill='%23fff' d='M10 4h1v1h-1zM12 4h1v1h-1zM13 3h1v1h-1zM14 3h1v1h-1z'/%3E%3Cpath fill='%23000' d='M13 4h1v1h-1zM14 4h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M15 4h1v1h-1zM8 5h1v1H8zM7 4h1v1H7zM8 3h1v1H8zM9 3h1v1H9zM9 5h1v1H9z'/%3E%3Cpath fill='%23000' d='M10 5h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M11 5h1v1h-1z'/%3E%3Cpath fill='%23000' d='M12 5h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 5h1v1h-1zM14 5h1v1h-1zM9 6h1v1H9zM10 6h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 6h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 6h1v1h-1zM13 6h1v1h-1zM10 7h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 7h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 7h1v1h-1zM10 8h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 8h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 8h1v1h-1zM10 9h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 9h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 9h1v1h-1zM10 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 10h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 10h1v1h-1zM10 11h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 11h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 11h1v1h-1zM10 12h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 12h1v1h-1zM10 13h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 13h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 13h1v1h-1zM10 14h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 14h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 14h1v1h-1zM10 15h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 15h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 15h1v1h-1zM10 16h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 16h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 16h1v1h-1zM10 17h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 17h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 17h1v1h-1zM9 18h1v1H9zM8 18h1v1H8zM7 19h1v1H7z'/%3E%3Cpath fill='%23000' d='M10 18h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 18h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M12 18h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 18h1v1h-1zM14 18h1v1h-1z'/%3E%3Cpath fill='%23000' d='M8 19h1v1H8zM9 19h1v1H9z'/%3E%3Cpath fill='%23fff' d='M10 19h1v1h-1zM11 18h1v1h-1zM12 19h1v1h-1z'/%3E%3Cpath fill='%23000' d='M13 19h1v1h-1zM14 19h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M15 19h1v1h-1zM9 20h1v1H9zM8 20h1v1H8zM13 20h1v1h-1zM14 20h1v1h-1z'/%3E%3C/svg%3E") 7 3, text; } -.heading, -h1, -h2 { - font-family: Chicago; + +h3 { + font-family: Space_Grotesk; + font-weight: 400; + line-height: 1.3; } -h2 { - font-size: 2em; + +h4 { + font-family: Terminal_Grotesk; + font-weight: 400; + font-size: 1.5em; } + +button { + font-family: Terminal_Grotesk; +} + p, ol { - font-family: Geneva; + font-family: Space_Grotesk; + cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23000' d='M8 4h1v1H8zM9 4h1v1H9z'/%3E%3Cpath fill='%23fff' d='M10 4h1v1h-1zM12 4h1v1h-1zM13 3h1v1h-1zM14 3h1v1h-1z'/%3E%3Cpath fill='%23000' d='M13 4h1v1h-1zM14 4h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M15 4h1v1h-1zM8 5h1v1H8zM7 4h1v1H7zM8 3h1v1H8zM9 3h1v1H9zM9 5h1v1H9z'/%3E%3Cpath fill='%23000' d='M10 5h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M11 5h1v1h-1z'/%3E%3Cpath fill='%23000' d='M12 5h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 5h1v1h-1zM14 5h1v1h-1zM9 6h1v1H9zM10 6h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 6h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 6h1v1h-1zM13 6h1v1h-1zM10 7h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 7h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 7h1v1h-1zM10 8h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 8h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 8h1v1h-1zM10 9h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 9h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 9h1v1h-1zM10 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 10h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 10h1v1h-1zM10 11h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 11h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 11h1v1h-1zM10 12h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 12h1v1h-1zM10 13h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 13h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 13h1v1h-1zM10 14h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 14h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 14h1v1h-1zM10 15h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 15h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 15h1v1h-1zM10 16h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 16h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 16h1v1h-1zM10 17h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 17h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 17h1v1h-1zM9 18h1v1H9zM8 18h1v1H8zM7 19h1v1H7z'/%3E%3Cpath fill='%23000' d='M10 18h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 18h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M12 18h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 18h1v1h-1zM14 18h1v1h-1z'/%3E%3Cpath fill='%23000' d='M8 19h1v1H8zM9 19h1v1H9z'/%3E%3Cpath fill='%23fff' d='M10 19h1v1h-1zM11 18h1v1h-1zM12 19h1v1h-1z'/%3E%3Cpath fill='%23000' d='M13 19h1v1h-1zM14 19h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M15 19h1v1h-1zM9 20h1v1H9zM8 20h1v1H8zM13 20h1v1h-1zM14 20h1v1h-1z'/%3E%3C/svg%3E") 7 3, text; + line-height: 1.3; } -di h1 { - color: #0000 !important; - background: - linear-gradient(-90deg,#000 5px,#0000 0) 10px 0, - linear-gradient(#000 0 0) 0 0; - background-size:calc(20*1ch) 200%; - -webkit-background-clip: text; - background-clip: text; - background-repeat:no-repeat; - animation: - t 3s steps(14) forwards; +button, a { + cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23fff' d='M7 4h1v1H7zM8 4h1v1H8zM10 4h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 4h1v1h-1zM12 4h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 4h1v1h-1zM12 3h1v1h-1zM11 3h1v1h-1zM14 4h1v1h-1zM15 4h1v1h-1zM6 5h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 5h1v1H7zM8 5h1v1H8z'/%3E%3Cpath fill='%23fff' d='M9 5h1v1H9z'/%3E%3Cpath fill='%23000' d='M10 5h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 5h1v1h-1zM12 5h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M13 5h1v1h-1zM14 5h1v1h-1zM15 5h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M16 5h1v1h-1zM5 6h1v1H5z'/%3E%3Cpath fill='%23000' d='M6 6h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 6h1v1H7zM8 6h1v1H8z' opacity='.1'/%3E%3Cpath fill='%23000' d='M9 6h1v1H9zM10 6h1v1h-1zM13 6h1v1h-1z'/%3E%3Cpath fill='%23000' d='M14 6h1v1h-1zM15 6h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M16 6h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M17 6h1v1h-1zM18 6h1v1h-1zM5 7h1v1H5z'/%3E%3Cpath fill='%23000' d='M6 7h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 7h1v1H7z' opacity='.1'/%3E%3Cpath fill='%23000' d='M9 7h1v1H9zM10 7h1v1h-1zM13 7h1v1h-1zM16 7h1v1h-1zM17 7h1v1h-1zM18 7h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M19 7h1v1h-1zM6 8h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 8h1v1H7z'/%3E%3Cpath fill='%23000' d='M9 8h1v1H9z' opacity='.1'/%3E%3Cpath fill='%23000' d='M10 8h1v1h-1zM13 8h1v1h-1zM16 8h1v1h-1z'/%3E%3Cpath fill='%23000' d='M17 8h1v1h-1zM18 8h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M19 8h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M20 8h1v1h-1zM18 8h1v1h-1zM17 8h1v1h-1zM18 9h1v1h-1zM17 9h1v1h-1zM18 10h1v1h-1zM17 10h1v1h-1zM18 11h1v1h-1zM17 11h1v1h-1zM17 12h1v1h-1zM17 13h1v1h-1zM17 14h1v1h-1zM6 9h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 9h1v1H7z'/%3E%3Cpath fill='%23000' d='M8 9h1v1H8z' opacity='.1'/%3E%3Cpath fill='%23000' d='M10 9h1v1h-1zM13 9h1v1h-1zM16 9h1v1h-1zM19 9h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M20 9h1v1h-1zM4 10h1v1H4z'/%3E%3Cpath fill='%23000' d='M5 10h1v1H5zM6 10h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 10h1v1H7z' opacity='.1'/%3E%3Cpath fill='%23000' d='M8 10h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 10h1v1H9zM10 10h1v1h-1zM13 10h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M16 10h1v1h-1zM19 10h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M20 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M4 11h1v1H4z'/%3E%3Cpath fill='%23000' d='M5 11h1v1H5zM6 11h1v1H6z' opacity='.1'/%3E%3Cpath fill='%23000' d='M7 11h1v1H7zM8 11h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 11h1v1H9zM16 11h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23fff' d='M16 11h1v1h-1zM16 12h1v1h-1zM16 13h1v1h-1zM16 14h1v1h-1zM16 15h1v1h-1zM16 16h1v1h-1zM15 16h1v1h-1zM15 17h1v1h-1zM14 17h1v1h-1zM13 17h1v1h-1zM12 17h1v1h-1zM11 17h1v1h-1zM10 17h1v1h-1zM10 16h1v1h-1zM10 15h1v1h-1zM10 14h1v1h-1zM10 13h1v1h-1zM10 12h1v1h-1zM10 11h1v1h-1zM10 10h1v1h-1zM9 10h1v1H9zM9 11h1v1H9zM9 12h1v1H9zM9 13h1v1H9zM9 14h1v1H9zM9 15h1v1H9zM8 15h1v1H8zM8 14h1v1H8zM7 14h1v1H7zM7 13h1v1H7zM7 12h1v1H7zM6 12h1v1H6zM5 12h1v1H5zM5 11h1v1H5zM6 11h1v1H6zM7 10h1v1H7zM8 9h1v1H8zM8 8h1v1H8zM8 7h1v1H8zM8 6h1v1H8zM7 6h1v1H7zM7 7h1v1H7zM6 13h1v1H6zM8 13h1v1H8zM9 16h1v1H9zM9 9h1v1H9zM9 8h1v1H9zM11 10h1v1h-1zM11 11h1v1h-1zM11 12h1v1h-1zM11 13h1v1h-1zM11 14h1v1h-1zM11 15h1v1h-1zM11 16h1v1h-1zM12 16h1v1h-1zM13 16h1v1h-1zM14 16h1v1h-1zM14 15h1v1h-1zM14 14h1v1h-1zM14 13h1v1h-1zM14 12h1v1h-1zM14 11h1v1h-1zM14 10h1v1h-1zM14 9h1v1h-1zM14 8h1v1h-1zM14 7h1v1h-1zM14 6h1v1h-1zM13 15h1v1h-1zM13 14h1v1h-1zM13 13h1v1h-1zM13 12h1v1h-1zM13 11h1v1h-1zM13 10h1v1h-1zM12 15h1v1h-1zM12 14h1v1h-1zM12 13h1v1h-1zM12 12h1v1h-1zM12 11h1v1h-1zM12 10h1v1h-1zM12 9h1v1h-1zM12 8h1v1h-1zM12 7h1v1h-1zM12 6h1v1h-1zM12 5h1v1h-1zM11 5h1v1h-1zM11 6h1v1h-1zM11 7h1v1h-1zM11 8h1v1h-1zM11 9h1v1h-1zM15 15h1v1h-1zM15 14h1v1h-1zM15 13h1v1h-1zM15 12h1v1h-1zM15 11h1v1h-1zM15 10h1v1h-1zM15 9h1v1h-1zM15 8h1v1h-1zM15 7h1v1h-1zM15 6h1v1h-1z'/%3E%3Cpath fill='%23000' d='M19 11h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M20 11h1v1h-1z'/%3E%3Cpath fill='%23000' d='M4 12h1v1H4z'/%3E%3Cpath fill='%23000' d='M5 12h1v1H5zM7 12h1v1H7z' opacity='.1'/%3E%3Cpath fill='%23000' d='M8 12h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 12h1v1H9zM17 12h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M18 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M19 12h1v1h-1zM4 13h1v1H4zM3 12h1v1H3zM3 11h1v1H3z'/%3E%3Cpath fill='%23000' d='M5 13h1v1H5z'/%3E%3Cpath fill='%23000' d='M6 13h1v1H6zM8 13h1v1H8zM17 13h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M18 13h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M19 13h1v1h-1zM5 14h1v1H5z'/%3E%3Cpath fill='%23000' d='M6 14h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 14h1v1H7zM17 14h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M18 14h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M19 14h1v1h-1zM6 15h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 15h1v1H7z'/%3E%3Cpath fill='%23000' d='M8 15h1v1H8z' opacity='.1'/%3E%3Cpath fill='%23000' d='M17 15h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M18 15h1v1h-1zM7 16h1v1H7z'/%3E%3Cpath fill='%23000' d='M8 16h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 16h1v1H9zM16 16h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M17 16h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M18 16h1v1h-1zM7 17h1v1H7z'/%3E%3Cpath fill='%23000' d='M8 17h1v1H8zM9 17h1v1H9z'/%3E%3Cpath fill='%23000' d='M10 17h1v1h-1zM11 17h1v1h-1zM12 17h1v1h-1zM13 17h1v1h-1zM14 17h1v1h-1zM15 17h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M16 17h1v1h-1zM17 17h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M18 17h1v1h-1zM8 18h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 18h1v1H9zM10 18h1v1h-1zM11 18h1v1h-1zM12 18h1v1h-1zM13 18h1v1h-1zM14 18h1v1h-1zM15 18h1v1h-1zM16 18h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M17 18h1v1h-1zM8 19h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 19h1v1H9zM10 19h1v1h-1zM11 19h1v1h-1zM12 19h1v1h-1zM13 19h1v1h-1zM14 19h1v1h-1zM15 19h1v1h-1zM16 19h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M17 19h1v1h-1zM9 20h1v1H9zM10 20h1v1h-1zM11 20h1v1h-1zM12 20h1v1h-1zM13 20h1v1h-1zM14 20h1v1h-1zM15 20h1v1h-1zM16 20h1v1h-1z'/%3E%3C/svg%3E") 5 4, grab; } -di p, ol { - color: #0000 !important; - background: - linear-gradient(-90deg,#000 5px,#0000 0) 5px 0, - linear-gradient(#000 0 0) 0 0; - background-size:calc(300*1ch) 200%; - -webkit-background-clip: text; - background-clip: text; - background-repeat:no-repeat; - animation: - t calc(300*.04s) steps(300) forwards; +#modal { + cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23fff' d='M7 4h1v1H7zM8 4h1v1H8zM10 4h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 4h1v1h-1zM12 4h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 4h1v1h-1zM12 3h1v1h-1zM11 3h1v1h-1zM14 4h1v1h-1zM15 4h1v1h-1zM6 5h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 5h1v1H7zM8 5h1v1H8z'/%3E%3Cpath fill='%23fff' d='M9 5h1v1H9z'/%3E%3Cpath fill='%23000' d='M10 5h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 5h1v1h-1zM12 5h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M13 5h1v1h-1zM14 5h1v1h-1zM15 5h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M16 5h1v1h-1zM5 6h1v1H5z'/%3E%3Cpath fill='%23000' d='M6 6h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 6h1v1H7zM8 6h1v1H8z' opacity='.1'/%3E%3Cpath fill='%23000' d='M9 6h1v1H9zM10 6h1v1h-1zM13 6h1v1h-1z'/%3E%3Cpath fill='%23000' d='M14 6h1v1h-1zM15 6h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M16 6h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M17 6h1v1h-1zM18 6h1v1h-1zM5 7h1v1H5z'/%3E%3Cpath fill='%23000' d='M6 7h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 7h1v1H7z' opacity='.1'/%3E%3Cpath fill='%23000' d='M9 7h1v1H9zM10 7h1v1h-1zM13 7h1v1h-1zM16 7h1v1h-1zM17 7h1v1h-1zM18 7h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M19 7h1v1h-1zM6 8h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 8h1v1H7z'/%3E%3Cpath fill='%23000' d='M9 8h1v1H9z' opacity='.1'/%3E%3Cpath fill='%23000' d='M10 8h1v1h-1zM13 8h1v1h-1zM16 8h1v1h-1z'/%3E%3Cpath fill='%23000' d='M17 8h1v1h-1zM18 8h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M19 8h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M20 8h1v1h-1zM18 8h1v1h-1zM17 8h1v1h-1zM18 9h1v1h-1zM17 9h1v1h-1zM18 10h1v1h-1zM17 10h1v1h-1zM18 11h1v1h-1zM17 11h1v1h-1zM17 12h1v1h-1zM17 13h1v1h-1zM17 14h1v1h-1zM6 9h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 9h1v1H7z'/%3E%3Cpath fill='%23000' d='M8 9h1v1H8z' opacity='.1'/%3E%3Cpath fill='%23000' d='M10 9h1v1h-1zM13 9h1v1h-1zM16 9h1v1h-1zM19 9h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M20 9h1v1h-1zM4 10h1v1H4z'/%3E%3Cpath fill='%23000' d='M5 10h1v1H5zM6 10h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 10h1v1H7z' opacity='.1'/%3E%3Cpath fill='%23000' d='M8 10h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 10h1v1H9zM10 10h1v1h-1zM13 10h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M16 10h1v1h-1zM19 10h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M20 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M4 11h1v1H4z'/%3E%3Cpath fill='%23000' d='M5 11h1v1H5zM6 11h1v1H6z' opacity='.1'/%3E%3Cpath fill='%23000' d='M7 11h1v1H7zM8 11h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 11h1v1H9zM16 11h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23fff' d='M16 11h1v1h-1zM16 12h1v1h-1zM16 13h1v1h-1zM16 14h1v1h-1zM16 15h1v1h-1zM16 16h1v1h-1zM15 16h1v1h-1zM15 17h1v1h-1zM14 17h1v1h-1zM13 17h1v1h-1zM12 17h1v1h-1zM11 17h1v1h-1zM10 17h1v1h-1zM10 16h1v1h-1zM10 15h1v1h-1zM10 14h1v1h-1zM10 13h1v1h-1zM10 12h1v1h-1zM10 11h1v1h-1zM10 10h1v1h-1zM9 10h1v1H9zM9 11h1v1H9zM9 12h1v1H9zM9 13h1v1H9zM9 14h1v1H9zM9 15h1v1H9zM8 15h1v1H8zM8 14h1v1H8zM7 14h1v1H7zM7 13h1v1H7zM7 12h1v1H7zM6 12h1v1H6zM5 12h1v1H5zM5 11h1v1H5zM6 11h1v1H6zM7 10h1v1H7zM8 9h1v1H8zM8 8h1v1H8zM8 7h1v1H8zM8 6h1v1H8zM7 6h1v1H7zM7 7h1v1H7zM6 13h1v1H6zM8 13h1v1H8zM9 16h1v1H9zM9 9h1v1H9zM9 8h1v1H9zM11 10h1v1h-1zM11 11h1v1h-1zM11 12h1v1h-1zM11 13h1v1h-1zM11 14h1v1h-1zM11 15h1v1h-1zM11 16h1v1h-1zM12 16h1v1h-1zM13 16h1v1h-1zM14 16h1v1h-1zM14 15h1v1h-1zM14 14h1v1h-1zM14 13h1v1h-1zM14 12h1v1h-1zM14 11h1v1h-1zM14 10h1v1h-1zM14 9h1v1h-1zM14 8h1v1h-1zM14 7h1v1h-1zM14 6h1v1h-1zM13 15h1v1h-1zM13 14h1v1h-1zM13 13h1v1h-1zM13 12h1v1h-1zM13 11h1v1h-1zM13 10h1v1h-1zM12 15h1v1h-1zM12 14h1v1h-1zM12 13h1v1h-1zM12 12h1v1h-1zM12 11h1v1h-1zM12 10h1v1h-1zM12 9h1v1h-1zM12 8h1v1h-1zM12 7h1v1h-1zM12 6h1v1h-1zM12 5h1v1h-1zM11 5h1v1h-1zM11 6h1v1h-1zM11 7h1v1h-1zM11 8h1v1h-1zM11 9h1v1h-1zM15 15h1v1h-1zM15 14h1v1h-1zM15 13h1v1h-1zM15 12h1v1h-1zM15 11h1v1h-1zM15 10h1v1h-1zM15 9h1v1h-1zM15 8h1v1h-1zM15 7h1v1h-1zM15 6h1v1h-1z'/%3E%3Cpath fill='%23000' d='M19 11h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M20 11h1v1h-1z'/%3E%3Cpath fill='%23000' d='M4 12h1v1H4z'/%3E%3Cpath fill='%23000' d='M5 12h1v1H5zM7 12h1v1H7z' opacity='.1'/%3E%3Cpath fill='%23000' d='M8 12h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 12h1v1H9zM17 12h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M18 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M19 12h1v1h-1zM4 13h1v1H4zM3 12h1v1H3zM3 11h1v1H3z'/%3E%3Cpath fill='%23000' d='M5 13h1v1H5z'/%3E%3Cpath fill='%23000' d='M6 13h1v1H6zM8 13h1v1H8zM17 13h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M18 13h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M19 13h1v1h-1zM5 14h1v1H5z'/%3E%3Cpath fill='%23000' d='M6 14h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 14h1v1H7zM17 14h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M18 14h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M19 14h1v1h-1zM6 15h1v1H6z'/%3E%3Cpath fill='%23000' d='M7 15h1v1H7z'/%3E%3Cpath fill='%23000' d='M8 15h1v1H8z' opacity='.1'/%3E%3Cpath fill='%23000' d='M17 15h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M18 15h1v1h-1zM7 16h1v1H7z'/%3E%3Cpath fill='%23000' d='M8 16h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 16h1v1H9zM16 16h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M17 16h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M18 16h1v1h-1zM7 17h1v1H7z'/%3E%3Cpath fill='%23000' d='M8 17h1v1H8zM9 17h1v1H9z'/%3E%3Cpath fill='%23000' d='M10 17h1v1h-1zM11 17h1v1h-1zM12 17h1v1h-1zM13 17h1v1h-1zM14 17h1v1h-1zM15 17h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M16 17h1v1h-1zM17 17h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M18 17h1v1h-1zM8 18h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 18h1v1H9zM10 18h1v1h-1zM11 18h1v1h-1zM12 18h1v1h-1zM13 18h1v1h-1zM14 18h1v1h-1zM15 18h1v1h-1zM16 18h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M17 18h1v1h-1zM8 19h1v1H8z'/%3E%3Cpath fill='%23000' d='M9 19h1v1H9zM10 19h1v1h-1zM11 19h1v1h-1zM12 19h1v1h-1zM13 19h1v1h-1zM14 19h1v1h-1zM15 19h1v1h-1zM16 19h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M17 19h1v1h-1zM9 20h1v1H9zM10 20h1v1h-1zM11 20h1v1h-1zM12 20h1v1h-1zM13 20h1v1h-1zM14 20h1v1h-1zM15 20h1v1h-1zM16 20h1v1h-1z'/%3E%3C/svg%3E") 5 4, grab; } -@keyframes t{ - 0% {background-size:0 200%;} - 12% {background-size:0 200%;} +input, input::placeholder { + font-family: Space_Grotesk; + cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23000' d='M8 4h1v1H8zM9 4h1v1H9z'/%3E%3Cpath fill='%23fff' d='M10 4h1v1h-1zM12 4h1v1h-1zM13 3h1v1h-1zM14 3h1v1h-1z'/%3E%3Cpath fill='%23000' d='M13 4h1v1h-1zM14 4h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M15 4h1v1h-1zM8 5h1v1H8zM7 4h1v1H7zM8 3h1v1H8zM9 3h1v1H9zM9 5h1v1H9z'/%3E%3Cpath fill='%23000' d='M10 5h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M11 5h1v1h-1z'/%3E%3Cpath fill='%23000' d='M12 5h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 5h1v1h-1zM14 5h1v1h-1zM9 6h1v1H9zM10 6h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 6h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 6h1v1h-1zM13 6h1v1h-1zM10 7h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 7h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 7h1v1h-1zM10 8h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 8h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 8h1v1h-1zM10 9h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 9h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 9h1v1h-1zM10 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 10h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 10h1v1h-1zM10 11h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 11h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 11h1v1h-1zM10 12h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 12h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 12h1v1h-1zM10 13h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 13h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 13h1v1h-1zM10 14h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 14h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 14h1v1h-1zM10 15h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 15h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 15h1v1h-1zM10 16h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 16h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 16h1v1h-1zM10 17h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 17h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M12 17h1v1h-1zM9 18h1v1H9zM8 18h1v1H8zM7 19h1v1H7z'/%3E%3Cpath fill='%23000' d='M10 18h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 18h1v1h-1z' opacity='.1'/%3E%3Cpath fill='%23000' d='M12 18h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M13 18h1v1h-1zM14 18h1v1h-1z'/%3E%3Cpath fill='%23000' d='M8 19h1v1H8zM9 19h1v1H9z'/%3E%3Cpath fill='%23fff' d='M10 19h1v1h-1zM11 18h1v1h-1zM12 19h1v1h-1z'/%3E%3Cpath fill='%23000' d='M13 19h1v1h-1zM14 19h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M15 19h1v1h-1zM9 20h1v1H9zM8 20h1v1H8zM13 20h1v1h-1zM14 20h1v1h-1z'/%3E%3C/svg%3E") 7 3, text; } + +// ::-webkit-scrollbar { +// background-color: #000; +// width: 22px; +// } +// ::-webkit-scrollbar-track { +// background: linear-gradient( +// 45deg, +// #fff 25%, +// transparent 0, +// transparent 75%, +// #fff 0, +// #fff +// ), +// linear-gradient( +// 45deg, +// #fff 25%, +// transparent 0, +// transparent 75%, +// #fff 0, +// #fff +// ); +// background-color: #000; +// background-position: 0 0, 2px 2px; +// background-size: 4px 4px; +// border-left: 3px solid #fff; +// width: 10px; +// } +// ::-webkit-scrollbar-thumb { +// background-color: #000; +// border: 2px solid #fff; +// border-right: none; +// box-sizing: content-box; +// width: 20px; +// } + +// ::-webkit-scrollbar-button:vertical:end:increment, +// ::-webkit-scrollbar-button:vertical:start:decrement { +// display: block; +// } +// ::-webkit-scrollbar-button:vertical:start { +// background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' stroke='%23fff' d='M.5.5h21v22.375H.5z'/%3E%3Cpath fill='%23fff' d='M1 23h20v-2H1zM1.375 12.375h5.5V11h-5.5zM6.875 17.875h6.875V16.5H6.875zM6.875 17.875v-5.5H5.5v5.5zM9.625 5.5V4.125H8.25V5.5zM11 4.125V2.75H9.625v1.375zM19.25 12.375V11h-1.375v1.375zM17.875 11V9.625H16.5V11zM16.5 9.625V8.25h-1.375v1.375zM15.125 8.25V6.875H13.75V8.25zM13.75 6.875V5.5h-1.375v1.375zM12.375 5.5V4.125H11V5.5zM8.25 6.875V5.5H6.875v1.375zM6.875 8.25V6.875H5.5V8.25zM5.5 9.625V8.25H4.125v1.375zM4.125 11V9.625H2.75V11z'/%3E%3Cpath fill='%23fff' d='M2.75 12.375V11H1.375v1.375zM15.125 17.875v-5.5H13.75v5.5zM13.75 12.375h5.5V11h-5.5z'/%3E%3C/svg%3E"); +// background-repeat: no-repeat; +// height: 23.38px; +// } +// ::-webkit-scrollbar-button:vertical:start:active { +// background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' stroke='%23fff' d='M.5.5h21v22.38H.5z'/%3E%3Cpath fill='%23fff' d='M1 23.005h20v-2H1zM1.375 12.378h5.5v-1.375h-5.5zM6.875 17.879h6.875V6.877H6.875zM6.875 17.879v-5.501H5.5v5.5zM9.625 5.501V4.126H8.25v1.375zM11 4.126V2.75H9.625v1.375zM19.25 12.378v-1.375h-1.375v1.375zM17.875 11.002V9.627H13.75v1.375zM16.5 9.627V8.252h-2.75v1.375zM15.125 8.252V6.877H13.75v1.375zM13.75 6.876V5.501h-1.375v1.375zM12.375 5.501V4.126h-2.75v1.375zM12.375 6.876V5.501h-5.5v1.375zM6.875 8.252V6.877H5.5v1.375zM6.875 9.627V8.252h-2.75v1.375zM6.875 11.002V9.627H2.75v1.375z'/%3E%3Cpath fill='%23fff' d='M2.75 12.378v-1.375H1.375v1.375zM15.125 17.879v-5.501H13.75v5.5zM13.75 12.378h5.5v-1.375h-5.5z'/%3E%3C/svg%3E"); +// background-repeat: no-repeat; +// height: 23.38px; +// } +// ::-webkit-scrollbar-button:vertical:end { +// background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' stroke='%23fff' d='M.5 22.875h21V.5H.5z'/%3E%3Cpath fill='%23fff' d='M1 .375h20v2H1zM1.375 11h5.5v1.375h-5.5zM6.875 5.5h6.875v1.375H6.875zM6.875 5.5V11H5.5V5.5zM9.625 17.875v1.375H8.25v-1.375zM11 19.25v1.375H9.625V19.25zM19.25 11v1.375h-1.375V11zM17.875 12.375v1.375H16.5v-1.375zM16.5 13.75v1.375h-1.375V13.75zM15.125 15.125V16.5H13.75v-1.375zM13.75 16.5v1.375h-1.375V16.5zM12.375 17.875v1.375H11v-1.375zM8.25 16.5v1.375H6.875V16.5zM6.875 15.125V16.5H5.5v-1.375zM5.5 13.75v1.375H4.125V13.75zM4.125 12.375v1.375H2.75v-1.375z'/%3E%3Cpath fill='%23fff' d='M2.75 11v1.375H1.375V11zM15.125 5.5V11H13.75V5.5zM13.75 11h5.5v1.375h-5.5z'/%3E%3C/svg%3E"); +// height: 23.38px; +// } +// ::-webkit-scrollbar-button:vertical:end:active { +// background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' stroke='%23fff' d='M.5 22.88h21V.5H.5z'/%3E%3Cpath fill='%23fff' d='M1 .375h20v2H1zM1.375 11.002h5.5v1.375h-5.5zM6.875 5.501h6.875v11.002H6.875zM6.875 5.501v5.501H5.5v-5.5zM9.625 17.879v1.375H8.25v-1.375zM11 19.254v1.375H9.625v-1.375zM19.25 11.002v1.375h-1.375v-1.375zM17.875 12.378v1.375H13.75v-1.375zM16.5 13.753v1.375h-2.75v-1.375zM15.125 15.128v1.375H13.75v-1.375zM13.75 16.503v1.375h-1.375v-1.375zM12.375 17.879v1.375h-2.75v-1.375zM12.375 16.503v1.375h-5.5v-1.375zM6.875 15.128v1.375H5.5v-1.375zM6.875 13.753v1.375h-2.75v-1.375zM6.875 12.378v1.375H2.75v-1.375z'/%3E%3Cpath fill='%23fff' d='M2.75 11.002v1.375H1.375v-1.375zM15.125 5.501v5.501H13.75v-5.5zM13.75 11.002h5.5v1.375h-5.5z'/%3E%3C/svg%3E"); +// background-repeat: no-repeat; +// height: 23.38px; +// } ` -const Hack = ({ children, ...props }) => { +const CTA = ({ image, text, link, click, ...props }) => { return ( - + + + {text} + + ) +} + +const Hack = ({ children, delay, ...props }) => { + return ( + @{children} @@ -175,14 +211,14 @@ const Hack = ({ children, ...props }) => { } const Page = () => { + const [scrolled, setScrolled] = useState(false) + const { data: hackers } = useSWR( 'https://airbridge.hackclub.com/v0.1/Hackers%20Wanted/hackers', fetcher, { refreshInterval: 1000 } ) - console.log(hackers) - const { data: session, status } = useSession() async function sign() { @@ -200,127 +236,910 @@ const Page = () => { } } + useEffect(() => { + const onScroll = () => { + const newState = window.scrollY >= 16 + setScrolled(newState) + console.log(scrolled) + } + + if (typeof window !== 'undefined') { + window.addEventListener('scroll', onScroll) + } + }, []) + + useEffect(() => { + if (scrolled) { + anime.timeline().add({ + targets: '#nav', + duration: 8000, + opacity: 0 + }) + anime + .timeline() + .add({ + targets: '#cta1', + duration: 500, + opacity: 1 + }) + .add({ + targets: '#cta2', + duration: 500, + opacity: 1 + }) + .add({ + targets: '#cta3', + duration: 500, + opacity: 1 + }) + .add({ + targets: '#cta4', + duration: 500, + opacity: 1 + }) + } else { + anime.timeline().add({ + targets: '#nav', + duration: 8000, + opacity: 1 + }) + anime + .timeline() + .add({ + targets: '#cta4', + duration: 500, + opacity: 0 + }) + .add({ + targets: '#cta3', + duration: 500, + opacity: 0 + }) + .add({ + targets: '#cta2', + duration: 500, + opacity: 0 + }) + .add({ + targets: '#cta1', + duration: 500, + opacity: 0 + }) + } + }, [scrolled]) + + function displayModal() { + document.getElementById('modal').style.display = 'flex' + } + + function closeModal() { + document.getElementById('modal').style.display = 'none' + } + return ( <> - +