Adding content pages [wip]

server/pages/components/Header.js

@@ -1,15 +1,17 @@
 // @flow
 import * as React from 'react';
+import breakpoint from 'styled-components-breakpoint';
 import styled from 'styled-components';
 import Centered from './Centered';
 
 type Props = {
   children: React.Node,
+  background?: string,
 };
 
-const Header = ({ children }: Props) => {
+const Header = ({ children, background }: Props) => {
   return (
-    <Wrapper>
+    <Wrapper background={background}>
       <Centered>{children}</Centered>
     </Wrapper>
   );
@@ -17,9 +19,13 @@ const Header = ({ children }: Props) => {
 
 const Wrapper = styled.div`
   width: 100%;
-  padding: 2em;
-  background: ${props => props.theme.contentHeaderBackground};
+  padding: 8em 0 3em;
+
+  margin-top: -70px;
   margin-bottom: 2em;
+  text-align: center;
+  background: ${props => props.background || 'transparent'};
+  z-index: -1;
 
   p {
     font-size: 22px;
@@ -29,9 +35,17 @@ const Wrapper = styled.div`
   }
 
   h1 {
-    font-size: 3.5em;
+    font-size: 2em;
     margin: 0 0 0.1em;
   }
+
+  ${breakpoint('tablet')`
+    padding: 8em 3em 3em 3em;
+
+    h1 {
+      font-size: 4em;
+    }
+  `};
 `;
 
 export default Header;