From 867c82e05230ae91033c7f856511d554403c488d Mon Sep 17 00:00:00 2001
From: Austin Green <austinzgreen@gmail.com>
Date: Thu, 2 Nov 2017 17:40:58 -0400
Subject: [PATCH] change primary text color

---
 src/layouts/all.sass       | 20 ++++++++++++++++++++
 src/layouts/index.css      |  8 --------
 src/layouts/index.js       |  9 ++++-----
 src/pages/about/about.md   |  2 +-
 src/pages/index.js         |  6 ++++--
 src/templates/blog-post.js |  2 +-
 6 files changed, 30 insertions(+), 17 deletions(-)
 create mode 100644 src/layouts/all.sass
 delete mode 100644 src/layouts/index.css

diff --git a/src/layouts/all.sass b/src/layouts/all.sass
new file mode 100644
index 0000000..20b8ce9
--- /dev/null
+++ b/src/layouts/all.sass
@@ -0,0 +1,20 @@
+@import "~bulma/sass/utilities/initial-variables"
+
+// Config
+$kaldi-red: #FD461E
+$kaldi-red-invert: #fff
+
+$primary: $kaldi-red
+$primary-invert: $kaldi-red-invert
+
+// Helper Classes
+.full-width-container
+  width: 100vw
+  position: relative
+  left: 50%
+  right: 50%
+  margin-left: -50vw
+  margin-right: -50vw
+
+
+@import "~bulma"
diff --git a/src/layouts/index.css b/src/layouts/index.css
deleted file mode 100644
index a18e160..0000000
--- a/src/layouts/index.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.full-width-container {
-  width: 100vw;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  margin-left: -50vw;
-  margin-right: -50vw;
-}
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 517a5d5..5f4dc8a 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -4,16 +4,15 @@ import Link from 'gatsby-link';
 import Helmet from 'react-helmet';
 import github from '../img/github-icon.svg';
 import logo from '../img/logo.svg';
-import 'bulma';
-import './index.css';
+import './all.sass';
 
 const Navbar = () => (
-  <nav className="navbar is-light">
-    <div className="container">
+  <nav className="navbar is-transparent">
+    <div className="container flex-column-mobile">
       <div className="navbar-brand">
         <Link to="/" className="navbar-item">
           <figure className="image">
-            <img src={logo} alt="Kaldi" width="88" />
+            <img src={logo} alt="Kaldi" style={{ width: '88px' }} />
           </figure>
         </Link>
       </div>
diff --git a/src/pages/about/about.md b/src/pages/about/about.md
index 6202ea7..508e233 100644
--- a/src/pages/about/about.md
+++ b/src/pages/about/about.md
@@ -1,7 +1,7 @@
 ---
 templateKey: 'about-page'
 path: /about
-title: Values
+title: About our values
 ---
 ### Shade-grown coffee
 Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species.
diff --git a/src/pages/index.js b/src/pages/index.js
index e43dbe8..ae696cc 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -28,7 +28,9 @@ export default class IndexPage extends React.Component {
             return (
               <div className="content" style={{ border: '1px solid #eaecee', padding: '2em 4em' }} key={post.id}>
                 <p>
-                  <Link to={post.frontmatter.path}>{post.frontmatter.title}</Link>
+                  <Link className="has-text-primary" to={post.frontmatter.path}>
+                    {post.frontmatter.title}
+                  </Link>
                   <span> &bull; </span>
                   <small>{post.frontmatter.date}</small>
                 </p>
@@ -36,7 +38,7 @@ export default class IndexPage extends React.Component {
                   {post.excerpt}
                   <br />
                   <br />
-                  <Link className="button is-info is-small" to={post.frontmatter.path}>
+                  <Link className="button is-primary is-small" to={post.frontmatter.path}>
                     Keep Reading
                   </Link>
                 </p>
diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
index 4e55354..2ae25da 100644
--- a/src/templates/blog-post.js
+++ b/src/templates/blog-post.js
@@ -7,7 +7,7 @@ export default function Template({ data }) {
     <section className="section">
       <Helmet title={`Blog | ${post.frontmatter.title}`} />
       <div className="container content">
-        <h1 className="title is-size-2 has-text-info is-bold-light">{post.frontmatter.title}</h1>
+        <h1 className="title is-size-2 has-text-primary is-bold-light">{post.frontmatter.title}</h1>
         <p>{post.frontmatter.description}</p>
         <div dangerouslySetInnerHTML={{ __html: post.html }} />
       </div>