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

Merge pull request #450 from outline/jori/marketing-pages

Browse Source 
Public page CSS tweaks
This commit is contained in:
Jori Lallo
2017-11-26 17:47:21 -08:00
committed by GitHub
parent f5bc4f1fe3 b27ac8c17e
commit 6aa0390e99
6 changed files with 95 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -171,6 +171,7 @@
"string-replace-to-array": "^1.0.3",
"style-loader": "^0.18.2",
"styled-components": "^2.2.3",
"styled-components-breakpoint": "^1.0.1",
"styled-components-grid": "^1.0.0-preview.15",
"styled-normalize": "^2.2.1",
"url-loader": "0.5.7",

19
server/pages/Home.js
View File

@ -1,7 +1,9 @@
// @flow
import React from 'react';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';
import Grid from 'styled-components-grid';
import breakpoint from 'styled-components-breakpoint';
import Hero from './components/Hero';
import SignupButton from './components/SignupButton';
import { developers, githubUrl } from '../utils/routeHelpers';
@ -10,6 +12,9 @@ import { color } from '../../shared/styles/constants';
function Home() {
return (
<span>
<Helmet>
<title>Outline - Team wiki & documentation</title>
</Helmet>
<Grid>
<Hero>
<h1>Your team’s knowledge base</h1>
@ -21,7 +26,7 @@ function Home() {
<SignupButton />
</p>
</Hero>
<Features>
<Features reverse={{ mobile: true, tablet: false, desktop: false }}>
<Grid.Unit size={{ desktop: 1 / 3, tablet: 1 / 2 }}>
<Feature>
<h2>Blazing Fast Wiki</h2>
@ -96,10 +101,14 @@ function Home() {
}
const Screenshot = styled.img`
width: 150%;
width: 100%;
box-shadow: 0 0 80px 0 rgba(124, 124, 124, 0.5),
0 0 10px 0 rgba(237, 237, 237, 0.5);
border-radius: 5px;
${breakpoint('desktop')`
width: 150%;
`};
`;
const Highlights = styled(Grid)`
@ -111,6 +120,10 @@ const Highlights = styled(Grid)`
const Features = styled(Grid)`
padding: 0 2em;
overflow: hidden;
${breakpoint('mobile')`
flex-direction
`};
`;
const Feature = styled(Grid.Unit)`
@ -132,7 +145,7 @@ const Feature = styled(Grid.Unit)`
const Footer = styled.div`
text-align: center;
width: 100%;
padding: 6em;
padding: 6em 4em;
`;
const FooterCTA = styled.p`

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

@ -4,6 +4,7 @@ import styled from 'styled-components';
const Hero = styled.div`
width: 100%;
height: 70vh;
min-height: 400px;
max-height: 600px;
padding: 6em 2em 0;
text-align: center;

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

@ -21,7 +21,10 @@ export default function Layout({ children }: Props) {
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="referrer" content="origin" />
<meta name="description" content="Your team’s knowledge base" />
<meta
name="description"
content="Your team’s knowledge base - Team wiki, documentation, playbooks, onboarding & more…"
/>
<meta name="og:site_name" content="Outline" />
<meta name="og:type" content="website" />
<meta name="theme-color" content={color.primary} />

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

@ -1,6 +1,7 @@
// @flow
import React from 'react';
import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import {
signin,
developers,
@ -16,12 +17,12 @@ function TopNavigation() {
<Nav>
<Brand href="/">Outline</Brand>
<Menu>
<MenuItem>
<MenuItemDesktop>
<a href="/#features">Features</a>
</MenuItem>
<MenuItem>
</MenuItemDesktop>
<MenuItemDesktop>
<a href={blogUrl()}>Blog</a>
</MenuItem>
</MenuItemDesktop>
<MenuItem>
<a href={developers()}>API</a>
</MenuItem>
@ -36,44 +37,23 @@ function TopNavigation() {
function BottomNavigation() {
return (
<BottomNav>
<Menu>
<MenuItem>
<a href={githubUrl()}>GitHub</a>
</MenuItem>
<MenuItem>
<a href={spectrumUrl()}>Spectrum</a>
</MenuItem>
<MenuItem>
<a href={blogUrl()}>Medium</a>
</MenuItem>
<MenuItem>
<a href={twitterUrl()}>Twitter</a>
</MenuItem>
</Menu>
<div>
<a href={githubUrl()}>GitHub</a>
</div>
<div>
<a href={spectrumUrl()}>Spectrum</a>
</div>
<div>
<a href={blogUrl()}>Medium</a>
</div>
<div>
<a href={twitterUrl()}>Twitter</a>
</div>
</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;
list-style: none;
`;
const MenuItem = styled.li`
display: inline-block;
margin: 0 0 0 40px;
const MenuLinkStyle = `
font-size: 15px;
font-weight: 500;
@ -85,10 +65,64 @@ const MenuItem = styled.li`
color: ${color.slateDark};
text-decoration: underline;
}
`;
const Menu = styled.ul`
margin: 0;
padding: 0;
list-style: none;
`;
const MenuItem = styled.li`
display: inline-block;
margin: 0 0 0 40px;
&:first-child {
margin-left: 0;
}
${MenuLinkStyle};
`;
const MenuItemDesktop = styled(MenuItem)`
display: none;
${breakpoint('tablet')`
display: inline-block;
`};
`;
const Nav = styled.nav`
display: flex;
padding: 20px 30px;
align-items: center;
justify-content: space-between;
`;
const BottomNav = styled.nav`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 40px;
> div {
display: flex;
margin: 0 0 40px 0;
${MenuLinkStyle};
}
${breakpoint('tablet')`
flex-direction: row;
> div {
margin: 0 0 0 40px;
&:first-child {
margin: 0;
}
}
`};
`;
const Brand = styled.a`

2
yarn.lock
View File

@ -8444,7 +8444,7 @@ style-loader@^0.18.2:
styled-components-breakpoint@^1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-1.0.1.tgz#51fb474d9449e228b6f3f2cd232631ec65c149bc"
resolved "https://registry.yarnpkg.com/styled-components-breakpoint/-/styled-components-breakpoint-1.0.1.tgz#51fb474d9449e228b6f3f2cd232631ec65c149bc"
styled-components-grid@^1.0.0-preview.15:
version "1.0.0-preview.15"