coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Small homepage improvements

Browse Source
This commit is contained in:
Jori Lallo
2017-11-21 00:23:55 -08:00
parent c4669db242
commit dcb9366592
4 changed files with 56 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
server/pages/Home.js
View File

@ -14,8 +14,8 @@ function Home() {
<Hero> <Hero>
<h1>Your team’s knowledge base</h1> <h1>Your team’s knowledge base</h1>
<HeroText> <HeroText>
Documentation, meeting notes, playbooks, onboarding, work logs, Team wiki, documentation, meeting notes, playbooks, onboarding, work
brainstorming, decisions, & more… logs, brainstorming, & more…
</HeroText> </HeroText>
<p> <p>
<SignupButton /> <SignupButton />
@ -24,7 +24,7 @@ function Home() {
<Features> <Features>
<Grid.Unit size={{ desktop: 1 / 3, tablet: 1 / 2 }}> <Grid.Unit size={{ desktop: 1 / 3, tablet: 1 / 2 }}>
<Feature> <Feature>
<h2>Blazing Fast</h2> <h2>Blazing Fast Wiki</h2>
<p> <p>
Outline is fast, really fast. We’ve worked hard to ensure Outline is fast, really fast. We’ve worked hard to ensure
millisecond response times, documents load instantly, search is millisecond response times, documents load instantly, search is
@ -34,9 +34,10 @@ function Home() {
<Feature> <Feature>
<h2># Markdown Support</h2> <h2># Markdown Support</h2>
<p> <p>
Outline stores all documents in plain Markdown. Shortcuts are Outline stores, imports and exports all documents in plain
also built right into the editor so you can easily format using{' '} Markdown. Shortcuts are also built right into the editor so you
<strong>**markdown syntax**</strong> if you like. can easily format using <strong>**markdown syntax**</strong> if
you like.
</p> </p>
</Feature> </Feature>
</Grid.Unit> </Grid.Unit>
@ -85,9 +86,9 @@ function Home() {
<p> <p>
On the same page as us? Create a beta account to give Outline a try. On the same page as us? Create a beta account to give Outline a try.
</p> </p>
<p> <FooterCTA>
<SignupButton /> <SignupButton />
</p> </FooterCTA>
</Footer> </Footer>
</Grid> </Grid>
</span> </span>
@ -134,6 +135,10 @@ const Footer = styled.div`
padding: 6em; padding: 6em;
`; `;
const FooterCTA = styled.p`
padding-top: 1em;
`;
const HeroText = styled.p` const HeroText = styled.p`
font-size: 18px; font-size: 18px;
max-width: 600px; max-width: 600px;

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

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import Navigation from './Navigation'; import { TopNavigation, BottomNavigation } from './Navigation';
import Analytics from '../../../shared/components/Analytics'; import Analytics from '../../../shared/components/Analytics';
import globalStyles from '../../../shared/styles/globals'; import globalStyles from '../../../shared/styles/globals';
import { color } from '../../../shared/styles/constants'; import { color } from '../../../shared/styles/constants';
@ -48,8 +48,9 @@ export default function Layout({ children }: Props) {
{'{{CSS}}'} {'{{CSS}}'}
</head> </head>
<body> <body>
<Navigation /> <TopNavigation />
{children} {children}
<BottomNavigation />
</body> </body>
</html> </html>
); );

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

@ -1,10 +1,16 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { signin, developers, blogUrl } from '../../utils/routeHelpers'; import {
signin,
developers,
githubUrl,
blogUrl,
twitterUrl,
} from '../../utils/routeHelpers';
import { color } from '../../../shared/styles/constants'; import { color } from '../../../shared/styles/constants';
function Navigation() { function TopNavigation() {
return ( return (
<Nav> <Nav>
<Brand href="/">Outline</Brand> <Brand href="/">Outline</Brand>
@ -26,12 +32,35 @@ function Navigation() {
); );
} }
function BottomNavigation() {
return (
<BottomNav>
<Menu>
<MenuItem>
<a href={githubUrl()}>GitHub</a>
</MenuItem>
<MenuItem>
<a href={blogUrl()}>Medium</a>
</MenuItem>
<MenuItem>
<a href={twitterUrl()}>Twitter</a>
</MenuItem>
</Menu>
</BottomNav>
);
}
const Nav = styled.nav` const Nav = styled.nav`
display: flex; display: flex;
padding: 20px 30px; padding: 20px 30px;
justify-content: space-between; justify-content: space-between;
`; `;
const BottomNav = styled(Nav)`
margin-bottom: 30px;
justify-content: center;
`;
const Menu = styled.ul` const Menu = styled.ul`
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -52,6 +81,10 @@ const MenuItem = styled.li`
color: ${color.slateDark}; color: ${color.slateDark};
text-decoration: underline; text-decoration: underline;
} }
&:first-child {
margin-left: 0;
}
`; `;
const Brand = styled.a` const Brand = styled.a`
@ -61,4 +94,4 @@ const Brand = styled.a`
color: ${color.black}; color: ${color.black};
`; `;
export default Navigation; export { TopNavigation, BottomNavigation };

4
server/utils/routeHelpers.js
View File

@ -8,6 +8,10 @@ export function blogUrl(): string {
return 'https://medium.com/getoutline'; return 'https://medium.com/getoutline';
} }
export function twitterUrl(): string {
return 'https://twitter.com/getoutline';
}
export function developers(): string { export function developers(): string {
return '/developers'; return '/developers';
} }