From 929aa37d995a5900593ba7af7b3ca3c8b991985c Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Fri, 2 Dec 2022 11:15:07 +0100
Subject: [PATCH] =?UTF-8?q?cambios=20para=20incluir=20descripci=C3=B3n=20e?=
 =?UTF-8?q?n=20las=20plantillas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/templates/templates.js |  1 +
 src/lib/templates/verde.js     |  8 ++++++++
 src/routes/+page.svelte        | 22 +++++++++++++++++-----
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/lib/templates/templates.js b/src/lib/templates/templates.js
index d548de4..ed9ab57 100644
--- a/src/lib/templates/templates.js
+++ b/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;
diff --git a/src/lib/templates/verde.js b/src/lib/templates/verde.js
index 569a9ec..9a77cf9 100644
--- a/src/lib/templates/verde.js
+++ b/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,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e7c3187..66a4a35 100644
--- a/src/routes/+page.svelte
+++ b/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>