src/components/container.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React from 'react'
import { css } from 'react-emotion'
import { breakpoints, margins } from './globals'

const mq = breakpoints
  .map(
    ({ breakpoint, size }) => `
  @media (min-width: ${breakpoint}px) {
    width: ${size}px;
  }
  `
  )
  .join('\n')

const containerStyle = css(`
  display: block;
  margin: 0 auto;
  padding: ${margins.lg}px 0;
  width: 93%;
  ${mq}
`)

export const Container = p => <div className={containerStyle}>{p.children}</div>