Nicer indication for when you selected a template

examples/static/schild.css

@@ -12,8 +12,11 @@ body {
 	font-family: "Noto Sans", sans-serif;
 	padding: 0;
 	margin: 0;
+	background-color: #fff;
+	color: #000;
 	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

frontend/src/main.less

 // the threshold at which we consider the screen "mobile"
 @mobile_threshold: 700px;
+// the border around the preview (per color)
+@preview_border: .3rem;
 
 * {
 	box-sizing: border-box;
@@ -132,8 +134,8 @@ main {
 	/* A4 aspect ratio: √2:1 */
 	aspect-ratio: 1.4142135623730951;
 
-	background-color: #fff;
-	color: #000;
+	border: @preview_border solid var(--bg);
+	padding: @preview_border;
 }
 
 .preview-small {
@@ -168,6 +170,7 @@ textarea {
 fieldset {
 	display: flex;
 	flex-wrap: wrap;
+	gap: 2 * @preview_border;
 }
 
 fieldset > div {
@@ -198,13 +201,17 @@ fieldset input {
 fieldset img,
 fieldset iframe,
 .preview-small {
-	border: 3px solid lightgray;
-	border-radius: 10px;
+	border-color: var(--fg);
+	border-radius: 3 * @preview_border;
+}
+
+input[type="radio"] {
+	&:checked + label > img,
+	&:checked + iframe {
+		border-color: var(--accent2);
 	}
 
-input[type="radio"]:checked {
-	& + label > img,
-	& + iframe {
-		border:3px solid red;
+	&:not(:checked) + iframe {
+		opacity: .8;
 	}
 }