added optional jumbotron on home page

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 |

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

layouts/partials/header.html

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

layouts/partials/jumbotron.html

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