Fix layout issues on small screens

Author: jeflem

frontend/index.html

@@ -17,7 +17,7 @@
         <h1>PTSA - Public Transport Stop Analysis for OSM</h1>
         <p id="logo">
             <span style="font-size: xx-small;">provided by</span><br />
-            <a href="https://www.whz.de"><img src="logo_whz.svg" alt="Logo of Zwickau University of Applied Sciences" style="height: 45px; padding-top: 3px;" /></a>
+            <a href="https://www.whz.de"><img src="logo_whz.svg" alt="Logo of Zwickau University of Applied Sciences" /></a>
         <p>
         <p id="imprint">
             <a style="font-weight: bold;" href="data.html">Data</a> | 

frontend/map.css

@@ -20,6 +20,19 @@ header h1 {
     padding-left: 10px;
     padding-top: 5px;
     font-size: 30px;
+    width: 70%;
+}
+
+@media (max-width: 70em) { 
+    header h1 {
+        font-size: 24px;
+    }
+}
+
+@media (max-width: 50em) { 
+    header h1 {
+        font-size: 18px;
+    }
 }
 
 #imprint {
@@ -41,6 +54,17 @@ header h1 {
     padding-right: 10px;
 }
 
+#logo img {
+    height: 45px;
+    padding-top: 3px;
+}
+
+@media (max-width: 40em) { 
+    #logo img {
+        height: 30px;
+    }
+}
+
 #content {
     overflow: hidden;
     position: absolute;