added new features to the jumbotron

README.md

@@ -199,8 +199,13 @@ Following is an example configuration:
 
 ```yaml
 title: My awesome website
-subtitle: Some fancy subtitle 
+hugeTitle: false
+subtitle: Some fancy subtitle
+image: /jumbotron_image.svg
+imagePosition: left  # values: left, right, top, bottom
 background: /img/jumbotron_bg.png
+fullscreen: false
+downArrow: false
 links:
   - title: About me
     link: /pages/about

assets/scss/style.scss

@@ -647,16 +647,91 @@ header.jumbotronContainer {
     {{ else }}
         background-color: rgba(0, 0, 0, .3);
     {{ end }}
+    {{ if (.Site.Data.jumbotron.fullscreen | default false) }}
+        height: 100vh;
+        {{ if (.Site.Data.jumbotron.downArrow | default false) }}
+            .arrow {
+                cursor: pointer;
+                &, svg {
+                    height: 64px;
+                    width: 64px;
+                }
+                opacity: .7;
+                border-radius: 100%;
+                border: 2px solid $fg_color;
+                padding: 3px;
+                // display: flex; flex-direction: row; justify-content: center;
+                background-color: transparent;
+                transition: background-color .15s ease-in-out;
+                svg {
+                    margin-top: 5px;
+                    &, * {
+                        fill: $fg_color;
+                        transition: fill .15s ease-in-out;
+                    }
+                    @keyframes bounce {
+                        0% {
+                            transform: translateY(3px);
+                        }
+                        100% {
+                            transform: translateY(-3px);
+                        }
+                    }
+                    animation: bounce 2s infinite ease-in-out alternate both;
+
+                }
+                &:hover, &:focus, &:active {
+                    background-color: $fg_color;
+                    svg, svg * {
+                        fill: $bg_color;
+                    }
+                }
+            }
+        {{ end }}
+    {{ end }}
 }
 .jumbotron {
     width: 100%;
-    min-height: 40vh;
-    flex-direction: column;
+    {{ if (.Site.Data.jumbotron.fullscreen | default false) }}
+        height: 80vh;
+    {{ else }}
+        min-height: 40vh;
+    {{ end }}
+    flex-wrap: no-wrap;
     text-align: center;
     justify-content: center;
     align-items: center;
+    {{ $jumbotronImagePosition := (.Site.Data.jumbotron.imagePosition | default "left") }}
+    {{ if (eq $jumbotronImagePosition "left") }}
+        flex-direction: row;
+    {{ else if (eq $jumbotronImagePosition "right") }}
+        flex-direction: row-reverse;
+    {{ else if (eq $jumbotronImagePosition "top") }}
+        flex-direction: column;
+    {{ else if (eq $jumbotronImagePosition "bottom") }}
+        flex-direction: column-reverse;
+    {{ end }}
+    .main_box {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        justify-content: center;
+        align-items: center;
+        flex-basis: 55%;
+        flex-grow: 1;
+    }
+    img {
+        flex-basis: 45%;
+        flex-grow: 1;
+        max-width: 100%;
+        min-width: 300px;
+    }
     h1 {
         font-weight: 300;
+        &.huge {
+            font-size: 4em;
+            margin: 24px;
+        }
     }
     ul {
         list-style: none;
@@ -676,4 +751,9 @@ header.jumbotronContainer {
         }
     }
 }
+@media only screen and (max-width: 520px) {
+    .jumbotron {
+        flex-wrap: wrap;
+    }
+}
 {{ end }}

layouts/partials/jumbotron.html

@@ -1,13 +1,40 @@
 {{ 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>
+        {{ if .Site.Data.jumbotron.image }}
+            <img src="{{ .Site.Data.jumbotron.image }}" />
+        {{ end }}
+        <div class="main_box">
+            <h1 class="
+                {{ if (.Site.Data.jumbotron.hugeTitle | default false) }}
+                    huge
+                {{ end }}
+            ">{{ .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 }}
-        </ul>
-    {{ end }}
+        </div>
     </div>
+    {{ if (
+        and
+            (.Site.Data.jumbotron.fullscreen | default false)
+            (.Site.Data.jumbotron.downArrow | default false)
+    ) }}
+        <div class="arrow" onclick="jumpdown();">
+            <svg version="1.1" viewBox="0 0 33.867 33.867" xmlns="http://www.w3.org/2000/svg">
+             <path transform="scale(.26459)" d="m16 34.346v8c0 2.3545 1.0067 4.4663 2.6152 5.9277l45.385 45.385 45.385-45.385c1.6086-1.4614 2.6152-3.5732 2.6152-5.9277v-8h-8c-2.335 0-4.4287 0.99084-5.8887 2.5762l-0.037109 0.039063-34.074 34.074-34.074-34.074c-0.012103-0.013323-0.024917-0.025824-0.037109-0.039063-1.4599-1.5853-3.5537-2.5762-5.8887-2.5762h-8z" />
+            </svg>
+        </div>
+        <script>
+            function jumpdown() {
+                window.scrollTo({
+                    top: window.innerHeight, left: 0, behavior: 'smooth'
+                });
+            }
+        </script>
+    {{ end }}
 {{ end }}