Place the preview on the side for wide screens

frontend/src/main.less

 // the threshold at which we consider the screen "mobile"
 @mobile_threshold: 700px;
+// the threshold at which we consider the screen "wide", i.e. display the preview on the
+// side instead of at the bottom
+@wide_threshold: 1700px;
 // the border around the options in the fieldset-select-like things
 @option_border: .3rem;
 // the minimum size of the left area in the form layout
@@ -161,6 +164,25 @@ main {
 	}
 }
 
+.section-container {
+	display: grid;
+	grid-gap: 1rem;
+	grid-template-columns: 1fr;
+
+	.section {
+		grid-column-start: 1;
+	}
+
+	@media screen and (min-width: @wide_threshold) {
+		grid-template-columns: 1fr 1fr;
+
+		.preview-section {
+			grid-column-start: 2;
+			grid-row: 1/span 3;
+		}
+	}
+}
+
 .preview {
 	/* A4 aspect ratio: √2:1 */
 	aspect-ratio: 1.4142135623730951;

schilder2000/templates/schild.html.j2

@@ -28,7 +28,8 @@
 {%- endblock title %}
 
 {% block main -%}
-	<section>
+	<div class="section-container">
+		<div class="section">
 			{%- with messages = get_flashed_messages() -%}
 				{%- if messages -%}
 					<ul class="flashes">
@@ -38,9 +39,9 @@
 					</ul>
 				{%- endif -%}
 			{%- endwith -%}
-	</section>
+		</div>
 
-	<section>
+		<div class="section">
 			<form method="post" action="">
 				{{ form.csrf_token }}
 
@@ -107,10 +108,11 @@
 					{%- endif -%}
 				</div>
 			</form>
-	</section>
+		</div>
 
 		{%- if schild %}
-		<section><form method="post" action="{{ url_for('.print', ident=schild.ident) }}">
+			<div class="section">
+				<form method="post" action="{{ url_for('.print', ident=schild.ident) }}">
 					{%- for field in printform -%}
 						{{ render_field(field) }}
 					{%- endfor -%}
@@ -121,10 +123,10 @@
 						</a>
 						<input type="submit" value="Drucken" />
 					</div>
-		</form></section>
-
+				</form>
+			</div>
 
-		<div>
+			<div class="section preview-section">
 				<h2>Vorschau</h2>
 				<div class="preview-container" id="preview-container">
 					<iframe
@@ -135,4 +137,5 @@
 				</div>
 			</div>
 		{% endif %}
+	</div>
 {% endblock main %}