From 5a1776455f8a8e661c88ce8989cab4e82dc1e032 Mon Sep 17 00:00:00 2001
From: Cyrill Raccaud <miaucl@users.noreply.github.com>
Date: Mon, 21 Oct 2024 08:48:03 +0000
Subject: [PATCH] complete the feature for the cover dimming class in page (#732)
---
layouts/partials/page-header.html | 6 ++++--
exampleSite/config.toml | 2 ++
layouts/partials/site-header.html | 6 ++++--
README.md | 4 ++++
4 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/README.md b/README.md
index eb128ff..f810a67 100644
--- a/README.md
+++ b/README.md
@@ -124,6 +124,10 @@
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:
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 53a2299..c02b7f5 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -38,6 +38,8 @@
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]
diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html
index 51eb0e1..8020370 100644
--- a/layouts/partials/page-header.html
+++ b/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 }}');">
- <div class="bg-black-60">
+ {{ $featured_image_class := .Params.featured_image_class | default "cover bg-center" }}
+ {{ $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 }}
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html
index 7a121fb..777b436 100644
--- a/layouts/partials/site-header.html
+++ b/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 }}');">
- <div class="{{ .Site.Params.cover_dimming_class | default "bg-black-60" }}">
+ {{ $featured_image_class := site.Params.featured_image_class | default "cover bg-top" }}
+ <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">
--
Gitblit v1.10.0