examples/static/schild.css: Dynamic content scaling for preview

examples/static/schild.css

@@ -3,11 +3,32 @@
     margin: 50px;
 }
 
+* {
+    box-sizing: border-box;
+}
+
 body {
     font-size: 48px;
     font-family: "Noto Sans", sans-serif;
     padding: 0;
     margin: 0;
+    display: flex;
+    flex-direction: column;
+    @media not print {
+	/* This magic constant approximately corresponds to 48px at A4 size, but scales
+	 * with the viewport/iframe size
+	 */
+	font-size: 4.27426536064114vw;
+	padding: 4.27426536064114vw;
+	width: 100vw;
+	height: 100vh;
+	max-width: 100vw;
+	max-height: 100vh;
+    }
+}
+
+main {
+    flex-grow: 1;
 }
 
 img {
@@ -19,16 +40,16 @@ img {
 
 #logo {
     width: 15%;
-    position: fixed;
-    bottom: 0;
-    right: 0;
 }
 
 footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
     font-size: 0.5em;
+    display: flex;
+    align-items: flex-end;
+}
+
+#footer {
+    flex-grow: 1;
 }
 
 h1 {

schilder2000/templates/schild.html.j2

@@ -43,10 +43,12 @@
 		</div>
 		<div>
 			<h2>Vorschau</h2>
+			<div class="preview-container" id="preview-container">
 				<iframe
 					class="preview"
 					id="preview"
 					src="{{ url_for('instance.schild_html', ident=schild.ident) }}" />
 			</div>
+		</div>
 	{% endif %}
 {% endblock main %}