Move most in-line styles to Tachyons classes.

ohookins · Jun 1, 2018 · f53aabd · f53aabd
1 parent da394e0
commit f53aabd
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 22 deletions.
diff --git a/src/components/Buttons/index.js b/src/components/Buttons/index.js
@@ -2,15 +2,9 @@ import React from 'react'
 import Link from 'gatsby-link'
 
 const Buttons = () => (
-    <div style={{
-        display:'flex',
-        justifyContent: 'center'
-    }}>
+    <div className="flex justify-center">
         <div className="w-70 bg-dark-gray">
-            <div className="cabin f5" style={{
-                display:'flex',
-                justifyContent: 'center'
-            }}>
+            <div className="cabin f5 flex justify-center">
                 <Link to="/" className="link dim ph4 pv2 mb2 dib white-90 bg-mid-gray">
                     Home
                 </Link>
@@ -24,4 +18,4 @@ const Buttons = () => (
 );
 
 export default Buttons
-  
+
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
@@ -2,12 +2,7 @@ import React from 'react';
 import Link from 'gatsby-link';
 
 const Footer = () => (
-    <div className="cabin" style={{
-        margin: '0 auto',
-        width: '50%',
-        display: 'flex',
-        justifyContent: 'center'
-    }} >
+    <div className="cabin center mw6 flex justify-center">
       <div className="ph2 pt4">© 2010-2018 Oliver Hookins</div>
     </div>
 );

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -10,10 +10,8 @@ const Header = () => (
     >
 
       <h1 className="f1 f-headline-m fw8 quattrocento">
-        <Link
-          to="/"
+        <Link to="/" className="black-20 dim"
           style={{
-            color: '#999999',
             textDecoration: 'none',
             textShadow: "1px 1px #555555"
           }}

diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -18,10 +18,7 @@ const TemplateWrapper = ({ children }) => (
     />
     <Header />
     <Buttons />
-    <div style={{
-      display: 'flex',
-      justifyContent: 'center'
-    }}>
+    <div className="flex justify-center">
       <div className="fl w-70 bg-dark-gray pa3 pl5 pr5">
         {children()}
       </div>