Update content pages

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;
-  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;
   }
 `;
 

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>