Sponsors - Change requests for using the new plugin

These are necessary changes to include to make the new sponsor Grav plugin working fine with this theme.

We are introducing:

- New sponsors.html.twig which the plugin will serve the data to
- We include this partial on the frontpage (base.html.twig)
- We use internally the slick-slider https://kenwheeler.github.io/slick/ to show the sponsors in a slider/carousel

css/basic.css

@@ -48,7 +48,7 @@ html {
 
 /** Header **/
 
-header {
+body > header {
   background-color: hsl(199, 100%, 42%);
   font-size: 112%;
   font-weight: 700;
@@ -221,6 +221,7 @@ footer .nav-horizontal li {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
+  max-width: 100%;
 }
 
 .layout-container aside:not(:empty) + main {

css/slick-slider-custom.css

@@ -0,0 +1,27 @@
+.slick-initialized .slick-track {
+    display: flex;
+    align-items: center;
+}
+
+.slick-slide img {
+    max-width: 100%;
+    margin: 0 auto;
+    max-height: 300px;
+}
+
+.slick-prev,
+.slick-next {
+    z-index: 1;
+}
+
+.slick-prev {
+    left: 5px;
+}
+
+.slick-next {
+    right: 5px;
+}
+
+.slick-slide {
+    padding: 0 5px;
+}

templates/partials/base.html.twig

@@ -20,11 +20,15 @@
       {% do assets.addCss('theme://css/lato-latin-fonts.css', 70) %}
       {% do assets.addCss('theme://css/font-awesome.css', 60) %}
       {% do assets.addCss('theme://css/content.css', 50) %}
+      {% do assets.addCss('//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css') %}
+      {% do assets.addCss('//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css') %}
+      {% do assets.addCss('theme://css/slick-slider-custom.css') %}
     {% endblock %}
     {{ assets.css() }}
 
     {% block javascripts %}
       {% do assets.addJs('jquery', 100) %}
+      {% do assets.addJs('//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js', {'group': 'bottom'}) %}
     {% endblock %}
     {{ assets.js() }}
   {% endblock head%}
@@ -49,7 +53,13 @@
 {% block body %}
 <div class="body wrapper padding layout-container">
   <aside>{% block aside %}{% endblock %}</aside>
-  <main>{% block content %}{% endblock %}</main>
+  <main>
+    {% block content %}{% endblock %}
+    {% if page.home %}
+        {# Zeige die Sponsoren auf der Startseite nach dem Hauptinhalt #}
+        {{ sponsoren() }}
+    {% endif %}
+  </main>
 </div>
 {% endblock %}
 

templates/partials/sponsors.html.twig

@@ -0,0 +1,14 @@
+<section>
+    <header><h2>CoderDojo Deutschland e.V. wird unterstützt von…</h2></header>
+    <div data-sponsor-slider data-slick='{"slidesToShow": 3, "slidesToScroll": 1, "autoplay": true}'>
+    {% for key, sponsor in sponsors %}
+        <a href="{{sponsor.url}}" target="_blank" rel="noopener nofollow"><img src="{{ sponsor.image }}" alt="{{sponsor.label}} logo" /></a>
+    {% endfor %}
+    </div>
+</section>
+
+<script type="text/javascript">
+    $(document).ready(function(){
+        $('[data-sponsor-slider]').slick();
+    });
+</script>