yann/hugo-scroll
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
zjedi 2023-03-12 01:46:59 +01:00
parent a3c7cb214e
commit 6d688fb013
4 changed files with 32 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -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
```

13
assets/css/screen.css
View file

@ -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 {

27
exampleSite/config.toml
View file

@ -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

4
layouts/index.html
View file

@ -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>