All-new recap site 🌲

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["emotion"]]
+}

README.md

@@ -1,3 +1,3 @@
-# Hack Pennsylvania
+# Hack Pennsylvania 2019 Recap
 
 [**hackpenn.com**](https://hackpenn.com)

components/avatar.js

@@ -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 }}
+  />
+)

components/blocks.js

@@ -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
+    }}
+  />
+)

components/construction.js

@@ -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>
+)

components/icon.js

@@ -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>
+)