From 8f08f8dabfad8fc1a4440bcde9ca1c93687530c5 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Wed, 11 Jul 2018 20:57:27 -0700 Subject: [PATCH] Update content pages --- server/pages/Changelog.js | 12 +++-------- server/pages/Home.js | 8 +++---- server/pages/Privacy.js | 5 +++-- server/pages/components/Content.js | 4 ++-- server/pages/components/Header.js | 30 ++++++++++++++++++++------- server/pages/components/Layout.js | 5 +++++ server/pages/components/Navigation.js | 7 ++----- shared/styles/theme.js | 2 ++ 8 files changed, 44 insertions(+), 29 deletions(-) diff --git a/server/pages/Changelog.js b/server/pages/Changelog.js index 64b5600d..ab9a14f2 100644 --- a/server/pages/Changelog.js +++ b/server/pages/Changelog.js @@ -6,6 +6,7 @@ import Grid from 'styled-components-grid'; import ReactMarkdown from 'react-markdown'; import { Helmet } from 'react-helmet'; import Header from './components/Header'; +import Content from './components/Content'; type Release = { id: string, @@ -26,7 +27,7 @@ function Changelog({ releases }: { releases: Release[] }) { We’re building in public. Here’s what we’ve been changing recently.

- + {releases.map(release => (
@@ -38,7 +39,7 @@ function Changelog({ releases }: { releases: Release[] }) {
))} - + ); } @@ -58,13 +59,6 @@ const Time = styled.time` display: block; `; -const Container = styled.div` - width: 100%; - max-width: 720px; - margin: 0 auto; - padding: 0 2em; -`; - const Article = styled.div` border-bottom: 1px solid ${props => props.theme.slateLight}; padding-bottom: 2em; diff --git a/server/pages/Home.js b/server/pages/Home.js index 7b080b80..685198b9 100644 --- a/server/pages/Home.js +++ b/server/pages/Home.js @@ -27,13 +27,13 @@ function Home(props: Props) { Outline - Team wiki & knowledge base - +

Your team’s knowledge base

Team wiki, documentation, meeting notes, playbooks, onboarding, work logs, brainstorming, & more… -

+

{props.notice === 'google-hd' && ( @@ -73,7 +73,7 @@ function Home(props: Props) {

Outline provides a secure place for your teams documentation on our hosted platform, stored in portable - Markdown format. Or, you can run your own copy – it's open + Markdown format. Or, you can run your own copy – it’s open source!

@@ -89,7 +89,7 @@ function Home(props: Props) { - +

Blazing Fast

diff --git a/server/pages/Privacy.js b/server/pages/Privacy.js index 68ea41f5..429e73a1 100644 --- a/server/pages/Privacy.js +++ b/server/pages/Privacy.js @@ -9,10 +9,11 @@ export default function Privacy() { return ( - Privacy policy + Privacy Policy
-

Privacy policy

+

Privacy Policy

+

How we collect and use your information

diff --git a/server/pages/components/Content.js b/server/pages/components/Content.js index fd449e55..587298a2 100644 --- a/server/pages/components/Content.js +++ b/server/pages/components/Content.js @@ -3,9 +3,9 @@ import styled from 'styled-components'; export default styled.div` width: 100%; - max-width: 720px; + max-width: 1000px; margin: 0 auto 2em; - padding: 0 2em; + font-size: 1.1em; li { padding: 0.2em 0; diff --git a/server/pages/components/Header.js b/server/pages/components/Header.js index 16cc9492..64a22b45 100644 --- a/server/pages/components/Header.js +++ b/server/pages/components/Header.js @@ -1,20 +1,36 @@ // @flow +import * as React from 'react'; import styled from 'styled-components'; +import Centered from './Centered'; -const Header = styled.div` +type Props = { + children: React.Node, +}; + +const Header = ({ children }: Props) => { + return ( + + {children} + + ); +}; + +const Wrapper = styled.div` width: 100%; - padding: 0 2em 2em; - text-align: center; - background: ${props => props.theme.slateLight}; + padding: 2em; + background: ${props => props.theme.contentHeaderBackground}; margin-bottom: 2em; p { - max-width: 720px; - margin: 0 auto; + font-size: 22px; + font-weight: 500; + color: rgba(0, 0, 0, 0.6); + margin: 0; } h1 { - font-size: 2.5em; + font-size: 3.5em; + margin: 0 0 0.1em; } `; diff --git a/server/pages/components/Layout.js b/server/pages/components/Layout.js index e5368fe0..97d04ce5 100644 --- a/server/pages/components/Layout.js +++ b/server/pages/components/Layout.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { Helmet } from 'react-helmet'; import styled from 'styled-components'; +import breakpoint from 'styled-components-breakpoint'; import { TopNavigation, BottomNavigation } from './Navigation'; import Analytics from '../../../shared/components/Analytics'; import globalStyles from '../../../shared/styles/globals'; @@ -75,6 +76,10 @@ function Layout({ children }: Props) { const Body = styled.body` padding: 0 30px; + + ${breakpoint('tablet')` + padding: 0; + `}; `; export default Layout; diff --git a/server/pages/components/Navigation.js b/server/pages/components/Navigation.js index 2b227771..46664cdc 100644 --- a/server/pages/components/Navigation.js +++ b/server/pages/components/Navigation.js @@ -26,10 +26,10 @@ function TopNavigation() { About - Twitter + Changelog - Changelog + Twitter API @@ -54,9 +54,6 @@ function BottomNavigation() {

-
- Medium -
diff --git a/shared/styles/theme.js b/shared/styles/theme.js index 7c71623f..cfa9b4b4 100644 --- a/shared/styles/theme.js +++ b/shared/styles/theme.js @@ -33,6 +33,8 @@ const theme = { sidebarWidth: '280px', sidebarMinWidth: '250px', sidebarMaxWidth: '350px', + + contentHeaderBackground: 'hsl(180, 58%, 85%)', }; export default theme;