Add carousel to index page

static/css/style.css

@@ -162,3 +162,7 @@ time.icon span {
 	padding-top: 0.8em;
 	color: var(--teckids-blue-dark);
 }
+
+.carousel .carousel-image {
+	max-height: 500px;
+}
\ No newline at end of file

templates/base.html

@@ -32,8 +32,8 @@
             --teckids-blue-dark: {{ SECONDARY_DARK }};
         }
     </style>
-    <link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/bootstrap.min.css" />
-    <link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/style.css" />
+    <link rel="stylesheet" type="text/css" href="/{{ THEME_STATIC_DIR }}/css/bootstrap.min.css" />
+    <link rel="stylesheet" type="text/css" href="/{{ THEME_STATIC_DIR }}/css/style.css" />
 
     <title>
         {{ SITENAME }}
@@ -106,9 +106,9 @@
                 <div class="col s12">
                     <h3 id='sponsorheading' class="black-text">Sponsoren</h3>
                     <p id="sponsortext" class="black-text">Wir bedanken uns bei unseren Sponsoren für die Unterstützung unserer Vereinsarbeit. Außerdem freuen wir uns immer über weitere Sponsoren, die ihr Engagement mit ihrem Logo hier bewerben möchten!</p>
-                    <a href="https://www.bareos.com"><img src="{{ THEME_STATIC_DIR }}/img/logo-bareos.png" href="https://www.bareos.com/" alt="Bareos-Logo" class="sponsorslogo" /></a>
-                    <a href="https://www.speedpartner.de/"><img src="{{ THEME_STATIC_DIR }}/img/logo-speedpartner.png" alt="Speedpartner-Logo" class="sponsorslogo" /></a>
-		    <a href="https://www.informatik-aktuell.de/"><img src="{{ THEME_STATIC_DIR }}/img/logo_informatik-aktuell.png" alt="Informatik-Aktuell-Logo" class="sponsorslogo" /></a>
+                    <a href="https://www.bareos.com"><img src="/{{ THEME_STATIC_DIR }}/img/logo-bareos.png" href="https://www.bareos.com/" alt="Bareos-Logo" class="sponsorslogo" /></a>
+                    <a href="https://www.speedpartner.de/"><img src="/{{ THEME_STATIC_DIR }}/img/logo-speedpartner.png" alt="Speedpartner-Logo" class="sponsorslogo" /></a>
+		    <a href="https://www.informatik-aktuell.de/"><img src="/{{ THEME_STATIC_DIR }}/img/logo_informatik-aktuell.png" alt="Informatik-Aktuell-Logo" class="sponsorslogo" /></a>
                 </div>
             </div>
         </div>
@@ -142,7 +142,7 @@
         </div>
     </footer>
 
-    <script src="{{ THEME_STATIC_DIR }}/js/bootstrap.min.js"></script>
+    <script src="/{{ THEME_STATIC_DIR }}/js/bootstrap.min.js"></script>
 
 </body>
 

templates/index.html

 {% extends 'base.html' %}
 
 {% block content %}
-<h2>{{ SITENAME }}</h2>
+    <div id="myCarousel" class="carousel slide" data-ride="carousel">
+        <div class="carousel-inner">
+            {% for text, image in CAROUSEL_ITEMS %}
+                <div class="item {% if loop.first %} active {% endif %}">
+                    <img class="center-block carousel-image" src="{{ image }}" alt="{{ text }}">
+                    <div class="carousel-caption d-none d-md-block">
+                        <h3>{{ text }}</h3>
+                    </div>
+                </div>
+             {% endfor %}
+        </div>
+     <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+      <span class="glyphicon glyphicon-chevron-left"></span>
+      <span class="sr-only">Previous</span>
+     </a>
+     <a class="right carousel-control" href="#myCarousel" data-slide="next">
+      <span class="glyphicon glyphicon-chevron-right"></span>
+      <span class="sr-only">Next</span>
+     </a>
+
+    </div>
 {% endblock %}