Add option to change content font color (#286)

Co-authored-by: Regis Philibert <login@regisphilibert.com>

README.md

@@ -251,6 +251,22 @@ You can replace the title of your site in the top left corner of each page with
   site_logo = "img/logo.svg"
 ```
 
+### Set Content Font Color
+
+You can set the font color of the main content both globally and on individual pages:
+
+Globally:
+Set the `text_color` param in the `config.toml` file.
+```
+[params]
+  text_color = "green"
+```
+
+Individual Page (prioritized over global):
+Set the `text_color` param in a page's markdown file front matter.
+
+note: The value of `text_color` must be a valid tachyons color class. Alist can be found [here](http://tachyons.io/docs/themes/skins/).
+
 
 ### Localize date format
 

exampleSite/config.toml

@@ -27,6 +27,7 @@ enableRobotsTXT = true
   filename = "sitemap.xml"
 
 [params]
+  text_color = ""
   author = ""
   favicon = ""
   site_logo = ""

layouts/_default/list.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
   <article class="pa3 pa4-ns nested-copy-line-height nested-img">
-    <section class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
+    <section class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy {{ $.Param "text_color" | default "mid-gray" }}">
       {{- .Content -}}
     </section>
     <section class="flex-ns flex-wrap justify-around mt5">

layouts/_default/single.html

@@ -47,7 +47,7 @@
         <span class="f6 mv4 dib tracked"> - {{ i18n "wordCount" .WordCount }} </span>
       {{ end }}
     </header>
-    <div class="nested-copy-line-height lh-copy {{ $.Param "post_content_classes"  | default "serif"}} f4 nested-links nested-img mid-gray pr4-l w-two-thirds-l">
+    <div class="nested-copy-line-height lh-copy {{ $.Param "post_content_classes"  | default "serif"}} f4 nested-links nested-img {{ $.Param "text_color" | default "mid-gray" }} pr4-l w-two-thirds-l">
       {{- .Content -}}
       {{- partial "tags.html" . -}}
       <div class="mt6 instapaper_ignoref">

layouts/_default/taxonomy.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
   <article class="cf pa3 pa4-m pa4-l">
-    <div class="measure-wide-l center f4 lh-copy nested-copy-line-height nested-links nested-img mid-gray">
-      <p>{{i18n "taxonomyPageList" .}}</p>
+    <div class="measure-wide-l center f4 lh-copy nested-copy-line-height nested-links nested-img {{ $.Param "text_color" | default "mid-gray" }}">
+      <p>Below you will find pages that utilize the taxonomy term “{{ .Title }}”</p>
     </div>
   </article>
   <div class="mw8 center">    

layouts/_default/terms.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
     {{ $data := .Data }}
   <article class="cf pa3 pa4-m pa4-l">
-    <div class="measure-wide-l center f4 lh-copy nested-copy-line-height nested-links nested-img mid-gray">
+    <div class="measure-wide-l center f4 lh-copy nested-copy-line-height nested-links nested-img {{ $.Param "text_color" | default "mid-gray" }}">
       {{ .Content }}
     </div>
   </article>

layouts/index.html

@@ -1,6 +1,5 @@
 {{ define "main" }}
-
-  <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
+ <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy {{ $.Param "text_color" | default "mid-gray" }}">
     {{ .Content }}
   </article>
   {{/* Define a section to pull recent posts from. For Hugo 0.20 this will default to the section with the most number of pages. */}}

layouts/page/single.html

@@ -10,7 +10,7 @@
           {{ .Title }}
         </h1>
       </header>
-      <div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray">
+      <div class="nested-copy-line-height lh-copy f4 nested-links nested-img {{ $.Param "text_color" | default "mid-gray" }}">
         {{ .Content }}
       </div>
     </article>

layouts/post/list.html

@@ -3,7 +3,7 @@
   This template is the same as the default and is here to demonstrate that if you have a content directory called "post" you can create a layouts directory, just for that section.
    */}}
   <article class="pa3 pa4-ns nested-copy-line-height nested-img">
-    <section class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
+    <section class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy {{ $.Param "text_color" | default "mid-gray" }}">
       {{ .Content }}
     </section>
     <aside class="flex-ns flex-wrap justify-around mt5">

layouts/post/summary.html

@@ -1,4 +1,4 @@
-  <div class="mb3 pa4 mid-gray overflow-hidden">
+  <div class="mb3 pa4 {{ $.Param "text_color" | default "mid-gray" }} overflow-hidden">
     {{ if .Date }}
       <div class="f6">
         {{ .Date.Format (default "January 2, 2006" .Site.Params.date_format) }}