Update content pages

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.
         </p>
       </Header>
-      <Container>
+      <Content>
         {releases.map(release => (
           <Article key={release.id}>
             <Heading id={release.name}>
@@ -38,7 +39,7 @@ function Changelog({ releases }: { releases: Release[] }) {
             <ReactMarkdown source={release.body} />
           </Article>
         ))}
-      </Container>
+      </Content>
     </Grid>
   );
 }
@@ -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;

server/pages/Home.js

@@ -27,13 +27,13 @@ function Home(props: Props) {
         <title>Outline - Team wiki & knowledge base</title>
       </Helmet>
       <Grid>
-        <Hero>
+        <Hero id="signin">
           <h1>Your team’s knowledge base</h1>
           <HeroText>
             Team wiki, documentation, meeting notes, playbooks, onboarding, work
             logs, brainstorming, & more…
           </HeroText>
-          <p id="signin">
+          <p>
             <SigninButtons {...props} />
           </p>
           {props.notice === 'google-hd' && (
@@ -73,7 +73,7 @@ function Home(props: Props) {
                     <p>
                       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!
                     </p>
                   </Feature>
@@ -89,7 +89,7 @@ function Home(props: Props) {
             </Centered>
           </Features>
         </Mask>
-        <Centered>
+        <Centered id="features">
           <Grid>
             <Feature size={{ desktop: 1 / 3 }}>
               <h2>Blazing Fast</h2>

server/pages/Privacy.js

@@ -9,10 +9,11 @@ export default function Privacy() {
   return (
     <Grid>
       <Helmet>
-        <title>Privacy policy</title>
+        <title>Privacy Policy</title>
       </Helmet>
       <Header>
-        <h1>Privacy policy</h1>
+        <h1>Privacy Policy</h1>
+        <p>How we collect and use your information</p>
       </Header>
       <Content>
         <p>

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;

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 (
+    <Wrapper>
+      <Centered>{children}</Centered>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
   width: 100%;
-  padding: 0 2em 2em;
+  padding: 2em;
-  text-align: center;
+  background: ${props => props.theme.contentHeaderBackground};
-  background: ${props => props.theme.slateLight};
   margin-bottom: 2em;
 
   p {
-    max-width: 720px;
+    font-size: 22px;
-    margin: 0 auto;
+    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;
   }
 `;
 

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;

server/pages/components/Navigation.js

@@ -26,10 +26,10 @@ function TopNavigation() {
           <a href={about()}>About</a>
         </MenuItemDesktop>
         <MenuItemDesktop>
-          <a href={twitterUrl()}>Twitter</a>
+          <a href={changelog()}>Changelog</a>
         </MenuItemDesktop>
         <MenuItemDesktop>
-          <a href={changelog()}>Changelog</a>
+          <a href={twitterUrl()}>Twitter</a>
         </MenuItemDesktop>
         <MenuItem>
           <a href={developers()}>API</a>
@@ -54,9 +54,6 @@ function BottomNavigation() {
       <div>
         <a href={spectrumUrl()}>Spectrum</a>
       </div>
-      <div>
-        <a href={blogUrl()}>Medium</a>
-      </div>
       <div>
         <a href={privacy()}>Privacy</a>
       </div>

shared/styles/theme.js

@@ -33,6 +33,8 @@ const theme = {
   sidebarWidth: '280px',
   sidebarMinWidth: '250px',
   sidebarMaxWidth: '350px',
+
+  contentHeaderBackground: 'hsl(180, 58%, 85%)',
 };
 
 export default theme;