change primary text color

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"

src/layouts/index.css

@@ -1,8 +0,0 @@
-.full-width-container {
-  width: 100vw;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  margin-left: -50vw;
-  margin-right: -50vw;
-}

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>

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.

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>

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>