Add CSS mixins to /src/common.js

src/components/common.js

@@ -1,4 +1,20 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
+
+const mixin = {
+  position: css`
+    ${props => {
+      if (props.relative) return 'position: relative;'
+      if (props.absolute) return 'position: absolute;'
+    }};
+  `,
+  textAlign: css`
+    ${props => {
+      if (props.taCenter) return 'text-align: center;'
+      if (props.taLeft) return 'text-align: left;'
+      if (props.taRight) return 'text-align: right;'
+    }};
+  `
+}
 
 export const Absolute = styled.div`
   position: absolute;
@@ -14,6 +30,8 @@ export const Relative = styled.div`
 `
 
 export const Section = styled.section`
+  ${mixin.position}
+
   width: 100%;
   padding: ${props => {
     if (props.thick) return '10rem 0'
@@ -23,9 +41,16 @@ export const Section = styled.section`
 `
 
 export const Container = styled.div`
+  ${mixin.position}
+  ${mixin.textAlign}
+
   margin: 0 auto;
-  max-width: 1111px;
   width: 90vw;
+  max-width: ${props => {
+    if (props.skinny) return '888px'
+    if (props.skinnier) return '555px'
+    return '1111px'
+  }};
 `
 
 export const Flex = styled.div`

src/views/About.js

@@ -13,6 +13,12 @@ export default ({title}) => (
         <p>A sem vel nec sodales mi vivamus senectus sed potenti a parturient nascetur tincidunt nisi pulvinar rhoncus a. Risus imperdiet taciti suspendisse facilisi a per metus cubilia varius a nostra adipiscing amet ultrices quisque ac mi a. Dictumst a ultrices mi a dignissim ad fermentum eget a nam et a blandit scelerisque. Taciti lorem tempor quam vestibulum dis habitasse vestibulum diam vel est ut proin dis auctor. Suscipit scelerisque orci magna interdum vel bibendum duis netus a consectetur dui magnis ac aliquet sem posuere tincidunt vestibulum.</p>
       </Container>
     </Section>
+    <Section thin>
+      <Container taCenter skinny>
+        <h1>This is a skinny center-aligned {'<Container />'}</h1>
+        <p>A sem vel nec sodales mi vivamus senectus sed potenti a parturient nascetur tincidunt nisi pulvinar rhoncus a. Risus imperdiet taciti suspendisse facilisi a per metus cubilia varius a nostra adipiscing amet ultrices quisque ac mi a. Dictumst a ultrices mi a dignissim ad fermentum eget a nam et a blandit scelerisque. Taciti lorem tempor quam vestibulum dis habitasse vestibulum diam vel est ut proin dis auctor. Suscipit scelerisque orci magna interdum vel bibendum duis netus a consectetur dui magnis ac aliquet sem posuere tincidunt vestibulum.</p>
+      </Container>
+    </Section>
     <Helmet>
       <title>{title}</title>
     </Helmet>