nuevas plantillas añadidas

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
+  },
+}
+
+

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
+  },
+}
+

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
+  },
+}
+

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
+  },
+}
+

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];

src/routes/+page.svelte

@@ -12,23 +12,21 @@
 <section>
   <p>Elige plantilla</p>
   <div class="main">
-    <ul>
+    {#each templates as template}
-      {#each templates as template}
+      <div class="element">
-        <li>
+        <a href="/{template.name}" data-sveltekit-prefetch
-          <a href="/{template.name}" data-sveltekit-prefetch
+          ><img
-            ><img
+            src="/{template.image}"
-              src="/{template.image}"
+            alt="Plantilla en blanco estilo {template.name}"
-              alt="Plantilla en blanco estilo {template.name}"
+          />
-            />
+          {#if template.description}
-            {#if template.description}
+            <div class="caption">{@html template.description}</div>
-              <div class="caption">{@html template.description}</div>
+          {:else}
-            {:else}
+            <div class="caption">{template.name}</div>
-              <div class="caption">{template.name}</div>
+          {/if}
-            {/if}
+        </a>
-          </a>
+      </div>
-        </li>
+    {/each}
-      {/each}
-    </ul>
   </div>
 </section>
 
@@ -42,8 +40,8 @@
 
   .main {
     display: grid;
-    grid-auto-columns: 1fr;
+    grid-template-columns: repeat(4, min-content);
-    grid-auto-rows: 1fr;
+    /* grid-auto-rows: 1fr; */
     grid-gap: 1rem;
     padding: 1rem 0;
   }
@@ -51,11 +49,7 @@
     font-size: 1.5rem;
     color: #333;
   }
-  ul {
+  .element {
-    list-style: none;
-    display: flex;
-  }
-  li {
     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>