Skip to content
Permalink
Browse files

All-new recap site 🌲

  • Loading branch information...
lachlanjc committed Aug 14, 2019
1 parent 3fa7d2e commit 5f55ae915a6e4762d8e2641383000f5770960e49
Showing with 1,189 additions and 41 deletions.
  1. +4 βˆ’0 .babelrc
  2. +1 βˆ’1 README.md
  3. +12 βˆ’0 components/avatar.js
  4. +200 βˆ’0 components/blocks.js
  5. +24 βˆ’0 components/construction.js
  6. +9 βˆ’0 components/icon.js
  7. +169 βˆ’0 components/layout.js
  8. +73 βˆ’0 components/meta.js
  9. +77 βˆ’0 components/photo.js
  10. +131 βˆ’0 components/sponsors.js
  11. +160 βˆ’0 components/theme.js
  12. +6 βˆ’0 next.config.js
  13. +6 βˆ’0 now.json
  14. +20 βˆ’40 package.json
  15. +92 βˆ’0 pages/_app.js
  16. +32 βˆ’0 pages/_document.js
  17. +173 βˆ’0 pages/index.mdx
@@ -0,0 +1,4 @@
{
"presets": ["next/babel"],
"plugins": [["emotion"]]
}
@@ -1,3 +1,3 @@
# Hack Pennsylvania
# Hack Pennsylvania 2019 Recap

[**hackpenn.com**](https://hackpenn.com)
@@ -0,0 +1,12 @@
import { Image } from 'rebass'

export default ({ size = 32, light = false, ...props }) => (
<Image
{...props}
src={`https://2019.hackpenn.com/flag${light && '--light'}@2x.png`}
alt="Hack Penn avatar"
width={size}
height={size}
sx={{ borderRadius: 'circle', overflow: 'hidden', ...props.sx }}
/>
)
@@ -0,0 +1,200 @@
import { Box } from 'rebass'

export const Banner = props => (
<Box
sx={{
backgroundImage:
'linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0.375)), url(https://cdn.glitch.com/3d283e0f-19c4-4546-b0b2-223ec3a7dc23%2Fceremony.jpg?v=1565769222245)',
backgroundSize: 'cover',
backgroundPosition: 'center',
color: 'white',
textShadow: '0 2px 4px rgba(0,0,0,.I 75)',
py: [4, 5, 6, 7],
mb: [4, 5]
}}
>
<Box
{...props}
variant="container"
sx={{
maxWidth: 'wide',
textAlign: 'center',
h1: {
fontSize: [5, 6, 7],
lineHeight: 'tight',
mt: [0, -2, -4, -5],
mb: 3
},
h2: {
fontSize: [2, 3, 4],
fontFamily: 'mono',
lineHeight: 'body',
fontWeight: 'body',
mb: 2,
a: {
color: 'red'
}
},
p: {
mb: 4
},
ul: {
listStyle: 'none',
display: 'flex',
p: 0,
m: 0
},
li: {
mr: 3
}
}}
/>
</Box>
)

export const Container = ({ wide, ...props }) => (
<Box
{...props}
variant="container"
sx={{
maxWidth: wide ? 'wide' : 'container',
h2: {
fontSize: [3, 4, 5],
mt: [4, 5],
mb: [2, 3]
},
h3: {
fontSize: [2, 3, 4],
mt: [3, 4],
mb: [2, 3]
},
...props.sx
}}
/>
)

export const Callout = props => (
<Box
{...props}
sx={{
bg: 'elevated',
px: [3, 4],
py: [2, 3, 4],
borderRadius: 'extra',
boxShadow: 'sheet',
fontSize: [2, 3],
mb: [4, 5],
...props.sx
}}
/>
)

export const List = props => (
<Box
{...props}
sx={{
ul: {
p: 0,
m: 0,
listStyle: 'none',
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(256px, 1fr))',
gridGap: [3, 4]
},
a: {
fontWeight: 'bold',
color: 'primary',
textDecoration: 'none'
},
em: {
display: 'block',
color: 'muted',
fontFamily: 'mono',
fontWeight: 'body',
fontStyle: 'normal',
fontSize: 0
},
...props.sx
}}
/>
)

export const Gallery = props => (
<Box
{...props}
sx={{
display: 'grid',
gridTemplateColumns: ['auto', null, 'repeat(2, 1fr)'],
gridGap: [3, 4, null, 5],
width: '100%',
px: [3, 4, null, 5],
mb: [3, 4, 5, 6],
'ul, ol': {
textAlign: [null, 'right'],
listStyle: 'none',
pl: 0
},
'p, ol, ul': {
maxWidth: 1080 / 2,
p: [3, 4]
},
'p, li': {
color: 'muted',
fontFamily: 'mono',
fontSize: [2, 3],
mt: 0,
mb: 2
},
...props.sx
}}
/>
)

export const Team = props => (
<Box
{...props}
sx={{
ul: {
p: 0,
m: 0,
listStyle: 'none',
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(256px, 1fr))',
gridGap: [3, 4]
},
li: {
display: 'flex',
alignItems: 'center'
},
p: {
my: 0,
'&:first-child': {
lineHeight: 0
}
},
strong: {
fontSize: [1, 2]
},
em: {
display: 'block',
color: 'muted',
fontFamily: 'mono',
fontWeight: 'body',
fontStyle: 'normal',
fontSize: [0, 1],
my: 0,
a: {
color: 'primary'
}
},
img: {
flexShrink: 'none',
borderRadius: 'circle',
width: [64, 72],
height: [64, 72],
mr: 3
},
...props.sx
}}
/>
)
@@ -0,0 +1,24 @@
import { Flex } from 'rebass'
import Icon from '../components/icon'

export default ({ sx, ...props }) => (
<Flex
{...props}
sx={{
alignItems: 'center',
justifyContent: ['flex-start', 'center'],
bg: 'accent',
color: 'white',
borderRadius: 'default',
lineHeight: 'heading',
p: 2,
mt: [3, 4],
mx: 'auto',
maxWidth: 512,
...sx
}}
>
<Icon glyph="flag" size={32} sx={{ mr: [2, 3] }} />
Site is currently under construction
</Flex>
)
@@ -0,0 +1,9 @@
import React from 'react'
import { Box } from 'rebass'
import Icon from '@hackclub/icons'

export default ({ sx, ...props }) => (
<Box sx={{ lineHeight: 0, ...sx }}>
<Icon {...props} />
</Box>
)

0 comments on commit 5f55ae9

Please sign in to comment.
You can’t perform that action at this time.