Add option to change content font color (#286)

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

10 files changed, 26 insertions, 10 deletions

diff --git a/README.md b/README.md
index 9c37c65..3d9ed80 100644
--- a/README.md
+++ b/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
 
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 6b9f5f6..684f524 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -27,6 +27,7 @@ enableRobotsTXT = true
   filename = "sitemap.xml"
 
 [params]
+  text_color = ""
   author = ""
   favicon = ""
   site_logo = ""
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 130a357..b4bc8de 100755
--- a/layouts/_default/list.html
+++ b/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">
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index fe2c3b3..f9efd2f 100755
--- a/layouts/_default/single.html
+++ b/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">
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 1dc0ff2..cba785a 100644
--- a/layouts/_default/taxonomy.html
+++ b/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">    
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index 87275c7..e448fca 100644
--- a/layouts/_default/terms.html
+++ b/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>
diff --git a/layouts/index.html b/layouts/index.html
index bb3c5a5..2fbe6cd 100755
--- a/layouts/index.html
+++ b/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. */}}
diff --git a/layouts/page/single.html b/layouts/page/single.html
index ac9d199..fff3754 100644
--- a/layouts/page/single.html
+++ b/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>
diff --git a/layouts/post/list.html b/layouts/post/list.html
index 73c9b5c..5d05240 100644
--- a/layouts/post/list.html
+++ b/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">
diff --git a/layouts/post/summary.html b/layouts/post/summary.html
index 5856b4a..aa92cc7 100644
--- a/layouts/post/summary.html
+++ b/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) }}