From 6d688fb013457121cb5edb39203b05f09b6f58d8 Mon Sep 17 00:00:00 2001 From: zjedi Date: Sun, 12 Mar 2023 01:46:59 +0100 Subject: [PATCH] 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 | 2 +- assets/css/screen.css | 13 ++++++++++++- exampleSite/config.toml | 27 +++++++++++++++++---------- layouts/index.html | 4 ++-- 4 files changed, 32 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index c6efd2f..afa695a 100644 --- a/README.md +++ b/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 ``` diff --git a/assets/css/screen.css b/assets/css/screen.css index eb1909a..8868111 100644 --- a/assets/css/screen.css +++ b/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 { diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 91ecc97..dbbd1b9 100644 --- a/exampleSite/config.toml +++ b/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. - # You can turn it off, but we would really appreciate if you don’t :-) - # hidedesignbyline = true + # The "description" of your website. This is used in the meta data of your generated html. + description = "Nutrition Coach & Chef Consultant" [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 diff --git a/layouts/index.html b/layouts/index.html index 5936d4a..305dffb 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -7,10 +7,10 @@