yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved homepage 🙏

Browse Source
This commit is contained in:
Tom Moor
2018-07-11 20:23:36 -07:00
parent 95c4574549
commit 19a328ebeb
10 changed files with 209 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
server/pages/components/Centered.js Normal file
View File

@@ -0,0 +1,9 @@
// @flow
import styled from 'styled-components';
const Centered = styled.div`
margin: 0 auto;
max-width: 1000px;
`;
export default Centered;

13
server/pages/components/Hero.js
View File

@@ -1,16 +1,15 @@
// @flow
import styled from 'styled-components';
import Centered from './Centered';
const Hero = styled.div`
const Hero = styled(Centered)`
width: 100%;
height: 70vh;
min-height: 400px;
max-height: 600px;
padding: 6em 2em 0;
text-align: center;
min-height: 500px;
padding: 4em 0 0;
h1 {
font-size: 2.5em;
font-size: 3.5em;
line-height: 1em;
}
`;

13
server/pages/components/Layout.js
View File

@@ -1,6 +1,7 @@
// @flow
import * as React from 'react';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';
import { TopNavigation, BottomNavigation } from './Navigation';
import Analytics from '../../../shared/components/Analytics';
import globalStyles from '../../../shared/styles/globals';
@@ -15,7 +16,7 @@ type Props = {
children?: React.Node,
};
export default function Layout({ children }: Props) {
function Layout({ children }: Props) {
globalStyles();
return (
@@ -63,11 +64,17 @@ export default function Layout({ children }: Props) {
{'{{HEAD}}'}
{'{{CSS}}'}
</head>
<body>
<Body>
<TopNavigation />
{children}
<BottomNavigation />
</body>
</Body>
</html>
);
}
const Body = styled.body`
padding: 0 30px;
`;
export default Layout;

8
server/pages/components/Navigation.js
View File

@@ -2,6 +2,7 @@
import * as React from 'react';
import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import Centered from './Centered';
import {
developers,
changelog,
@@ -102,9 +103,9 @@ const MenuItemDesktop = styled(MenuItem)`
`};
`;
const Nav = styled.nav`
const Nav = styled(Centered)`
display: flex;
padding: 20px 30px;
padding: 20px 0;
align-items: center;
justify-content: space-between;
`;
@@ -114,7 +115,7 @@ const BottomNav = styled.nav`
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 40px;
margin: 4em 0;
> div {
display: flex;
@@ -124,6 +125,7 @@ const BottomNav = styled.nav`
${breakpoint('tablet')`
flex-direction: row;
margin: 0 0 4em;
> div {
margin: 0 0 0 40px;

25
server/pages/components/SigninButtons.js
View File

@@ -21,7 +21,7 @@ const SigninButtons = ({
return (
<Wrapper>
{slackSigninEnabled && (
<Flex column>
<Column column>
<Button href={signin('slack')}>
<SlackLogo />
<Spacer>Sign In with Slack</Spacer>
@@ -29,11 +29,10 @@ const SigninButtons = ({
<LastLogin>
{lastSignedIn === 'slack' && 'You signed in with Slack previously'}
</LastLogin>
</Flex>
</Column>
)}
&nbsp;
{googleSigninEnabled && (
<Flex column>
<Column column>
<Button href={signin('google')}>
<GoogleLogo />
<Spacer>Sign In with Google</Spacer>
@@ -42,19 +41,28 @@ const SigninButtons = ({
{lastSignedIn === 'google' &&
'You signed in with Google previously'}
</LastLogin>
</Flex>
</Column>
)}
</Wrapper>
);
};
const Column = styled(Flex)`
text-align: center;
&:first-child {
margin-right: 8px;
}
`;
const Wrapper = styled(Flex)`
display: block;
justify-content: center;
${breakpoint('tablet')`
display: flex;
`};
justify-content: flex-start;
`};
`;
const Spacer = styled.span`
@@ -73,8 +81,9 @@ const Button = styled.a`
`;
const LastLogin = styled.p`
font-size: 12px;
color: ${props => props.theme.slate};
font-size: 13px;
font-weight: 500;
color: rgba(20, 23, 26, 0.5);
padding-top: 4px;
`;