Use provided theme

13 files changed, 62 insertions, 92 deletions

diff --git a/src/components/about-entry.js b/src/components/about-entry.js
index 553b5e5..1a65800 100644
--- a/src/components/about-entry.js
+++ b/src/components/about-entry.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import { css } from '@emotion/core'
-import { margins } from './globals'
 
-const aboutEntryStyle = css`
+const aboutEntryStyle = ({ margins }) => css`
   margin: 0 0 ${margins.lg}px 0;
   & li {
     margin-bottom: ${margins.sm}px;
@@ -10,12 +9,9 @@ const aboutEntryStyle = css`
 `
 
 export const AboutEntry = ({ headerMargin, listItems, header }) => {
-  const headingStyle = css`
-    margin: ${headerMargin || 0};
-  `
   return (
     <article css={aboutEntryStyle}>
-      <h2 css={headingStyle}>{header}</h2>
+      <h2>{header}</h2>
       {listItems ? (
         <ul>
           {listItems.map((item, i) => (
diff --git a/src/components/button.js b/src/components/button.js
index 0fa5ded..0fae0d5 100644
--- a/src/components/button.js
+++ b/src/components/button.js
@@ -2,47 +2,34 @@ import React from 'react'
 import { css } from '@emotion/core'
 import { Link } from 'gatsby'
 
-import { margins, radius, transitions, colours } from './globals'
-
-const makeButtonStyle = p =>
-  css`
-    font-size: ${p.fontSize || '1em'};
-    font-weight: ${p.fontWeight || '500'};
-    margin: 0;
-    padding: ${margins.md}px ${margins.md}px;
-    border: 0.5px solid #ffffff;
-    border-radius: ${radius.sm}px;
-    display: block;
-    transition: ${transitions.hover};
-    text-decoration: none;
-    background: ${p.background || 'none'};
-    & path {
+export const Button = p => {
+  const buttonStyle = ({ margins, transitions, radius, colours }) =>
+    css`
+      font-size: ${p.fontSize || '1em'};
+      font-weight: ${p.fontWeight || '500'};
+      margin: 0;
+      padding: ${margins.md}px ${margins.md}px;
+      border: 0.5px solid ${colours.main};
+      border-radius: ${radius.sm}px;
+      display: block;
       transition: ${transitions.hover};
-    }
-    &:hover {
-      background: ${p.hoverBackground || 'none'};
-      border-color: ${p.background || 'none'};
-      color: ${p.hoverColour || 'initial'};
+      text-decoration: none;
+      background: ${colours.background || 'none'};
       & path {
-        fill: ${p.hoverColour || 'initial'};
+        transition: ${transitions.hover};
       }
-    }
-  `
-
-export const Button = p => {
-  const buttonStyle = makeButtonStyle(p)
+      &:hover {
+        background: ${colours.main || 'none'};
+        border-color: ${colours.background || 'none'};
+        color: ${colours.background || 'initial'};
+        & path {
+          fill: ${colours.background || 'initial'};
+        }
+      }
+    `
   return (
     <Link to={p.to} css={buttonStyle} role="button">
       {p.children}
     </Link>
   )
 }
-
-export const DefaultButton = p => (
-  <Button
-    {...p}
-    background={colours.background}
-    hoverBackground={colours.main}
-    hoverColour={colours.background}
-  />
-)
diff --git a/src/components/container.js b/src/components/container.js
index babed1b..b820706 100644
--- a/src/components/container.js
+++ b/src/components/container.js
@@ -1,19 +1,19 @@
 import React from 'react'
 import { css } from '@emotion/core'
-import { breakpoints, margins } from './globals'
 
-const mq = breakpoints
-  .map(
-    ({ breakpoint, size }) => `
+const mq = breakpoints =>
+  breakpoints
+    .map(
+      ({ breakpoint, size }) => `
       @media (min-width: ${breakpoint}) {
         width: ${size};
       }
     `
-  )
-  .join('\n')
+    )
+    .join('\n')
 
 export const Container = p => {
-  const containerStyle = css`
+  const containerStyle = ({ breakpoints, margins }) => css`
     display: flex;
     flex-direction: column;
     margin: 0 auto;
@@ -21,7 +21,7 @@ export const Container = p => {
     width: 93%;
     height: ${p.height || '100%'};
     box-sizing: border-box;
-    ${mq}
+    ${mq(breakpoints)}
   `
   return <div css={containerStyle}>{p.children}</div>
 }
diff --git a/src/components/font-awesome.js b/src/components/font-awesome.js
index b8aec1e..db14a8b 100644
--- a/src/components/font-awesome.js
+++ b/src/components/font-awesome.js
@@ -3,19 +3,19 @@ import { css } from '@emotion/core'
 
 const DEFAULT_SIZE = '20px'
 
-export const FontAwesome = ({ icon: outerIcon, size, fill, cssProp }) => {
-  const svgStyle = css`
+export const FontAwesome = p => {
+  const { icon: outerIcon, size, fill, cssProp } = p
+  const svgStyle = t => css`
     width: ${size || DEFAULT_SIZE};
     height: ${size || DEFAULT_SIZE};
-    ${fill
-      ? `& path {
-      fill: ${fill};
-    }`
-      : ''}
+    & path {
+      fill: ${fill || t.colours.main};
+    }
+    ${typeof cssProp === 'function' ? cssProp(t) : cssProp}
   `
   const { icon, iconName } = outerIcon
   return (
-    <svg css={[svgStyle, cssProp]} viewBox={`0 0 ${icon[1]} ${icon[1]}`}>
+    <svg css={svgStyle} viewBox={`0 0 ${icon[1]} ${icon[1]}`}>
       <path d={icon[4]} />
       <desc>{iconName}</desc>
     </svg>
diff --git a/src/components/header.js b/src/components/header.js
index 6d23c02..532965f 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -3,9 +3,8 @@ import { css } from '@emotion/core'
 import { Link } from 'gatsby'
 import { Nav } from './nav'
 import { Social } from './social'
-import { margins, breakpoints } from './globals'
 
-const headerStyle = css`
+const headerStyle = ({ margins, breakpoints }) => css`
   margin: 0 0 ${margins.lg}px 0;
   display: flex;
   justify-content: center;
@@ -20,7 +19,7 @@ const headerLinkStyle = css`
   border: none;
 `
 
-const headerLeftStyle = css`
+const headerLeftStyle = ({ margins }) => css`
   margin: 0 0 ${margins.md}px 0;
 `
 
diff --git a/src/components/image.js b/src/components/image.js
index a64b31d..ab276d9 100644
--- a/src/components/image.js
+++ b/src/components/image.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import { css } from '@emotion/core'
-import { margins } from './globals'
 
 const imgContainerStyle = css`
   text-align: right;
@@ -10,7 +9,7 @@ const imgContainerStyle = css`
 `
 
 export const Image = ({ imgUrl, caption, noShadow }) => {
-  const imgStyle = css`
+  const imgStyle = ({ margins }) => css`
     max-height: 300px;
     max-width: 80vw;
     align-self: flex-end;
diff --git a/src/components/nav.js b/src/components/nav.js
index 163bb0c..7bf0bba 100644
--- a/src/components/nav.js
+++ b/src/components/nav.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { css } from '@emotion/core'
 import { Link } from 'gatsby'
-import { margins, breakpoints } from './globals'
 
 const navStyle = css`
   display: flex;
@@ -9,7 +8,7 @@ const navStyle = css`
 `
 
 export const Nav = p => {
-  const linkStyle = css`
+  const linkStyle = ({ margins, breakpoints }) => css`
     padding: 0 ${margins.sm}px ${margins.sm}px ${margins.sm}px;
     @media (min-width: ${breakpoints[0].breakpoint}) {
       padding: 0 ${margins.md}px ${margins.md}px ${margins.md}px;
diff --git a/src/components/personal.js b/src/components/personal.js
index facf258..ff7991f 100644
--- a/src/components/personal.js
+++ b/src/components/personal.js
@@ -1,9 +1,7 @@
 import React from 'react'
 import { css } from '@emotion/core'
 
-import { margins } from './globals'
-
-const personalStyle = css`
+const personalStyle = ({ margins }) => css`
   & > * {
     margin: 0 0 ${margins.md}px 0;
   }
diff --git a/src/components/project-detail.js b/src/components/project-detail.js
index 430b36b..1b4c093 100644
--- a/src/components/project-detail.js
+++ b/src/components/project-detail.js
@@ -3,9 +3,8 @@ import { css } from '@emotion/core'
 
 import { SplitContainer } from './split-container'
 import { Image } from './image'
-import { margins, breakpoints } from './globals'
 
-const descContainerStyle = css`
+const descContainerStyle = ({ breakpoints, margins }) => css`
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -19,7 +18,7 @@ const descContainerStyle = css`
   }
 `
 
-const imgContainerStyle = css`
+const imgContainerStyle = ({ margins }) => css`
   display: flex;
   flex-wrap: wrap;
   & > *:not(:last-child) {
@@ -29,7 +28,7 @@ const imgContainerStyle = css`
 
 export const ProjectDetail = ({ listItems, header, images }) => (
   <section
-    css={css`
+    css={({ margins }) => css`
       width: 100%;
       margin-bottom: ${margins.md}px;
     `}
diff --git a/src/components/project.js b/src/components/project.js
index 4aba5a0..38972ee 100644
--- a/src/components/project.js
+++ b/src/components/project.js
@@ -6,9 +6,8 @@ import { faLink } from '@fortawesome/free-solid-svg-icons'
 
 import { Tag } from './tag'
 import { ProjectDetail } from './project-detail'
-import { margins } from './globals'
 
-const projectHeadingStyle = css`
+const projectHeadingStyle = ({ margins }) => css`
   margin: 0 ${margins.sm}px 0 0;
 `
 const projectBriefStyle = css`
@@ -20,7 +19,7 @@ const projectBlockStyle = css`
   flex-wrap: wrap;
 `
 
-const linkStyle = css`
+const linkStyle = ({ margins }) => css`
   display: flex;
   align-content: center;
   margin: 0 ${margins.sm}px 0 0;
@@ -31,7 +30,7 @@ const linkStyle = css`
   }
 `
 
-const projectStyle = css`
+const projectStyle = ({ margins }) => css`
   margin: 0 0 ${margins.lg}px 0;
   & > * {
     margin: 0 0 ${margins.md}px 0;
@@ -43,7 +42,7 @@ const linkIconStyle = css`
   align-items: center;
 `
 
-const projectHeadingContainerStyle = css`
+const projectHeadingContainerStyle = ({ margins }) => css`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -57,7 +56,7 @@ const projectTagContainerStyle = css`
   flex-wrap: wrap;
 `
 
-const dateStyle = css`
+const dateStyle = ({ margins }) => css`
   margin-bottom: ${margins.sm}px;
 `
 
@@ -85,7 +84,7 @@ export const Project = p => {
       <div css={projectBlockStyle}>
         {p.desc ? (
           <div
-            css={css`
+            css={({ margins }) => css`
               margin-bottom: ${margins.md}px;
             `}
           >
diff --git a/src/components/social.js b/src/components/social.js
index f2eb3cf..de7ebcc 100644
--- a/src/components/social.js
+++ b/src/components/social.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import { css } from '@emotion/core'
-import { margins } from './globals'
 
-const socialEntryStyle = css`
+const socialEntryStyle = ({ margins }) => css`
   margin: 0 ${margins.sm}px 0 0;
   border: none;
   font-size: 24px;
diff --git a/src/components/split-container.js b/src/components/split-container.js
index 57f2ccb..f791a6b 100644
--- a/src/components/split-container.js
+++ b/src/components/split-container.js
@@ -1,9 +1,7 @@
 import React from 'react'
 import { css } from '@emotion/core'
 
-import { breakpoints, margins } from './globals'
-
-const splitSyle = css`
+const splitSyle = ({ breakpoints, margins }) => css`
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
diff --git a/src/components/tag.js b/src/components/tag.js
index b887150..2de4eaa 100644
--- a/src/components/tag.js
+++ b/src/components/tag.js
@@ -2,14 +2,13 @@ import React from 'react'
 import { FontAwesome } from './font-awesome'
 import { faTag } from '@fortawesome/free-solid-svg-icons/faTag'
 import { css } from '@emotion/core'
-import { margins, colours } from './globals'
 
-const tagIconStyle = css`
+const tagIconStyle = ({ margins }) => css`
   margin-right: ${margins.xsm}px;
 `
 
 export const Tag = p => {
-  const tagStyle = css`
+  const tagStyle = ({ colours, margins }) => css`
     margin: ${margins.sm}px 0;
     padding: ${margins.xsm}px;
     border-radius: 5px;
@@ -17,15 +16,13 @@ export const Tag = p => {
     background: ${colours.main};
     ${p.fontSize ? `font-size: ${p.fontSize}` : ''};
     line-height: 1.5em;
+    & svg path {
+      fill: ${colours.background};
+    }
   `
   return (
     <div css={tagStyle}>
-      <FontAwesome
-        icon={faTag}
-        cssProp={tagIconStyle}
-        fill={colours.background}
-        size="10px"
-      />
+      <FontAwesome icon={faTag} cssProp={tagIconStyle} size="10px" />
       {p.children}
     </div>
   )