styled.js

/**
 * Units
 */
const u = 1,
      bump = {
        small: 1.25,
        medium: 1.5,
        large: 2,
        extra: 3,
      }

/**
 * Post component styles
 */
const postStyles = {
  blockquotes: `
    background: black;
    color: white;
    padding: ${u*bump.extra}em;
    margin-top: ${u*bump.large}em;
    margin-bottom: ${u*bump.large}em;

    p {
      font-size: ${u*bump.medium}em;
      margin-bottom: ${u}em;

      br {
        display: none;
      }
    }

    cite {
      display: inline-block;
      margin-top: ${u}em;
      font-size: ${u*bump.medium}em;
      font-weight: strong;
      text-align: right;
    }
  `,

  lists: `
    margin-top: ${u}em;
    margin-bottom: ${u}em;
    list-style-type: square;
    list-style-position: inside;

    li {
      margin-bottom: ${u}em;
    }
  `,

  paragraph: `
    font-size: ${u*bump.small}em;
    margin-bottom: ${u}em;
  `
}

const Content = styled(Box)`
  blockquote {
    ${postStyles.blockquotes}
  }

  p {
    ${postStyles.paragraph}
  }

  ul {
    ${postStyles.lists}
  }
`