Header logo - documented, added to example site, CSS fixed

README.md

@@ -37,6 +37,9 @@ This theme includes the full set of [Fork Awesome 1.2.0 Icons][fork-awesome-icon
 Look at this nice »envelope«-icon: `{{<icon class="fa fa-envelope">}}`. I took this from https://forkaweso.me/Fork-Awesome/icon/envelope/ :-)
 ```
 
+### Header logo
+Configured in `_index.md`, see `exampleSite`: `header_logo: "images/chef-hat.png"`
+
 ### External links
 You can add external link in the menu, see `external.md` in the `exampleSite`.
 

assets/css/screen.css

@@ -416,7 +416,7 @@ li {
 }
 
 /* Yo-logo. Yolo-go. Upload one in ghost/settings/ */
-#blog-logo img {
+#blog-logo {
   display: block;
   max-height: 100px;
   width: auto;
@@ -950,7 +950,7 @@ a.fn-item.active {
   .post-holder {
     padding-top: 20px;
   }
-  #blog-logo img {
+  #blog-logo {
     max-height: 80px;
   }
 

exampleSite/config.toml

@@ -11,7 +11,7 @@ theme = "hugo-scroll"
 # The browser tab name
 title = "Jane Doe - Nutrition Coach & Chef Consultant"
 
-# Theme-specific variables
+# Theme-specific variables `.Site.Params.myParamName`
 [params]
 
     # The path to your "favicon". This should be a square (at least 32px x 32px) png-file.
@@ -19,13 +19,14 @@ title = "Jane Doe - Nutrition Coach & Chef Consultant"
 
     # These "images" are used for the structured data templates. This will show up, when
     # services like Twitter or Slack want to generate a preview of a link to your site.
-    # See https://gohugo.io/templates/internal#twitter-cards and
-    # https://gohugo.io/templates/internal#open-graph.
+    # See https://gohugo.io/templates/internal#twitter-cards and https://gohugo.io/templates/internal#open-graph.
+    # NOT the actual header background image, go to _index.md instead
     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
+    # see _index.md header_headline and header_subheadline
     title_guard = false
 
     # Another "title" :-). This one is used as the site_name on the Hugo's internal

exampleSite/content/_index.md

@@ -1,5 +1,8 @@
 ---
+# Striking header background image, Ideal images are homogenous around the centre and contrasting to the text. Non-ideal images can use `title_guard`
 header_image: "images/cover-image.jpg"
+# Optional header logo. CSS: `#blog-logo`, with max-height defined, optimize to prevent scaling
+header_logo: "images/chef-hat.png"
 header_headline: "Jane Doe"
 header_subheadline: "Hi there , I am a Nutrition Coach & Chef Consultant"
 ---

exampleSite/content/homepage/credits.md

@@ -0,0 +1,8 @@
+---
+title: "Credits"
+weight: 99
+header_menu: true
+---
+In this section we give thanks to authors of resources used on this demo page.
+![Nice picture to make you pay me ;-)](images/chef-hat.png)
+{{<extlink text="Chef-hat icons created by Cuputo - Flaticon" href="https://www.flaticon.com/free-icons/chef-hat">}}

exampleSite/content/homepage/services.md

@@ -8,7 +8,7 @@ That is the important part, right? You want to know what I can do for you. This
 
 ---
 
-## Nutrition Coaching
+### Nutrition Coaching
 
 This is not an easy task. You will likely have to pay money for this. You know what - let us look at a nice picture first.
 
@@ -16,9 +16,7 @@ This is not an easy task. You will likely have to pay money for this. You know w
 
 Wow. That was nice, right? Well, call me and let us talk.
 
----
-
-## Chef Consulting
+### Chef Consulting
 
 Did you see the picture above? I can show you how to go from
 
@@ -34,4 +32,4 @@ in estimated seconds.
 
 Want to learn more about my services?
 
-Check out [this page](services) I created. It carries a lot more details...
+Check out [dedicated page](services) with a lot more details.

layouts/index.html

@@ -7,7 +7,7 @@
 <header id="site-head" {{ with .Params.header_image }}style="background-image: url({{ . }})"{{ end }}>
     <div class="vertical">
         <div id="site-head-content" class="inner">
-            {{ with .Params.header_logo }}<img class="blog-logo" src="{{ . }}" />{{ end }}
+            {{ with .Params.header_logo }}<img id="blog-logo" src="{{ . }}" />{{ end }}
             {{ 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 }}