ya funciona razonablemente bien una segunda plantilla de cartel, falta recortarle un poco lo de las imágenes

src/lib/templates/Address.svelte

@@ -19,6 +19,7 @@
     line-height: {templates[templateIndex].address.lineHeight};
 		text-align: {templates[templateIndex].address.textAlign};
 		font-weight: {templates[templateIndex].address.fontWeight};
+		line-height: {templates[templateIndex].address.lineHeight}rem;
     "
 	>
 		{$address}

src/lib/templates/Content.svelte

@@ -18,6 +18,7 @@
     font-family: {templates[templateIndex].content.fontFamily};
 		text-align: {templates[templateIndex].content.textAlign};
 		font-weight: {templates[templateIndex].content.fontWeight};
+		line-height: {templates[templateIndex].content.lineHeight}rem;
     "
 	>
 		{@html $content}

src/lib/templates/Date.svelte

@@ -49,6 +49,7 @@
     font-family: {templates[templateIndex].date.fontFamily};
 		text-align: {templates[templateIndex].date.textAlign};
 		font-weight: {templates[templateIndex].date.fontWeight};
+		line-height: {templates[templateIndex].date.lineHeight}rem;
     "
 	>
 		{newdate.date}
@@ -67,6 +68,7 @@
     font-family: {templates[templateIndex].time.fontFamily};
 		text-align: {templates[templateIndex].time.textAlign};
 		font-weight: {templates[templateIndex].time.fontWeight};
+		line-height: {templates[templateIndex].time.lineHeight}rem;
     "
 	>
 		{newdate.time}
@@ -78,9 +80,7 @@
 		position: absolute;
 		text-transform: uppercase;
 		overflow: hidden;
-		display: flex;
-		justify-content: center;
-		align-items: start;
+		display: block;
 	}
 
 	.time {

src/lib/templates/Subtitle.svelte

@@ -18,6 +18,7 @@
     font-family: {templates[templateIndex].subtitle.fontFamily};
 		text-align: {templates[templateIndex].subtitle.textAlign};
 		font-weight: {templates[templateIndex].subtitle.fontWeight};
+		line-height: {templates[templateIndex].subtitle.lineHeight}rem;
     "
 	>
 		{$subtitle}

src/lib/templates/Title.svelte

@@ -18,6 +18,8 @@
     font-family: {templates[templateIndex].title.fontFamily};
 		text-align: {templates[templateIndex].title.textAlign};
 		font-weight: {templates[templateIndex].title.fontWeight};
+		line-height: {templates[templateIndex].title.lineHeight}rem;
+
     "
 	>
 		{$title}
@@ -31,6 +33,6 @@
 		overflow: hidden;
 		display: flex;
 		justify-content: center;
-		align-items: end;
+		align-items: center;
 	}
 </style>

src/lib/templates/Weekday.svelte

@@ -18,6 +18,7 @@
     font-family: {templates[templateIndex].weekday.fontFamily};
 		text-align: {templates[templateIndex].weekday.textAlign};
 		font-weight: {templates[templateIndex].weekday.fontWeight};
+		line-height: {templates[templateIndex].weekday.lineHeight}rem;
     "
 	>
 		{$weekday}

src/lib/templates/azul.js

