From dac2b3b8b4d049f53feea7eb681a1123b72ba54c Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Mon, 3 Oct 2022 02:15:19 +0200
Subject: [PATCH] =?UTF-8?q?ya=20funciona=20razonablemente=20bien=20una=20s?=
 =?UTF-8?q?egunda=20plantilla=20de=20cartel,=20falta=20recortarle=20un=20p?=
 =?UTF-8?q?oco=20lo=20de=20las=20im=C3=A1genes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/templates/Address.svelte  |  1 +
 src/lib/templates/Content.svelte  |  1 +
 src/lib/templates/Date.svelte     |  6 +--
 src/lib/templates/Subtitle.svelte |  1 +
 src/lib/templates/Title.svelte    |  4 +-
 src/lib/templates/Weekday.svelte  |  1 +
 src/lib/templates/azul.js         | 62 +++++++++++++++----------------
 src/lib/templates/heading.svelte  |  1 +
 src/lib/templates/verde.js        |  6 +--
 src/routes/+page.svelte           | 54 ++++++++++++++++++++-------
 10 files changed, 86 insertions(+), 51 deletions(-)

diff --git a/src/lib/templates/Address.svelte b/src/lib/templates/Address.svelte
index 69bebdc..fc62f5e 100644
--- a/src/lib/templates/Address.svelte
+++ b/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}
diff --git a/src/lib/templates/Content.svelte b/src/lib/templates/Content.svelte
index aad3501..6bba7f0 100644
--- a/src/lib/templates/Content.svelte
+++ b/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}
diff --git a/src/lib/templates/Date.svelte b/src/lib/templates/Date.svelte
index 31236e1..aab284b 100644
--- a/src/lib/templates/Date.svelte
+++ b/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 {
diff --git a/src/lib/templates/Subtitle.svelte b/src/lib/templates/Subtitle.svelte
index 39c82d2..6c565e4 100644
--- a/src/lib/templates/Subtitle.svelte
+++ b/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}
diff --git a/src/lib/templates/Title.svelte b/src/lib/templates/Title.svelte
index bb65004..b47aa14 100644
--- a/src/lib/templates/Title.svelte
+++ b/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>
diff --git a/src/lib/templates/Weekday.svelte b/src/lib/templates/Weekday.svelte
index 34a6463..169cd6b 100644
--- a/src/lib/templates/Weekday.svelte
+++ b/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}
diff --git a/src/lib/templates/azul.js b/src/lib/templates/azul.js
index 6904836..a7ec8ce 100644
--- a/src/lib/templates/azul.js
+++ b/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
   },
 }
\ No newline at end of file
diff --git a/src/lib/templates/heading.svelte b/src/lib/templates/heading.svelte
index 5ac71b7..3a4d0e7 100644
--- a/src/lib/templates/heading.svelte
+++ b/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}
diff --git a/src/lib/templates/verde.js b/src/lib/templates/verde.js
index 8038aa7..e28133a 100644
--- a/src/lib/templates/verde.js
+++ b/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
   },
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index adb3301..70c9107 100644
--- a/src/routes/+page.svelte
+++ b/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>
-
-<div class="main">
-	<ul>
-		{#each templates as template}
-			<li><a href="/{template.name}">{template.name}</a></li>
-		{/each}
-	</ul>
-</div>
+<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}"
+						><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>