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

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

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

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

@ -1,10 +1,16 @@
// @flow
import React from 'react';
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';
function Navigation() {
function TopNavigation() {
return (
<Nav>
<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`
display: flex;
padding: 20px 30px;
justify-content: space-between;
`;
const BottomNav = styled(Nav)`
margin-bottom: 30px;
justify-content: center;
`;
const Menu = styled.ul`
margin: 0;
padding: 0;
@ -52,6 +81,10 @@ const MenuItem = styled.li`
color: ${color.slateDark};
text-decoration: underline;
}
&:first-child {
margin-left: 0;
}
`;
const Brand = styled.a`
@ -61,4 +94,4 @@ const Brand = styled.a`
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';
}
export function twitterUrl(): string {
return 'https://twitter.com/getoutline';
}
export function developers(): string {
return '/developers';
}