From 3b30dfbac339546d9ae6cd185217699f2044b360 Mon Sep 17 00:00:00 2001
From: Tanner Smith <tannersmithtn95@gmail.com>
Date: Thu, 23 Dec 2021 20:01:14 +0000
Subject: [PATCH] Add option to change content font color (#286)
---
exampleSite/config.toml | 1 +
layouts/_default/list.html | 2 +-
layouts/_default/single.html | 2 +-
layouts/post/list.html | 2 +-
layouts/_default/taxonomy.html | 4 ++--
layouts/post/summary.html | 2 +-
layouts/index.html | 3 +--
layouts/page/single.html | 2 +-
layouts/_default/terms.html | 2 +-
README.md | 16 ++++++++++++++++
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 @@
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 @@
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) }}
--
Gitblit v1.10.0