Add Banner to Index page

content/_index.md

@@ -2,4 +2,5 @@
 date = "2018-12-02T19:16:57+01:00"
 draft = false
 title = "Neff Stein-Design"
+banner = "# Angebote vom 1.1.00 bis 1.1.01\ntest"
 +++

content/neuigkeiten/bestattungsgarten-auf-dem-parkfriedhof-sieglar/index.md

@@ -1,6 +1,6 @@
 +++
 title = "Bestattungsgarten Auf Dem Parkfriedhof Sieglar"
-date = "2019-01-05T02:19:56+01:00"
+date = "2019-01-05T18:19:56+01:00"
 draft = true
 type = "news"
 weight = -200

themes/neff/assets/scss/_banner.scss

@@ -0,0 +1,21 @@
+#banner {
+    font-size: 1.2rem;
+    position: absolute;
+    top: 155px;
+    width: 100%;
+    transition: 0.6s;
+
+    h1 {
+        font-size: 1.4rem;
+    }
+
+    .container {
+        border-radius: $border-radius;
+        margin: 0 auto;
+    }
+
+    &.hidden {
+        top: -200px;
+        transition: 0.6s;
+    }
+}

themes/neff/assets/scss/main.scss

@@ -9,4 +9,5 @@
 @import "single";
 @import "index";
 @import "lightbox";
-@import "content";
+@import "content";
+@import "banner";

themes/neff/layouts/_default/baseof.html

@@ -13,6 +13,7 @@
                 {{- partial "header.html" . -}}
             </div>
         </section>
+        {{- partial "banner.html" . -}}
         <div id="page-wrapper">
             <section id="content">
                 {{- block "content" . -}}

themes/neff/layouts/partials/banner.html

@@ -0,0 +1,9 @@
+{{- with .Params.banner }}
+    <section id="banner">
+        <div class="container">
+            <div id="banner-container">
+                {{ . | markdownify }}
+            </div>
+        </div>
+    </section>
+{{- end }}

themes/neff/src/js/scrollspy.js

@@ -3,6 +3,7 @@ const scrollPosition = 50;
 
 const menuLinks = document.querySelectorAll('.menu-list li a');
 const checkbox = document.querySelector('#top-navigation-checkbox');
+const banner = document.querySelector('#banner');
 
 let lastScrollPosition = 0;
 
@@ -12,12 +13,14 @@ window.addEventListener('scroll', (e) => {
         header.classList.add('small')
         header.classList.remove('large')
         header.classList.add('hidden')
+        banner.classList.add('hidden')
         checkbox.checked = false;
     }
     else {
         if (st < scrollPosition) {
             header.classList.add('large')
             header.classList.remove('small')
+            banner.classList.remove('hidden')
         }
         if (st < lastScrollPosition) {
             setTimeout(() => {