From 7f5462eefb4717ba9328108986eac1313f4e2216 Mon Sep 17 00:00:00 2001 From: zjedi Date: Tue, 14 Mar 2023 22:22:58 +0100 Subject: [PATCH] Header logo - documented, added to example site, CSS fixed --- README.md | 3 +++ assets/css/screen.css | 4 ++-- exampleSite/config.toml | 7 ++++--- exampleSite/content/_index.md | 3 +++ exampleSite/content/homepage/credits.md | 8 ++++++++ exampleSite/content/homepage/services.md | 8 +++----- exampleSite/static/images/chef-hat.png | Bin 0 -> 3001 bytes layouts/index.html | 2 +- 8 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 exampleSite/content/homepage/credits.md create mode 100644 exampleSite/static/images/chef-hat.png diff --git a/README.md b/README.md index f28bc97..25ae994 100644 --- a/README.md +++ b/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: `{{}}`. 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`. diff --git a/assets/css/screen.css b/assets/css/screen.css index 7349489..15f3019 100644 --- a/assets/css/screen.css +++ b/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; } diff --git a/exampleSite/config.toml b/exampleSite/config.toml index dbbd1b9..79b87b1 100644 --- a/exampleSite/config.toml +++ b/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 diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index e765ccd..fa544e3 100644 --- a/exampleSite/content/_index.md +++ b/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" --- diff --git a/exampleSite/content/homepage/credits.md b/exampleSite/content/homepage/credits.md new file mode 100644 index 0000000..659be1e --- /dev/null +++ b/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) +{{}} diff --git a/exampleSite/content/homepage/services.md b/exampleSite/content/homepage/services.md index fde7687..01ac68e 100644 --- a/exampleSite/content/homepage/services.md +++ b/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. diff --git a/exampleSite/static/images/chef-hat.png b/exampleSite/static/images/chef-hat.png new file mode 100644 index 0000000000000000000000000000000000000000..14956d14d904d648592643ed1f0e9c74e6ce75e3 GIT binary patch literal 3001 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
- {{ with .Params.header_logo }}{{ end }} + {{ with .Params.header_logo }}{{ end }} {{ if .Site.Params.title_guard }}
{{ end }} {{ with .Params.header_headline }}

{{ . | safeHTML }}

{{ end }} {{ with .Params.header_subheadline }}

{{ . }}

{{ end }}