mirror of
https://github.com/System-End/site.git
synced 2026-04-19 20:55:09 +00:00
revenge of the scrapyard(ith) (#1511)
This commit is contained in:
Finbar
GitHub
parent
1280e591aa
commit
2b711b46ad
2 changed files with 184 additions and 0 deletions
182
components/index/cards/scrapyard.js
Normal file
182
components/index/cards/scrapyard.js
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
import CardModel from './card-model'
|
||||||
|
import { Box, Flex, Grid, Image, Text, Heading } from 'theme-ui'
|
||||||
|
import Buttons from './button'
|
||||||
|
import { Global } from '@emotion/react'
|
||||||
|
|
||||||
|
/** @jsxImportSource theme-ui */
|
||||||
|
|
||||||
|
export default function Scrapyard() {
|
||||||
|
return (
|
||||||
|
|
||||||
|
<CardModel
|
||||||
|
color="white"
|
||||||
|
sx={{
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
backgroundColor: '#90A8E1',
|
||||||
|
fontFamily: "p22stanyan",
|
||||||
|
objectFit: "contain"
|
||||||
|
}}
|
||||||
|
position={[null, 'bottom', 'bottom']}
|
||||||
|
|
||||||
|
>
|
||||||
|
<Global
|
||||||
|
styles={`
|
||||||
|
@font-face {
|
||||||
|
font-family: 'p22stanyan';
|
||||||
|
src: url('https://use.typekit.net/af/444506/00000000000000007735b3cd/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3') format('woff2');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'moonblossom';
|
||||||
|
src: url('https://use.typekit.net/af/bf03be/00000000000000007735fbe5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3') format('woff2');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
/>
|
||||||
|
<Grid columns={[1, 1, 1]} sx={{ position: 'relative', zIndex: 2 }}>
|
||||||
|
<Flex
|
||||||
|
sx={{
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
position: 'relative',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="https://cloud-4fnsp2wse-hack-club-bot.vercel.app/0scrapyard.png"
|
||||||
|
sx={{
|
||||||
|
width: ['400px', '450px', '500px'],
|
||||||
|
mt: ['30px', '40px', '45px'],
|
||||||
|
mb: ['30px', '30px', '30px'],
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 3,
|
||||||
|
ml: '0px',
|
||||||
|
mr: '0px',
|
||||||
|
fontSize: ['48px', 4, 5],
|
||||||
|
color: 'white',
|
||||||
|
// mx: 'auto'
|
||||||
|
}}
|
||||||
|
alt="Scrapyard"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<Flex
|
||||||
|
sx={{
|
||||||
|
flexDirection: ['row', 'row', 'column'],
|
||||||
|
justifyContent: 'space-between'
|
||||||
|
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
background: "url('https://scrapyard.hackclub.com/elements/ripped-paper.png')",
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
display: 'block',
|
||||||
|
width: 'min(500px, calc(100vw - 30px))',
|
||||||
|
filter: 'drop-shadow(5px 5px 5px #000000AA)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 20
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Heading
|
||||||
|
as="h2"
|
||||||
|
sx={{
|
||||||
|
fontFamily: 'moonblossom',
|
||||||
|
textAlign: 'center',
|
||||||
|
margin: '8%',
|
||||||
|
fontSize: '22px',
|
||||||
|
color: '#1f2d3d'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Build stupid stuff, get stupid prizes.
|
||||||
|
</Heading>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
zIndex: 1,
|
||||||
|
width: 'max-content',
|
||||||
|
backgroundImage: "url('https://scrapyard.hackclub.com/elements/yellow-strip@stretch.svg')",
|
||||||
|
backgroundRepeat: 'no-repeat',
|
||||||
|
backgroundSize: '100% 100%',
|
||||||
|
width: '75%',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 30,
|
||||||
|
top: '-15%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
// pt: '3%',
|
||||||
|
filter: 'drop-shadow(5px 5px 5px #00000099)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Heading
|
||||||
|
as="h2"
|
||||||
|
sx={{
|
||||||
|
fontFamily: 'p22stanyan',
|
||||||
|
mx: '8%',
|
||||||
|
my: '3%',
|
||||||
|
p: 0,
|
||||||
|
wordBreak: 'keep-all',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
width: 'min-content',
|
||||||
|
fontSize: ['1.2em', '1.4em'],
|
||||||
|
color: '#1f2d3d'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
100+ Cities worldwide – March 15-16
|
||||||
|
</Heading>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Buttons
|
||||||
|
href="https://scrapyard.hackclub.com/"
|
||||||
|
target="_blank"
|
||||||
|
|
||||||
|
rel="noopener"
|
||||||
|
primary="#fde778"
|
||||||
|
icon = "door-enter"
|
||||||
|
id="43"
|
||||||
|
zIndex={999}
|
||||||
|
sx = {{zIndex: 9999999, left: ["50%", "50%", "0%"], color: '#1f2d3d'}}
|
||||||
|
>
|
||||||
|
|
||||||
|
Learn More
|
||||||
|
</Buttons>
|
||||||
|
|
||||||
|
|
||||||
|
</Grid>
|
||||||
|
<Image
|
||||||
|
src="https://cloud-hqnbfdg3v-hack-club-bot.vercel.app/0image__14_.png"
|
||||||
|
sx={{
|
||||||
|
width: ['100%', '100%', '100%'],
|
||||||
|
mb: ['0px', '0px', '0px'],
|
||||||
|
mr: ['0px', '0px', '0px'],
|
||||||
|
ml: ['0px', '0px', '0px'],
|
||||||
|
position: 'absolute',
|
||||||
|
zIndex: 1,
|
||||||
|
left: 0,
|
||||||
|
bottom: 0,
|
||||||
|
fontSize: ['36px', 4, 5],
|
||||||
|
color: 'white',
|
||||||
|
objectFit: 'cover',
|
||||||
|
height: '100%',
|
||||||
|
mx: 0
|
||||||
|
}}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</CardModel>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -40,6 +40,7 @@ import Comma from '../components/comma'
|
||||||
import Haxidraw from '../components/index/cards/haxidraw'
|
import Haxidraw from '../components/index/cards/haxidraw'
|
||||||
import Onboard from '../components/index/cards/onboard'
|
import Onboard from '../components/index/cards/onboard'
|
||||||
import Trail from '../components/index/cards/trail'
|
import Trail from '../components/index/cards/trail'
|
||||||
|
import Scrapyard from '../components/index/cards/scrapyard'
|
||||||
import Neighborhood from '../components/index/cards/neighborhood'
|
import Neighborhood from '../components/index/cards/neighborhood'
|
||||||
/** @jsxImportSource theme-ui */
|
/** @jsxImportSource theme-ui */
|
||||||
|
|
||||||
|
|
@ -683,6 +684,7 @@ function Page({
|
||||||
</Box>
|
</Box>
|
||||||
<Neighborhood />
|
<Neighborhood />
|
||||||
<Trail />
|
<Trail />
|
||||||
|
<Scrapyard />
|
||||||
<Slack slackKey={slackKey} data={slackData} events={events} />
|
<Slack slackKey={slackKey} data={slackData} events={events} />
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue