Refactor CSS

static/style.css

@@ -1,8 +1,8 @@
-.container {
+main {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
-    gap: 15px;
+    gap: 1em;
     align-items: flex-start;
 }
 
@@ -15,16 +15,13 @@ a {
     color: black;
 }
 
-img {
-    max-width: 600px;
-}
-
 .dataframe {
     border-collapse: collapse;
     font-size: 0.9em;
     font-family: sans-serif;
     min-width: 400px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+    flex-grow: 1;
 }
 
 .dataframe thead tr {

templates/base.html

@@ -6,11 +6,14 @@
 <title>Digitale Beschäftigtenbefragung</title>
 
 
+<article>
+<header>
 <p>Daten abgerufen: {{ timestamp }}</p>
-
 <p><i>Hinweis:</i> Die Daten entstammen der <a href="https://zusammen-geht-mehr.verdi.de/beschaeftigtenbefragung">Karte der digitalen Beschäftigtenbefragung</a> und sind dort nur für die ver.di-Bezirke auf Bezirksebene aufgelöst, bei denen TVStud auch als Schwerpunkt angegeben ist.</p>
+</header>
 
-<div class="container">
+<main>
-    <img src="{{ image }}"/>
+    <img src="{{ image|safe }}"/>
     {{ tables|safe }}
-</div>
+</main>
+</article>