diff --git a/components/icon.js b/components/icon.js new file mode 100644 index 00000000..ae087c68 --- /dev/null +++ b/components/icon.js @@ -0,0 +1,5 @@ +/** @jsx jsx */ +import { jsx } from 'theme-ui' +import Icon from '@hackclub/icons' + +export default (props) => diff --git a/lib/theme.js b/lib/theme.js new file mode 100644 index 00000000..622aa274 --- /dev/null +++ b/lib/theme.js @@ -0,0 +1,25 @@ +import base from '@hackclub/theme' + +const theme = base + +theme.buttons.primary = { + fontSize: 3, + fontWeight: 'bold', + textTransform: 'uppercase', + px: 4, + py: 3, + letterSpacing: 'headline', + borderRadius: 'circle', + backgroundImage: (theme) => + `linear-gradient(${theme.colors.orange}, ${theme.colors.red})`, + boxShadow: 'card', + WebkitTapHighlightColor: 'transparent', + transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out', + willChange: 'transform', + ':focus,:hover': { + boxShadow: 'elevated', + transform: 'scale(1.0625)' + } +} + +export default theme diff --git a/package.json b/package.json index bdacf5cd..741fb41b 100755 --- a/package.json +++ b/package.json @@ -12,8 +12,8 @@ "dependencies": { "@hackclub/icons": "^0.0.3", "@hackclub/meta": "^0.1.0-alpha.0", - "@hackclub/theme": "^0.1.0-alpha.0", - "@mdx-js/loader": "^1.5.8", + "@hackclub/theme": "^0.1.1", + "@mdx-js/loader": "^1.5.9", "@next/mdx": "^9.3.5", "lodash": "^4.17.15", "next": "^9.3.5", diff --git a/pages/_app.js b/pages/_app.js index dee0d28f..21ad189f 100755 --- a/pages/_app.js +++ b/pages/_app.js @@ -4,9 +4,8 @@ import Head from 'next/head' import Meta from '@hackclub/meta' import '@hackclub/theme/fonts/reg-bold.css' -import theme from '@hackclub/theme' +import theme from '../lib/theme' import { ThemeProvider } from 'theme-ui' -import ColorSwitcher from '../components/color-switcher' export default class App extends NextApp { render() { @@ -17,7 +16,6 @@ export default class App extends NextApp { Hack Club - ) diff --git a/pages/index.js b/pages/index.js new file mode 100644 index 00000000..b21e0f82 --- /dev/null +++ b/pages/index.js @@ -0,0 +1,292 @@ +import { + Box, + Button, + Card, + Checkbox, + Container, + Flex, + Grid, + Heading, + Image, + Input, + Label, + Link, + Text, + Textarea +} from 'theme-ui' + +const CardLink = (props) => ( + +) + +export default () => ( + <> + + + `0 0 6px ${theme.colors.red}` + }} + > + COVID has changed{' '} + theme.colors.red, + WebkitTextStrokeWidth: '3px', + WebkitTextFillColor: (theme) => theme.colors.white + }} + > + everything + + . + + + HACK CLUB used to be a network of high school coding + clubs & hackathons. Someday, we’ll get back to that. + + + + + + + During COVID-19 + + + We’re trying to make Hack Club the best place on the internet to be a + teenager in tech. + + + + + + + + + We’re some of the 15 million U.S. high schoolers isolated.{' '} + + + Here’s how we’re coming together. + + + div': { + p: [3, 4], + display: 'flex', + flexDirection: 'column', + // justifyContent: 'center', + position: 'relative' + }, + h3: { + mt: 0 + } + }} + > + + + AMAs with some of the most interesting people in tech. + + + Elon Musk, Simone Giertz, Tom Preston-Werner, & more + + + Watch a recent AMA + + + + + Social coding events to keep you leveling up. + + + See upcoming events + + + + + Student-run workshops on coding, cooking, drawing, everything. + + + Video call with students going wild + + Watch a recent live-code + + + + + + Online hackathons like the{' '} + theme.colors.white, + textShadow: '0 0 4px currentColor' + } + }} + > + COVID-19 Global Hackathon + {' '} + to grow as a developer. + + + See upcoming hackathons + + + + + + `radial-gradient( + ellipse farthest-corner at top left, ${theme.colors.cyan}, ${theme.colors.blue})`, + color: 'white', + py: [5, 6] + }} + > + + + Join our Slack + + + Due to high demand from the Elon Musk AMA, we’re temporarily making + our community invite-only. But we still want to meet you! + + + + + +