title color tuned and new feature title_guard: When set true, it creates a visual guard (partially transparent rounded box), preventing non-ideal background images from interfering with title/description headings

README.md

@@ -11,7 +11,7 @@ If you already have a hugo site on your machine, you can simply add this theme v
 ```
 git submodule add https://github.com/janraasch/hugo-scroll.git themes/hugo-scroll
 ```
-Then, adjust the `config.toml` as detailed below.
+Then, adjust the `config.toml` as detailed below & in the file comments.
 
 If you simply want to check out the `exampleSite`, you can run
 ```

assets/css/screen.css

@@ -433,20 +433,31 @@ li {
   font-size: 16px;
 }
 
-/* The details of your blog. Defined in ghost/settings/ */
+.title-and-description-guard {
+    margin: auto;
+    padding: 0.5em;
+    background-color: rgb(255 255 255 / 60%);
+    border-radius: 25px;
+    width: fit-content;
+}
+
 .blog-title {
+  color: #37501a;
   margin: 10px 0 10px 0;
   font-size: 5rem;
   letter-spacing: -1px;
+  text-shadow: white 0px 0px 7px;
 }
 
 .blog-description {
+  color: #37501a;
   margin: 0;
   font-size: 2.5rem;
   line-height: 1.5em;
   font-weight: 400;
   font-family: "Roboto Slab", serif;
   letter-spacing: 0;
+  text-shadow: white 0px 0px 7px;
 }
 
 .post-holder {

exampleSite/config.toml

@@ -8,16 +8,11 @@ defaultContentLanguage = "en"
 # The name of this wonderful theme ;-).
 theme = "hugo-scroll"
 
-# The "title" of your website
+# The browser tab name
 title = "Jane Doe - Nutrition Coach & Chef Consultant"
 
+# Theme-specific variables
 [params]
-    # A "copyright"-line to be added at the bottom of the page.
-    # Hint: Markdown is supported in here as well. So you may e.g. add a link to your legal imprint-page.
-    copyright = "© Jane Doe"
-
-    # The "description" of your website. This is used in the meta data of your generated html.
-    description = "Nutrition Coach & Chef Consultant"
 
     # The path to your "favicon". This should be a square (at least 32px x 32px) png-file.
     favicon = "images/favicon.png"
@@ -28,14 +23,26 @@ title = "Jane Doe - Nutrition Coach & Chef Consultant"
     # https://gohugo.io/templates/internal#open-graph.
     images = ["images/cover-image.jpg"]
 
+    # When set true, it creates a visual guard (partially transparent rounded box), preventing non-ideal background images from interfering with title/description headings
+    # Ideal images are homogenous around the centre and contrasting to the text.
+    # see CSS classes: .title-and-description-guard, .blog-title, .blog-description
+    title_guard = false
+
     # Another "title" :-). This one is used as the site_name on the Hugo's internal
     # opengraph structured data template.
     # See https://ogp.me/ and https://gohugo.io/templates/internal#open-graph.
     title = "Jane Doe - Nutrition Coach & Chef Consultant"
 
-    # This theme will, by default, inject a design-by-line at the bottom of the page.
+    # The "description" of your website. This is used in the meta data of your generated html.
-    # You can turn it off, but we would really appreciate if you don’t :-)
+    description = "Nutrition Coach & Chef Consultant"
-    # hidedesignbyline = true
 
     [params.meta]
         keywords = "some, keywords, for, seo, you, know, google, duckduckgo, and, such"
+
+    # A "copyright"-line to be added at the bottom of the page.
+    # Hint: Markdown is supported in here as well. So you may e.g. add a link to your legal imprint-page.
+    copyright = "© Jane Doe"
+
+    # This theme will, by default, inject a design-by-line at the bottom of the page.
+    # You can turn it off, but we would really appreciate if you don’t :-)
+    # hidedesignbyline = true

layouts/index.html

@@ -7,10 +7,10 @@
 <header id="site-head" {{ with .Params.header_image }}style="background-image: url({{ . }})"{{ end }}>
     <div class="vertical">
         <div id="site-head-content" class="inner">
-
+            {{ if .Site.Params.title_guard }}<div class="title-and-description-guard">{{ end }}
             {{ with .Params.header_headline }}<h1 class="blog-title">{{ . | safeHTML }}</h1>{{ end }}
             {{ with .Params.header_subheadline }}<h2 class="blog-description">{{ . }}</h2>{{ end }}
-
+            {{ if .Site.Params.title_guard }}</div>{{ end }}
             {{ range where $sections ".Params.header_menu" "eq" true }}
               {{ if isset .Params "external" }}
                  <a class='btn site-menu' href='{{ .Params.external  }}'>{{ .Title }} <icon class="fa fa-external-link"></icon></a>