@@ -17,36 +17,36 @@ export const azul = {
     fontWeight: 700
   },
   title: {
-    top: 320,
-    height: 6,
+    top: 487,
+    height: 7.5,
     left: 1,
     right: 1,
-    fontSize: 2.9,
+    fontSize: 3,
     color: "firebrick",
-    fontFamily: "Gill Sans, sans-serif",
-    lineHeight: 2.5,
-    textAlign: "left",
+    fontFamily: "sans-serif",
+    lineHeight: 2.4,
+    textAlign: "right",
     fontWeight: 700
 
   },
   subtitle: {
-    top: 420,
-    height: 3,
+    top: 620,
+    height: 1.4,
     left: 1,
     right: 2,
-    fontSize: 1.2,
-    color: "#787",
+    fontSize: 1.6,
+    color: "white",
     fontFamily: "Gill Sans, sans-serif",
     lineHeight: 1.5,
-    textAlign: "left",
-    fontWeight: 700
+    textAlign: "center",
+    fontWeight: 400
   },
   content: {
     top: 480,
     height: 8.5,
     left: 1.5,
     right: 17,
-    fontSize: 0.8,
+    fontSize: 0,
     color: "#222",
     fontFamily: "sans-serif",
     lineHeight: 1.1,
@@ -54,34 +54,34 @@ export const azul = {
     fontWeight: 700
   },
   date: {
-    top: 625,
+    top: 25,
     height: 4,
-    left: 18.5,
-    right: 4,
+    left: 5,
+    right: 1,
     fontSize: 1.1,
     color: "#fff",
     fontFamily: "sans-serif",
     lineHeight: 1,
-    textAlign: "left",
+    textAlign: "right",
     fontWeight: 700
   },
   time: {
-    top: 645,
+    top: 65,
     height: 2,
     left: 18.5,
-    right: 5,
+    right: 1,
     fontSize: 1.8,
     color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 1,
-    textAlign: "left",
+    lineHeight: 2,
+    textAlign: "right",
     fontWeight: 700
   },
   weekday: {
-    top: 600,
+    top: 25,
     height: 1.5,
-    left: 18.5,
-    right: 5,
+    left: 1,
+    right: 10,
     fontSize: 1.3,
     color: "#fff",
     fontFamily: "sans-serif",
@@ -90,15 +90,15 @@ export const azul = {
     fontWeight: 700
   },
   address: {
-    top: 625,
-    height: 4.5,
+    top: 660,
+    height: 5.5,
     left: 2,
-    right: 20,
-    fontSize: 1,
-    color: "firebrick",
+    right: 2,
+    fontSize: 1.2,
+    color: "white",
     fontFamily: "sans-serif",
-    lineHeight: 1.5,
+    lineHeight: 1.8,
     textAlign: "left",
-    fontWeight: 700
+    fontWeight: 400
   },
 }

src/lib/templates/heading.svelte

@@ -18,6 +18,7 @@
   font-family: {templates[templateIndex].heading.fontFamily};
 	text-align: {templates[templateIndex].heading.textAlign};
 	font-weight: {templates[templateIndex].heading.fontWeight};
+	line-height: {templates[templateIndex].heading.lineHeight}rem;
   "
 	>
 		{$heading}

src/lib/templates/verde.js

@@ -54,7 +54,7 @@ export const verde = {
   },
   date: {
     top: 625,
-    height: 4,
+    height: 1,
     left: 18.5,
     right: 4,
     fontSize: 1.1,
@@ -65,14 +65,14 @@ export const verde = {
     fontWeight: 700
   },
   time: {
-    top: 645,
+    top: 647,
     height: 2,
     left: 18.5,
     right: 5,
     fontSize: 1.8,
     color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 1,
+    lineHeight: 1.5,
     textAlign: "center",
     fontWeight: 700
   },

src/routes/+page.svelte

@@ -9,29 +9,57 @@
 		content="Aplicación para la generación automática de carteles de actividades de DMD"
 	/>
 </svelte:head>
-
+<main>
+	<p>Elige la plantilla que quieras usar para tu diseño</p>
 	<div class="main">
 		<ul>
 			{#each templates as template}
-			<li><a href="/{template.name}">{template.name}</a></li>
+				<li>
+					<a href="/{template.name}"
+						><img src="/{template.image}" alt="Plantilla en blanco estilo {template.name}" />
+						<div class="caption">{template.name}</div></a
+					>
+				</li>
 			{/each}
 		</ul>
 	</div>
+</main>
 
 <style>
+	main {
+		max-width: 800px;
+		margin: 0 auto;
+	}
 	.main {
 		display: grid;
-		grid-template-columns: repeat(4, min-content);
-		max-width: 900px;
-		margin: 0 auto;
-		border: 1px solid blue;
-		padding: 1rem;
+		grid-auto-columns: 1fr;
+		grid-auto-rows: 1fr;
+		grid-gap: 1rem;
+		padding: 1rem 0;
+	}
+	p {
+		font-size: 1.5rem;
+	}
+	ul {
+		list-style: none;
 	}
 	li {
 		line-height: 2rem;
+		display: inline-block;
+		padding: 0.5rem;
+		background-color: rgb(80, 80, 80);
+		margin: 0 0.5rem;
 	}
 	a {
 		text-transform: capitalize;
 		cursor: pointer;
+		color: white;
+		text-decoration: none;
+		text-align: center;
+		font-weight: 700;
+		font-size: 1.2rem;
+	}
+	img {
+		max-height: 200px;
 	}
 </style>