diff --git a/README.md b/README.md index 984dd92..3b6d17b 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,7 @@ summaryLength = 70 # number of words for article summaries infiniteScrolling = false # activates infinite scrolling instead of regular pagination enableFooterColumns = false # activates footer columns, as described below + enableJumbotron = false # enables jumbotron, as described below # related articles will be selected randomly based on tags and shown at # the bottom of the article, after the comments enableRelatedArticles = false @@ -177,6 +178,23 @@ Following is an example configuration: link: https://gitlab.gnome.org/gabmus ``` +## Jumbotron + +You can add a jumbotron at the beginning of the home page using the `data/jumbotron.yml` file. + +Following is an example configuration: + +```yaml +title: My awesome website +subtitle: Some fancy subtitle +background: /img/jumbotron_bg.png +links: + - title: About me + link: /pages/about + - title: Read my blog + link: /posts +``` + ## Params supported in a post frontmatter | Param | Description | diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 929904d..ba3ad65 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -528,3 +528,61 @@ header { } } {{ end }} + +{{ if (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }} +header { + .jumbotron { display: none; } + margin-top: -15px; + margin-left: -15px; + margin-right: -15px; + padding-top: 15px; + padding-left: 15px; + padding-right: 15px; +} +header.jumbotronContainer { + .jumbotron { display: flex; } + {{ if .Site.Data.jumbotron.background }} + background: + linear-gradient( + transparentize($bg_color, 0.2), + transparentize($bg_color, 0.2) + ), + url({{ .Site.Data.jumbotron.background }}); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + {{ else }} + background-color: rgba(0, 0, 0, .3); + {{ end }} +} +.jumbotron { + top: 0; + left: 0; + width: 100%; + min-height: 40vh; + flex-direction: column; + text-align: center; + justify-content: center; + align-items: center; + h1 { + font-weight: 300; + } + ul { + list-style: none; + padding: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + li { + margin: 3px; + a { + {{ if eq .Site.Params.navType "circles" }} + @include buttonLikeLink; + background-color: transparentize($highlight_bg_color, .3); + {{ end }} + } + } + } +} +{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 964aac3..fc15cf6 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,4 +1,4 @@ -
+
{{- partial "inject/header-before.html" . -}}
@@ -55,4 +55,5 @@ {{ end }}
{{- partial "inject/header-after.html" . -}} + {{- partial "jumbotron.html" . -}}
diff --git a/layouts/partials/jumbotron.html b/layouts/partials/jumbotron.html new file mode 100644 index 0000000..e9820da --- /dev/null +++ b/layouts/partials/jumbotron.html @@ -0,0 +1,13 @@ +{{ if (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }} +
+

{{ .Site.Data.jumbotron.title }}

+

{{ .Site.Data.jumbotron.subtitle }}

+ {{ if .Site.Data.jumbotron.links }} + + {{ end }} +
+{{ end }}