add sebis pics

gallery to header

content/_index.md

@@ -4,10 +4,8 @@ header_tagline_paragraph: "Verfütter dem Gugel nicht dein Leben!\nEin Smartphon
 header_button_cta:
   url: "#sicher-dir-eins"
   title: "Bestellen!"
-header_button_more:
-  url: "#auf-upgecycelter-hardware"
-  title: "Was bringts?"
-teaser_image: "images/teaser.png" # https://www.pexels.com/search/product%20testing/
+header_button_more: no
+teaser_image: yes
 ---
 
 # Freie Kommunikation
@@ -15,7 +13,6 @@ teaser_image: "images/teaser.png" # https://www.pexels.com/search/product%20test
 Kein Bock mehr auf ein Smartphone dem du nicht vertrauen kannst? Von dem du keine Ahnung hast was drauf läuft? Eigentlich gar kein Bock viel Kohle für eine neue Abhörzentrale in deiner Tasche auszugeben? Hier kommt die Abhilfe: Ein upgecyceltes Smartphone mit freiem Betriebssystem.  
 **Ein eingehend durchgechecktes Gerät mit neuem Akku und hübschem Case**. Die wichtigsten Apps sind vorinstalliert. Mitgeliefert wird **ein neues USB Kabel** und **eine 16GB SD Karte**. So bist du eine Weile mobil digital gut ausgestattet.
 
-{{< gallery-slider >}}
 
 ## Auf upgecycelter Hardware
 

layouts/partials/header.html

@@ -0,0 +1,27 @@
+<header id="header">
+  <div id="header-inner-wrapper" class="pt-24 lg:pt-0">
+    <div
+      class="w-full max-w-screen-xl relative mx-auto px-6 pt-16 pb-40 md:pb-24"
+    >
+      <div class="text-left md:text-center sm:max-w-2xl max-w-3xl mx-auto">
+        {{ with .Params.header_brand }}
+          {{- partial "header/brand.html" . -}}
+        {{ end }}
+        {{ with .Params.header_tagline_paragraph }}
+          {{- partial "header/tagline_paragraph.html" . -}}
+        {{ end }}
+        <div class="flex mt-6 justify-start md:justify-center">
+          {{ with .Params.header_button_cta }}
+            {{- partial "header/button_cta.html" . -}}
+          {{ end }}
+          {{ with .Params.header_button_more }}
+            {{- partial "header/button_more.html" . -}}
+          {{ end }}
+        </div>
+      </div>
+      {{ with .Params.teaser_image }}
+        {{- partial "header/teaser_image.html" . -}}
+      {{ end }}
+    </div>
+  </div>
+</header>

layouts/partials/header/teaser_image.html

@@ -0,0 +1,66 @@
+
+<div id="screenshots" class="js_slides screenshots">
+		<div class="frame js_frame">
+			<ul class="slides js_slides gallery">
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC09960.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC09898.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC09978.jpg" alt="" ></li>
+				<li class="js_slide screenshot "><img src="/images/screenshots/Screenshot_20211015-213151_OsmAnd~.png" alt=""></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC09891.jpg" alt="" ></li>
+				<li class="js_slide screenshot"><img src="/images/screenshots/Screenshot_20211018-203310_Tor_Browser.png"></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC07936.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/Screenshot_20211124-134451_Trebuchet.png" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC07971.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/Screenshot_20211124-134517_Trebuchet.png" alt=""></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC07977.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC07999.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC08022.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC08037.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC08079.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC08095.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC08098.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC08101.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC08111.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC08118.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC09847.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC09876.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC09890.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC09965.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC09967.jpg" alt="" ></li>
+				<li class="js_slide  screenshot"><img src="/images/screenshots/DSC09983.jpg" alt="" ></li>
+     </ul>
+   </div>
+	 <span class="js_prev slider_nav prev" >
+     <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"/></g></svg>
+   </span>
+   <span class="js_next slider_nav next">
+     <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"/></g></svg>
+   </span>
+
+      <small>Beispielbilder. Farben und Form der Hülle zufällig.</small>
+</div>
+<script src="lory.min.js"></script>
+
+<script>
+	window.addEventListener('load', function () {
+	    var slider = document.getElementById('screenshots');
+	    if (slider == null) {
+	        return;
+	    }
+
+	    // This class is used to display the entire slideshow differently if JS
+	    // is enabled. The absense of the 'slider' class will force all images
+	    // to be shown in a grid. The presence of it will show them inline and
+	    // hide those which don't fit.
+	    slider.className = slider.className + ' slider';
+
+	    var toShow = slider.querySelectorAll('.slider_nav');
+	    for (var i = 0; i < toShow.length; i ++) {
+	        toShow[i].style.display = 'block';
+	    }
+
+	    lory(slider, {rewind: true, enableMouseEvents: true});
+	});
+
+
+</script>

layouts/shortcodes/gallery-slider.html

@@ -1,44 +0,0 @@
-
-<div id="screenshots" class="js_slides screenshots">
-		<div class="frame js_frame">
-			<ul class="slides js_slides gallery">
-
-           <li class="js_slide  screenshot"><img src="/images/screenshots/Screenshot_20211124-134451_Trebuchet.png" width=250px alt="" ></li>
-           <li class="js_slide  screenshot"><img src="/images/screenshots/Screenshot_20211124-134517_Trebuchet.png" width=250px alt=""></li>
-           <li class="js_slide screenshot "><img src="/images/screenshots/Screenshot_20211015-213151_OsmAnd~.png" width=250px alt=""></li>
-           <li class="js_slide screenshot"><img src="/images/screenshots/Screenshot_20211018-203310_Tor_Browser.png" width=250px></li>
-     </ul>
-   </div>
-	 <span class="js_prev slider_nav prev" >
-	 			<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"/></g></svg>
-	 		</span>
-	 		<span class="js_next slider_nav next">
-	 			<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"/></g></svg>
-	 		</span>
-
-</div>
-<script src="lory.min.js"></script>
-
-<script>
-	window.addEventListener('load', function () {
-	    var slider = document.getElementById('screenshots');
-	    if (slider == null) {
-	        return;
-	    }
-
-	    // This class is used to display the entire slideshow differently if JS
-	    // is enabled. The absense of the 'slider' class will force all images
-	    // to be shown in a grid. The presence of it will show them inline and
-	    // hide those which don't fit.
-	    slider.className = slider.className + ' slider';
-
-	    var toShow = slider.querySelectorAll('.slider_nav');
-	    for (var i = 0; i < toShow.length; i ++) {
-	        toShow[i].style.display = 'block';
-	    }
-
-	    lory(slider, {rewind: true, enableMouseEvents: true});
-	});
-
-
-</script>