complete the feature for the cover dimming class in page (#732)

- feature already present for site
- add info for the param to the example

Like https://github.com/theNewDynamic/gohugo-theme-ananke/pull/702, this
PR wants to add the cover class to the page as well, but adds also the
documentation to the example and allows both for page params and site
params.

Solves https://github.com/theNewDynamic/gohugo-theme-ananke/issues/696
in a proper way for site and page with fallback and documentation in the
example.

Default:

<img width="1512" alt="Bildschirmfoto 2024-10-12 um 14 47 12"
src="https://github.com/user-attachments/assets/fbbec618-2045-4be7-94d7-09169a253a96">

Same as default `cover_dimming_class = bg-black-60`:

<img width="1512" alt="Bildschirmfoto 2024-10-12 um 14 47 12"
src="https://github.com/user-attachments/assets/fbbec618-2045-4be7-94d7-09169a253a96">

`cover_dimming_class = bg-black-20`:

<img width="1512" alt="Bildschirmfoto 2024-10-12 um 14 47 20"
src="https://github.com/user-attachments/assets/7bf64564-4f6d-42c9-bed1-83b426d487ae">

`cover_dimming_class = bg-black-90`:

<img width="1512" alt="Bildschirmfoto 2024-10-12 um 14 47 34"
src="https://github.com/user-attachments/assets/354a0e49-7446-46d7-adc1-f8e4ecee3831">


**Closing issues**

closes #702
closes #696

---------

Signed-off-by: Patrick Kollitsch <patrick@davids-neighbour.com>
Co-authored-by: Patrick Kollitsch <patrick@davids-neighbour.com>

README.md

@@ -124,6 +124,10 @@ The default fitting and alignment for th featured image is `cover bg-top`, but c
 
 example: `featured_image_class = "cover bg-center"` or `featured_image_class = "contain bg-top"`
 
+The default cover backdrop for the featured image is `bg-black-60`, but can be changed using the `cover_dimming_class`.  Choose a color dimming class for the page or size header from any on the [Tachyons](https://tachyons.io/docs/themes/skins/) library site, preface it with "bg-" and add the value such as "-X0" where X is in [1,9]
+
+example: `cover_dimming_class = "bg-black-20"` or `cover_dimming_class = "bg-white-40"`
+
 ### Activate the contact form
 
 This theme includes a shortcode for a contact form that you can add to any page (there is an example on the contact page in the exampleSite folder). One option is to use [formspree.io](//formspree.io/) as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Visit the Formspree site to get the "action" link and add it to your shortcode like this:

exampleSite/config.toml

@@ -38,6 +38,8 @@ description = "The last theme you'll ever need. Maybe."
 background_color_class = "bg-black"
 # choose an fitting and alignment style for the featured image using tachyons classes such as "cover|contain" for fitting and "bg-top|bg-center|bg-bottom" for alignment, or add any other class space-separated to customize further
 featured_image_class = "cover bg-top"
+# choose a color dimming class for the page or size header from any on this page: https://tachyons.io/docs/themes/skins/, preface it with "bg-" and add the value such as "-X0" where X is in [1,9]
+cover_dimming_class = "bg-black-60"
 recent_posts_number = 3
 
 [ananke.social.follow]

layouts/partials/page-header.html

@@ -1,8 +1,10 @@
 {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
 {{ if $featured_image }}
   {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
-  <header class="{{ .Params.featured_image_class | .Site.Params.featured_image_class | default "cover bg-top" }}" style="background-image: url('{{ $featured_image }}');">
+  {{ $featured_image_class := .Params.featured_image_class | default "cover bg-center" }}
-    <div class="bg-black-60">
+  {{ $cover_dimming_class := .Params.cover_dimming_class | default "bg-black-60" }}
+  <header class="{{ $featured_image_class }}" style="background-image: url('{{ $featured_image }}');">
+    <div class="{{ $cover_dimming_class }}">
       {{ partial "site-navigation.html" . }}
       <div class="tc-l pv6 ph3 ph4-ns">
         {{ if not .Params.omit_header_text }}

layouts/partials/site-header.html

@@ -1,8 +1,10 @@
 {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
 {{ if $featured_image }}
   {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
-  <header class="{{ .Site.Params.featured_image_class | default "cover bg-top" }}" style="background-image: url('{{ $featured_image }}');">
+  {{ $featured_image_class := site.Params.featured_image_class | default "cover bg-top" }}
-    <div class="{{ .Site.Params.cover_dimming_class | default "bg-black-60" }}">
+  <header class="{{ $featured_image_class }}" style="background-image: url('{{ $featured_image }}');">
+    {{ $cover_dimming_class := site.Params.cover_dimming_class | default "bg-black-60" }}
+    <div class="{{ $cover_dimming_class }}">
       {{ partial "site-navigation.html" .}}
       <div class="tc-l pv4 pv6-l ph3 ph4-ns">
         <h1 class="f2 f-subheadline-l fw2 white-90 mb0 lh-title">