add maps to the location

gaehsnitz/static/gaehsnitz/style.css

@@ -1,4 +1,4 @@
-html, body, div,
+html, body, div, img,
 h1, h2, h3, h4, h5, h6,
 a, p, b, i,
 form, label, input,
@@ -79,6 +79,14 @@ a:hover, a:focus {
     color: #EEEEEE;
 }
 
+a img {
+    transition: transform 100ms;
+}
+
+a img:hover, a img:focus {
+    transform: scale(103%);
+}
+
 h2 {
     margin-top: 24px;
     margin-bottom: 14px;
@@ -131,6 +139,27 @@ td {
     text-align: right;
 }
 
+.img-bar {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-top: 16px;
+    margin-bottom: 24px;
+}
+
+.img-bar a {
+    flex: 0 1 auto;
+    max-width: 48%;
+    max-height: 440px;
+}
+
+.img-bar img {
+    max-width: 100%;
+    max-height: 440px;
+}
+
 #area-map {
     width: 100%;
     max-width: 800px;

gaehsnitz/templates/gaehsnitz/atoz.html

@@ -17,6 +17,14 @@
         Koordinaten: 50.9070, 12.5465<br>
         <a href="https://goo.gl/maps/Hw9WBs1KjUFc8H866">Linz zu Google-Maps</a>
     </p>
+    <div class="img-bar">
+        <a href="{% static 'gaehsnitz/map-big.png' %}">
+            <img src="{% static 'gaehsnitz/map-big.png' %}" alt="große Karte">
+        </a>
+        <a href="{% static 'gaehsnitz/map-small.png' %}">
+            <img src="{% static 'gaehsnitz/map-small.png' %}" alt="kleine Karte">
+        </a>
+    </div>
     <p>
         &#128736; Später mehr zum Thema Mitfahrgelegenheiten und Öffis ...
     </p>