From 75b62fdcd574a16769860620b05bbb1cd09222bc Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Fri, 23 Dec 2022 13:36:54 +0100
Subject: [PATCH] =?UTF-8?q?nuevas=20plantillas=20a=C3=B1adidas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/templates/diente_de_leon.js | 119 ++++++++++++++++++++++++++++
 src/lib/templates/marroncito.js     | 118 +++++++++++++++++++++++++++
 src/lib/templates/pajaros_papel.js  | 118 +++++++++++++++++++++++++++
 src/lib/templates/sanitarios.js     | 118 +++++++++++++++++++++++++++
 src/lib/templates/templates.js      |   9 ++-
 src/routes/+page.svelte             |  47 ++++++-----
 6 files changed, 504 insertions(+), 25 deletions(-)

diff --git a/src/lib/templates/diente_de_leon.js b/src/lib/templates/diente_de_leon.js
index e69de29..0ccb89b 100644
--- a/src/lib/templates/diente_de_leon.js
+++ b/src/lib/templates/diente_de_leon.js
@@ -0,0 +1,119 @@
+import '$lib/templates/templates'
+
+/** @type {import('$lib/templates/templates').Template} */
+export const diente_de_leon = {
+  name: "diente_de_leon",
+  description: "diente_de_leon",
+  image: "diente_de_leon.png",
+  heading: {
+    top: 20,
+    height: 32,
+    left: 20,
+    right: 350,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 36,
+    textAlign: "left",
+    fontWeight: 400
+  },
+  title: {
+    top: 58,
+    height: 120,
+    left: 8,
+    right: 8,
+    fontSize: 35,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 28,
+    textAlign: "center",
+    fontWeight: 500
+
+  },
+  subtitle: {
+    top: 160,
+    height: 48,
+    left: 8,
+    right: 8,
+    fontSize: 25,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 48,
+    textAlign: "center",
+    fontWeight: 300
+  },
+  content: {
+    top: 480,
+    height: 8.5,
+    left: 1.5,
+    right: 17,
+    fontSize: 0,
+    color: "#222",
+    fontFamily: "sans-serif",
+    lineHeight: 1.1,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  date: {
+    top: 540,
+    height: 32,
+    left: 128,
+    right: 8,
+    fontSize: 32,
+    color: "#fff",
+    fontFamily: "'Arial', sans-serif",
+    lineHeight: 32,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  time: {
+    top: 600,
+    height: 32,
+    left: 128,
+    right: 8,
+    fontSize: 32,
+    color: "#fff",
+    fontFamily: "'Arial', sans-serif",
+    lineHeight: 32,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  weekday: {
+    top: 8,
+    height: 32,
+    left: 8,
+    right: 80,
+    fontSize: 0,
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 1.8,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  address: {
+    top: 650,
+    height: 48,
+    left: 128,
+    right: 8,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 20,
+    textAlign: "left",
+    fontWeight: 400
+  },
+  city: {
+    top: 20,
+    height: 32,
+    left: 240,
+    right: 20,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 36,
+    textAlign: "right",
+    fontWeight: 500
+  },
+}
+
+
diff --git a/src/lib/templates/marroncito.js b/src/lib/templates/marroncito.js
index e69de29..6292c03 100644
--- a/src/lib/templates/marroncito.js
+++ b/src/lib/templates/marroncito.js
@@ -0,0 +1,118 @@
+import '$lib/templates/templates'
+
+/** @type {import('$lib/templates/templates').Template} */
+export const marroncito = {
+  name: "marroncito",
+  description: "marroncito",
+  image: "marroncito.png",
+  heading: {
+    top: 20,
+    height: 32,
+    left: 20,
+    right: 350,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 36,
+    textAlign: "left",
+    fontWeight: 400
+  },
+  title: {
+    top: 58,
+    height: 120,
+    left: 8,
+    right: 8,
+    fontSize: 35,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 28,
+    textAlign: "center",
+    fontWeight: 500
+
+  },
+  subtitle: {
+    top: 160,
+    height: 48,
+    left: 8,
+    right: 8,
+    fontSize: 25,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 48,
+    textAlign: "center",
+    fontWeight: 300
+  },
+  content: {
+    top: 480,
+    height: 8.5,
+    left: 1.5,
+    right: 17,
+    fontSize: 0,
+    color: "#222",
+    fontFamily: "sans-serif",
+    lineHeight: 1.1,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  date: {
+    top: 540,
+    height: 32,
+    left: 128,
+    right: 8,
+    fontSize: 32,
+    color: "#fff",
+    fontFamily: "'Arial', sans-serif",
+    lineHeight: 32,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  time: {
+    top: 600,
+    height: 32,
+    left: 128,
+    right: 8,
+    fontSize: 32,
+    color: "#fff",
+    fontFamily: "'Arial', sans-serif",
+    lineHeight: 32,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  weekday: {
+    top: 8,
+    height: 32,
+    left: 8,
+    right: 80,
+    fontSize: 0,
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 1.8,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  address: {
+    top: 650,
+    height: 48,
+    left: 128,
+    right: 8,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 20,
+    textAlign: "left",
+    fontWeight: 400
+  },
+  city: {
+    top: 20,
+    height: 32,
+    left: 240,
+    right: 20,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 36,
+    textAlign: "right",
+    fontWeight: 500
+  },
+}
+
diff --git a/src/lib/templates/pajaros_papel.js b/src/lib/templates/pajaros_papel.js
index e69de29..d278636 100644
--- a/src/lib/templates/pajaros_papel.js
+++ b/src/lib/templates/pajaros_papel.js
@@ -0,0 +1,118 @@
+import '$lib/templates/templates'
+
+/** @type {import('$lib/templates/templates').Template} */
+export const pajaros_papel = {
+  name: "pajaros_papel",
+  description: "pajaros_papel",
+  image: "pajaros_papel.png",
+  heading: {
+    top: 20,
+    height: 32,
+    left: 20,
+    right: 350,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 36,
+    textAlign: "left",
+    fontWeight: 400
+  },
+  title: {
+    top: 58,
+    height: 120,
+    left: 8,
+    right: 8,
+    fontSize: 35,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 28,
+    textAlign: "center",
+    fontWeight: 500
+
+  },
+  subtitle: {
+    top: 160,
+    height: 48,
+    left: 8,
+    right: 8,
+    fontSize: 25,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 48,
+    textAlign: "center",
+    fontWeight: 300
+  },
+  content: {
+    top: 480,
+    height: 8.5,
+    left: 1.5,
+    right: 17,
+    fontSize: 0,
+    color: "#222",
+    fontFamily: "sans-serif",
+    lineHeight: 1.1,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  date: {
+    top: 540,
+    height: 32,
+    left: 128,
+    right: 8,
+    fontSize: 32,
+    color: "#fff",
+    fontFamily: "'Arial', sans-serif",
+    lineHeight: 32,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  time: {
+    top: 600,
+    height: 32,
+    left: 128,
+    right: 8,
+    fontSize: 32,
+    color: "#fff",
+    fontFamily: "'Arial', sans-serif",
+    lineHeight: 32,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  weekday: {
+    top: 8,
+    height: 32,
+    left: 8,
+    right: 80,
+    fontSize: 0,
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 1.8,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  address: {
+    top: 650,
+    height: 48,
+    left: 128,
+    right: 8,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 20,
+    textAlign: "left",
+    fontWeight: 400
+  },
+  city: {
+    top: 20,
+    height: 32,
+    left: 240,
+    right: 20,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 36,
+    textAlign: "right",
+    fontWeight: 500
+  },
+}
+
diff --git a/src/lib/templates/sanitarios.js b/src/lib/templates/sanitarios.js
index e69de29..40d1729 100644
--- a/src/lib/templates/sanitarios.js
+++ b/src/lib/templates/sanitarios.js
@@ -0,0 +1,118 @@
+import '$lib/templates/templates'
+
+/** @type {import('$lib/templates/templates').Template} */
+export const sanitarios = {
+  name: "sanitarios",
+  description: "sanitarios",
+  image: "sanitarios.png",
+  heading: {
+    top: 20,
+    height: 32,
+    left: 20,
+    right: 350,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 36,
+    textAlign: "left",
+    fontWeight: 400
+  },
+  title: {
+    top: 58,
+    height: 120,
+    left: 8,
+    right: 8,
+    fontSize: 35,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 28,
+    textAlign: "center",
+    fontWeight: 500
+
+  },
+  subtitle: {
+    top: 160,
+    height: 48,
+    left: 8,
+    right: 8,
+    fontSize: 25,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 48,
+    textAlign: "center",
+    fontWeight: 300
+  },
+  content: {
+    top: 480,
+    height: 8.5,
+    left: 1.5,
+    right: 17,
+    fontSize: 0,
+    color: "#222",
+    fontFamily: "sans-serif",
+    lineHeight: 1.1,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  date: {
+    top: 540,
+    height: 32,
+    left: 128,
+    right: 8,
+    fontSize: 32,
+    color: "#fff",
+    fontFamily: "'Arial', sans-serif",
+    lineHeight: 32,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  time: {
+    top: 600,
+    height: 32,
+    left: 128,
+    right: 8,
+    fontSize: 32,
+    color: "#fff",
+    fontFamily: "'Arial', sans-serif",
+    lineHeight: 32,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  weekday: {
+    top: 8,
+    height: 32,
+    left: 8,
+    right: 80,
+    fontSize: 0,
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 1.8,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  address: {
+    top: 650,
+    height: 48,
+    left: 128,
+    right: 8,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 20,
+    textAlign: "left",
+    fontWeight: 400
+  },
+  city: {
+    top: 20,
+    height: 32,
+    left: 240,
+    right: 20,
+    fontSize: 18,
+    color: "white",
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 36,
+    textAlign: "right",
+    fontWeight: 500
+  },
+}
+
diff --git a/src/lib/templates/templates.js b/src/lib/templates/templates.js
index ed9ab57..f86a476 100644
--- a/src/lib/templates/templates.js
+++ b/src/lib/templates/templates.js
@@ -2,6 +2,13 @@ import { verde } from '$lib/templates/verde';
 import { azul } from '$lib/templates/azul';
 import { corazon } from '$lib/templates/corazon';
 import { posits } from '$lib/templates/posits';
+import { acuarela } from '$lib/templates/acuarela';
+import { amarillo } from '$lib/templates/amarillo';
+import { curvas_azul } from '$lib/templates/curvas_azul';
+import { diente_de_leon } from '$lib/templates/diente_de_leon';
+import { marroncito } from '$lib/templates/marroncito';
+import { pajaros_papel } from '$lib/templates/pajaros_papel';
+import { sanitarios } from '$lib/templates/sanitarios';
 /** 
 * @typedef {{
 * top: number;
@@ -35,4 +42,4 @@ import { posits } from '$lib/templates/posits';
 */
 
 /** @type Array<Template> */
-export const templates = [verde, azul, corazon, posits];
+export const templates = [verde, azul, corazon, posits, acuarela, amarillo, curvas_azul, diente_de_leon, marroncito, pajaros_papel, sanitarios];
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3c19828..ae698ba 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -12,23 +12,21 @@
 <section>
   <p>Elige plantilla</p>
   <div class="main">
-    <ul>
-      {#each templates as template}
-        <li>
-          <a href="/{template.name}" data-sveltekit-prefetch
-            ><img
-              src="/{template.image}"
-              alt="Plantilla en blanco estilo {template.name}"
-            />
-            {#if template.description}
-              <div class="caption">{@html template.description}</div>
-            {:else}
-              <div class="caption">{template.name}</div>
-            {/if}
-          </a>
-        </li>
-      {/each}
-    </ul>
+    {#each templates as template}
+      <div class="element">
+        <a href="/{template.name}" data-sveltekit-prefetch
+          ><img
+            src="/{template.image}"
+            alt="Plantilla en blanco estilo {template.name}"
+          />
+          {#if template.description}
+            <div class="caption">{@html template.description}</div>
+          {:else}
+            <div class="caption">{template.name}</div>
+          {/if}
+        </a>
+      </div>
+    {/each}
   </div>
 </section>
 
@@ -42,8 +40,8 @@
 
   .main {
     display: grid;
-    grid-auto-columns: 1fr;
-    grid-auto-rows: 1fr;
+    grid-template-columns: repeat(4, min-content);
+    /* grid-auto-rows: 1fr; */
     grid-gap: 1rem;
     padding: 1rem 0;
   }
@@ -51,11 +49,7 @@
     font-size: 1.5rem;
     color: #333;
   }
-  ul {
-    list-style: none;
-    display: flex;
-  }
-  li {
+  .element {
     line-height: 2rem;
     display: inline-block;
     padding: 0.25rem;
@@ -82,4 +76,9 @@
     text-align: left;
     padding: 0.25rem;
   }
+  @media (max-width: 768px) {
+    .main {
+      grid-template-columns: repeat(2, min-content);
+    }
+  }
 </style>