From 7a40b360b2cf3b098bf2ff184e93121841653a36 Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 24 May 2020 12:57:12 -0400 Subject: [PATCH] Add Slack page (#19) * Fix Flag animation * Make cards translucent * Add Slack page * Update link on Ship page --- components/flag.js | 8 +- components/home/announcement.js | 15 ++- components/home/join-form.js | 2 +- components/nav.js | 24 ++-- lib/theme.js | 3 +- pages/index.js | 1 + pages/ship.js | 6 +- pages/slack.js | 228 ++++++++++++++++++++++++++++++++ vercel.json | 11 +- 9 files changed, 261 insertions(+), 37 deletions(-) create mode 100644 pages/slack.js diff --git a/components/flag.js b/components/flag.js index af2b218b..666ede0a 100644 --- a/components/flag.js +++ b/components/flag.js @@ -14,14 +14,14 @@ const waveFlag = keyframes` const waveFlagScaled = keyframes` from { - transform: scale(.75) rotate(0deg); + transform: scale(.875) rotate(0deg); } to { - transform: scale(.75) rotate(-5deg); + transform: scale(.875) rotate(-5deg); } ` -const scrolled = (props) => +const scrolled = props => props.scrolled && css` transform: scale(0.875); @@ -57,7 +57,7 @@ const Base = styled('a')` ${scrolled}; ` -const Flag = (props) => ( +const Flag = props => ( diff --git a/components/home/announcement.js b/components/home/announcement.js index 4449dc36..490de172 100644 --- a/components/home/announcement.js +++ b/components/home/announcement.js @@ -10,7 +10,7 @@ const unfold = keyframes({ const Announcement = ({ caption, copy, - iconLeft = 'announcement', + iconLeft, iconRight = 'info', color = 'accent', ...props @@ -19,22 +19,23 @@ const Announcement = ({ as={props.href ? 'a' : 'div'} variant="interactive" sx={{ + variant: 'cards.translucent', mx: 'auto', maxWidth: 'narrow', width: '100%', - bg: 'rgba(255, 255, 255, 0.98)', textAlign: 'left', textDecoration: 'none', lineHeight: 'caption', display: 'flex', alignItems: 'center', - p: [2, 3], + p: [2, 2], + px: 3, mb: [3, 4], - mt: [null, -3, -5], + mt: [null, -3, -5, -84], transform: 'scale(1)', - willChange: 'transform', - animation: `${unfold} 0.5s ease-out`, - '@media (prefers-reduced-motion: reduce)': { animation: 'none' }, + '@media (prefers-reduced-motion: no-preference)': { + animation: `${unfold} 0.5s ease-out` + }, svg: { flexShrink: 'none' } }} {...props} diff --git a/components/home/join-form.js b/components/home/join-form.js index 747d09a9..e005ac57 100644 --- a/components/home/join-form.js +++ b/components/home/join-form.js @@ -8,7 +8,7 @@ const JoinForm = () => { return ( ${opacity} )` -const unfixed = (props) => +const unfixed = props => !props.unfixed && css` position: absolute; @@ -31,7 +31,7 @@ const unfixed = (props) => // -webkit-backdrop-filter: saturate(180%) blur(20px); // backdrop-filter: saturate(180%) blur(20px); // ` -const fixed = (props) => +const fixed = props => (props.scrolled || props.toggled || props.fixed) && css` position: fixed; @@ -69,7 +69,7 @@ export const Content = styled(Container)` } ` -const hoverColor = (name) => +const hoverColor = name => ({ white: 'smoke', smoke: 'muted', @@ -84,7 +84,7 @@ const slide = keyframes({ to: { transform: 'translateY(0)', opacity: 1 } }) -const layout = (props) => +const layout = props => props.isMobile ? css` display: ${props.toggled ? 'flex' : 'none'}; @@ -135,12 +135,12 @@ const NavBar = styled(Box)` padding: ${theme.space[3]}px; text-decoration: none; @media (min-width: 56em) { - color: ${(props) => theme.colors[props.color] || color}; + color: ${props => theme.colors[props.color] || color}; } } ` -const Navigation = (props) => ( +const Navigation = props => ( @@ -188,7 +188,7 @@ class Header extends Component { this.bindScroll(false) } - bindScroll = (add) => { + bindScroll = add => { if (typeof window !== 'undefined' && !this.props.unfixed) { window[add ? 'addEventListener' : 'removeEventListener']( 'scroll', @@ -209,7 +209,7 @@ class Header extends Component { } handleToggleMenu = () => { - this.setState((state) => ({ + this.setState(state => ({ toggled: !state.toggled })) } @@ -220,13 +220,13 @@ class Header extends Component { const baseColor = dark ? color || 'white' : color === 'white' && scrolled - ? 'black' - : color + ? 'black' + : color const toggleColor = dark ? color || 'snow' : toggled || (color === 'white' && scrolled) - ? 'slate' - : color + ? 'slate' + : color return ( - `linear-gradient(${theme.colors.orange}, ${theme.colors.red})` + backgroundImage: t => t.util.gradient('orange', 'red') } theme.cards.translucent = { diff --git a/pages/index.js b/pages/index.js index 76d8ca43..fd073fc6 100644 --- a/pages/index.js +++ b/pages/index.js @@ -131,6 +131,7 @@ export default () => ( diff --git a/pages/ship.js b/pages/ship.js index fccd5a81..c2f3230c 100644 --- a/pages/ship.js +++ b/pages/ship.js @@ -259,9 +259,9 @@ export default ({ ships, stats }) => ( Hack Club Slack, where 9k teenagers from around the world share what they’re working on & help each other. - - diff --git a/pages/slack.js b/pages/slack.js new file mode 100644 index 00000000..794f988a --- /dev/null +++ b/pages/slack.js @@ -0,0 +1,228 @@ +import { + Box, + Card, + Container, + Grid, + Heading, + Image, + Link, + Text +} from 'theme-ui' +import { keyframes } from '@emotion/core' +import Head from 'next/head' +import Meta from '@hackclub/meta' +import Nav from '../components/nav' +import ForceTheme from '../components/force-theme' +import Footer from '../components/footer' +import SlideUp from '../components/slide-up' +import SlackEvents from '../components/home/slack-events' +import Announcement from '../components/home/announcement' +import JoinForm from '../components/home/join-form' + +export default () => ( + <> + + +