cambios para incluir descripción en las plantillas

src/lib/templates/templates.js

@@ -20,6 +20,7 @@ import { posits } from '$lib/templates/posits';
 /**
 * @typedef {{
 * name: string;
+* description: string;
 * image: string;
 * heading: Element;
 * title: Element;

src/lib/templates/verde.js

@@ -3,6 +3,14 @@ import '$lib/templates/templates'
 /** @type {import('$lib/templates/templates').Template} */
 export const verde = {
   name: "verde",
+  description: `<ul>
+    <li>Título</li>
+    <li>Subtítulo</li>
+    <li>Antetítulo</li>
+    <li>Descripción</li>
+    <li>Día, mes, hora</li>
+    <li>Día de la semana</li>
+    </ul>`,
   image: "plantilla_verde.png",
   heading: {
     top: 100,

src/routes/+page.svelte

@@ -9,7 +9,7 @@
 		content="Aplicación para la generación automática de carteles de actividades de DMD"
 	/>
 </svelte:head>
-<main>
+<section>
 	<p>Elige plantilla</p>
 	<div class="main">
 		<ul>
@@ -17,18 +17,24 @@
 				<li>
 					<a href="/{template.name}" data-sveltekit-prefetch
 						><img src="/{template.image}" alt="Plantilla en blanco estilo {template.name}" />
-						<div class="caption">{template.name}</div></a
-					>
+						{#if template.description}
+							<div class="caption">{@html template.description}</div>
+						{:else}
+							<div class="caption">{template.name}</div>
+						{/if}
+					</a>
 				</li>
 			{/each}
 		</ul>
 	</div>
-</main>
+</section>
 
 <style>
-	main {
+	section {
 		max-width: 800px;
 		margin: 0 auto;
+		display: grid;
+		min-height: 90vh;
 	}
 
 	.main {
@@ -44,6 +50,7 @@
 	}
 	ul {
 		list-style: none;
+		display: flex;
 	}
 	li {
 		line-height: 2rem;
@@ -53,6 +60,7 @@
 		box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.7);
 		margin: 0 0.5rem;
 		border-radius: 0.5rem;
+		align-self: center;
 	}
 	a {
 		text-transform: capitalize;
@@ -67,4 +75,8 @@
 		max-height: 200px;
 		border-radius: 0.25rem 0.25rem 0 0;
 	}
+	.caption {
+		text-align: left;
+		padding: 0.25rem;
+	}
 </style>