added optional jumbotron on home page

This commit is contained in:
Gabriele Musco 2021-05-04 15:21:14 +02:00
parent 0be6633185
commit 083901e517
No known key found for this signature in database
GPG Key ID: 8539FD3454380B83
4 changed files with 91 additions and 1 deletions

View File

@ -97,6 +97,7 @@ summaryLength = 70 # number of words for article summaries
infiniteScrolling = false # activates infinite scrolling instead of regular pagination infiniteScrolling = false # activates infinite scrolling instead of regular pagination
enableFooterColumns = false # activates footer columns, as described below 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 # related articles will be selected randomly based on tags and shown at
# the bottom of the article, after the comments # the bottom of the article, after the comments
enableRelatedArticles = false enableRelatedArticles = false
@ -177,6 +178,23 @@ Following is an example configuration:
link: https://gitlab.gnome.org/gabmus 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 ## Params supported in a post frontmatter
| Param | Description | | Param | Description |

View File

@ -528,3 +528,61 @@ header {
} }
} }
{{ end }} {{ 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 }}

View File

@ -1,4 +1,4 @@
<header> <header class="{{ if .IsHome }}jumbotronContainer{{ end }}">
{{- partial "inject/header-before.html" . -}} {{- partial "inject/header-before.html" . -}}
<div class="titleAndSearchContainer"> <div class="titleAndSearchContainer">
<div id="titleContainer"> <div id="titleContainer">
@ -55,4 +55,5 @@
{{ end }} {{ end }}
</div> </div>
{{- partial "inject/header-after.html" . -}} {{- partial "inject/header-after.html" . -}}
{{- partial "jumbotron.html" . -}}
</header> </header>

View File

@ -0,0 +1,13 @@
{{ if (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }}
<div class="jumbotron">
<h1>{{ .Site.Data.jumbotron.title }}</h1>
<h2>{{ .Site.Data.jumbotron.subtitle }}</h2>
{{ if .Site.Data.jumbotron.links }}
<ul>
{{ range .Site.Data.jumbotron.links }}
<li><a href="{{ .link }}">{{ .title }}</a></li>
{{ end }}
</ul>
{{ end }}
</div>
{{ end }}