added optional jumbotron on home page
This commit is contained in:
parent
0be6633185
commit
083901e517
18
README.md
18
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 |
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<header>
|
||||
<header class="{{ if .IsHome }}jumbotronContainer{{ end }}">
|
||||
{{- partial "inject/header-before.html" . -}}
|
||||
<div class="titleAndSearchContainer">
|
||||
<div id="titleContainer">
|
||||
|
@ -55,4 +55,5 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
{{- partial "inject/header-after.html" . -}}
|
||||
{{- partial "jumbotron.html" . -}}
|
||||
</header>
|
||||
|
|
|
@ -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 }}
|
Loading…
Reference in New Issue