Add option to change content font color (#286)

Tanner Smith

23.01.2021 3b30dfbac339546d9ae6cd185217699f2044b360

Add option to change content font color (#286)

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

 README.md

@@ -251,6 +251,22 @@
  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 @@
  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) }}