add band logos and try to make the page pretty

gaehsnitz/static/gaehsnitz/style.css

@@ -87,3 +87,42 @@ p, ul {
     margin-top: 6px;
     margin-bottom: 10px;
 }
+
+.bandbox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    border: 2px solid;
+    border-image: linear-gradient(to right, rgba(238, 153, 51, 1) 0%, rgba(238, 153, 51, 0) 100%) 1;
+    overflow: hidden;
+}
+
+.bandbox img {
+    flex: 0 1 auto;
+    max-width: 180px;
+    max-height: 100px;
+    z-index: -1;
+    box-shadow: 0 0 30px #664422;
+}
+
+.bandbox p {
+    flex: 0 1 auto;
+    margin: 20px;
+}
+
+
+@media only screen and (min-width: 600px) and (max-width: 899px) {
+    .bandbox img {
+        max-width: 270px;
+        max-height: 150px;
+    }
+}
+
+@media only screen and (min-width: 900px) {
+    .bandbox img {
+        max-width: 360px;
+        max-height: 200px;
+    }
+}

gaehsnitz/templates/gaehsnitz/program.html

@@ -1,14 +1,30 @@
 {% extends "gaehsnitz/base.html" %}
+{% load static %}
 
 {% block content %}
 
     <h2>Bands</h2>
-    <p><b><i>The Residudes</i></b> - Stoner Blues aus Leipzig</p>
-    <p><b><i>Quast</i></b> - Finn-Pop aus Köln</p>
-    <p>(?) <b><i>Melo-Komplott</i></b> - Melodic Rock aus Altenburg</p>
-    <p><b><i>Direct Juice</i></b> - 7-Ply-Hardcore aus Magdeburg</p>
-    <p>(?) <b><i>As The Lights Fade</i></b> - Metalcore aus Berlin</p>
-    <p>...</p>
+
+    <div class="bandbox">
+        <img src="{% static 'gaehsnitz/logo-quast.jpg' %}" alt="Quast">
+        <p>Finn-Pop aus Köln</p>
+    </div>
+    <div class="bandbox reversed">
+        <img src="{% static 'gaehsnitz/logo-residudes.jpg' %}" alt="The Residudes">
+        <p>Stoner Blues aus Leipzig</p>
+    </div>
+    <div class="bandbox">
+        <img src="{% static 'gaehsnitz/logo-melo-komplott.jpg' %}" alt="Melo-Komplott">
+        <p>Melodic Rock aus Altenburg</p>
+    </div>
+    <div class="bandbox reversed">
+        <img src="{% static 'gaehsnitz/logo-direct-juice.jpg' %}" alt="Direct Juice">
+        <p>7-Ply Hardcore aus Magdeburg</p>
+    </div>
+    <div class="bandbox">
+        <img src="{% static 'gaehsnitz/logo-as-the-lights-fade.jpg' %}" alt="As The Lights Fade">
+        <p>Metalcore aus Potsdam</p>
+    </div>
 
     <h2>und sonst so ...</h2>
     <p>Flunkyball, Open Jam Session, ...</p>