From a70c2a11f3bb68532b382688821a6421f4c91e4b Mon Sep 17 00:00:00 2001
From: John Pursey <john.pursey@gmail.com>
Date: Sun, 12 Dec 2021 10:15:24 -0800
Subject: [PATCH] Add tachyons-style class overrides for layouts

This change adds overrides for text scale, color, alignment, and padding
in all layouts. This can be configured in site or page parameters, and
can target the default for all layouts (mostly useful for scale and
color), or for a specific layout (home, post, list, page, or terms).

The parameters are named in the following way: <type>_<style>:
- default_scale: Defines default scale for content (aka f5)
- default_color: Defines default color for content (aka mid-gray)
- default_padding: Defines default padding for content (aka ph*/pv*)
- default_align: Defines default alignment for content (aka tc/tj)

This can be overridden for "home", "post", "list", "page", or "terms" by
using instead of "default". If a type-specific style is not specified,
then it will fall back on "default", and if default is not specified, it
will fall back on the Ananke theme default.

Of course, theme users may put whatever classes they want in these
settings, but it still is valuable to specify what will be overridden
from the theme.
---
 layouts/_default/list.html   | 6 +++++-
 layouts/_default/single.html | 7 ++++++-
 layouts/_default/terms.html  | 6 +++++-
 layouts/index.html           | 7 +++++--
 layouts/page/single.html     | 6 +++++-
 layouts/post/list.html       | 6 +++++-
 6 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 130a357..ddb4da0 100755
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,6 +1,10 @@
 {{ 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">
+    {{ $cpadding := $.Param "list_padding" | default ($.Param "default_padding") | default "ph3 ph5-l pv3 pv4-l" }}  
+    {{ $cscale := $.Param "list_scale" | default ($.Param "default_scale") | default "f4" }}  
+    {{ $calign := $.Param "list_align" | default ($.Param "default_align") | default "tc-l" }}  
+    {{ $ccolor := $.Param "list_color" | default ($.Param "default_color") | default "mid-gray" }}
+    <section class="cf {{ $cpadding }} {{ $cscale }} {{ $calign }} center measure-wide lh-copy {{ $ccolor }}">
       {{- .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..99248ce 100755
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -47,7 +47,12 @@
         <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">
+    {{ $cclasses := $.Param "post_content_classes"  | default "serif" }}
+    {{ $cpadding := $.Param "post_padding" | default ($.Param "default_padding") }}  
+    {{ $cscale := $.Param "post_scale" | default ($.Param "default_scale") | default "f4" }}  
+    {{ $calign := $.Param "post_align" | default ($.Param "default_align") }}  
+    {{ $ccolor := $.Param "post_color" | default ($.Param "default_color") | default "mid-gray" }}
+    <div class="nested-copy-line-height lh-copy {{ $cclasses }} {{ $cpadding }} {{ $cscale }} {{ $calign }} nested-links nested-img {{ $ccolor }} pr4-l w-two-thirds-l">
       {{- .Content -}}
       {{- partial "tags.html" . -}}
       <div class="mt6 instapaper_ignoref">
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index 87275c7..7c81b19 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -1,7 +1,11 @@
 {{ 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">
+    {{ $cpadding := $.Param "terms_padding" | default ($.Param "default_padding") }}  
+    {{ $cscale := $.Param "terms_scale" | default ($.Param "default_scale") | default "f4" }}  
+    {{ $calign := $.Param "terms_align" | default ($.Param "default_align") }}  
+    {{ $ccolor := $.Param "terms_color" | default ($.Param "default_color") | default "mid-gray" }}
+    <div class="measure-wide-l center {{ $cpadding }} {{ $cscale }} {{ $calign }} lh-copy nested-copy-line-height nested-links nested-img {{ $ccolor }}">
       {{ .Content }}
     </div>
   </article>
diff --git a/layouts/index.html b/layouts/index.html
index bb3c5a5..422bc68 100755
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,6 +1,9 @@
 {{ define "main" }}
-
-  <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
+  {{ $cpadding := $.Param "home_padding" | default ($.Param "default_padding") | default "ph3 ph5-l pv3 pv4-l" }}  
+  {{ $cscale := $.Param "home_scale" | default ($.Param "default_scale") | default "f4" }}  
+  {{ $calign := $.Param "home_align" | default ($.Param "default_align") | default "tc-l" }}  
+  {{ $ccolor := $.Param "home_color" | default ($.Param "default_color") | default "mid-gray" }}
+  <article class="cf {{ $cpadding }} {{ $cscale }} {{ $calign }} center measure-wide lh-copy {{ $ccolor }}">
     {{ .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..6aab489 100644
--- a/layouts/page/single.html
+++ b/layouts/page/single.html
@@ -10,7 +10,11 @@
           {{ .Title }}
         </h1>
       </header>
-      <div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray">
+      {{ $cpadding := $.Param "page_padding" | default ($.Param "default_padding") }}  
+      {{ $cscale := $.Param "page_scale" | default ($.Param "default_scale") | default "f4" }}  
+      {{ $calign := $.Param "page_align" | default ($.Param "default_align") }}  
+      {{ $ccolor := $.Param "page_color" | default ($.Param "default_color") | default "mid-gray" }}
+      <div class="nested-copy-line-height lh-copy {{ $cpadding }} {{ $cscale }} {{ $calign }} nested-links nested-img {{ $ccolor }}">
         {{ .Content }}
       </div>
     </article>
diff --git a/layouts/post/list.html b/layouts/post/list.html
index 73c9b5c..d61ff2d 100644
--- a/layouts/post/list.html
+++ b/layouts/post/list.html
@@ -3,7 +3,11 @@
   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">
+    {{ $cpadding := $.Param "list_padding" | default ($.Param "default_padding") | default "ph3 ph5-l pv3 pv4-l" }}  
+    {{ $cscale := $.Param "list_scale" | default ($.Param "default_scale") | default "f4" }}  
+    {{ $calign := $.Param "list_align" | default ($.Param "default_align") | default "tc-l" }}  
+    {{ $ccolor := $.Param "list_color" | default ($.Param "default_color") | default "mid-gray" }}
+    <section class="cf {{ $cpadding }} {{ $cscale }} {{ $calign }} center measure-wide lh-copy {{ $ccolor }}">
       {{ .Content }}
     </section>
     <aside class="flex-ns flex-wrap justify-around mt5">