src/lib/components/Text.svelte

@@ -24,6 +24,7 @@
 
 <div class="text-container">
 	<input type="checkbox" bind:checked />
+	<label for="checked">Mostrar texto</label>
 
 	{#if checked}
 		<div class="text" contenteditable="true">
@@ -49,4 +50,7 @@
 	p {
 		margin-bottom: 1rem;
 	}
+	label {
+		color: #333;
+	}
 </style>

src/lib/templates/azul.js

@@ -54,23 +54,23 @@ export const azul = {
     fontWeight: 700
   },
   date: {
-    top: 25,
+    top: 48,
     height: 4,
-    left: 5,
+    left: 1,
     right: 1,
-    fontSize: 1.1,
+    fontSize: 1.5,
     color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 1,
+    lineHeight: 2,
     textAlign: "right",
     fontWeight: 700
   },
   time: {
-    top: 55,
+    top: 72,
     height: 2,
-    left: 18.5,
+    left: 1,
     right: 1,
-    fontSize: 1.8,
+    fontSize: 1.5,
     color: "#fff",
     fontFamily: "sans-serif",
     lineHeight: 2,
@@ -78,15 +78,15 @@ export const azul = {
     fontWeight: 700
   },
   weekday: {
-    top: 25,
+    top: 24,
     height: 1.5,
     left: 1,
-    right: 10,
+    right: 1,
-    fontSize: 1.3,
+    fontSize: 1.5,
     color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 1.8,
+    lineHeight: 2,
-    textAlign: "left",
+    textAlign: "right",
     fontWeight: 700
   },
   address: {

src/lib/templates/corazon.js

@@ -17,26 +17,26 @@ export const corazon = {
     fontWeight: 700
   },
   title: {
-    top: 445,
+    top: 145,
-    height: 7.5,
+    height: 3,
     left: 1,
     right: 1,
     fontSize: 3,
-    color: "firebrick",
+    color: "white",
-    fontFamily: "sans-serif",
+    fontFamily: "'Arial', sans-serif",
     lineHeight: 2.4,
     textAlign: "right",
     fontWeight: 700
 
   },
   subtitle: {
-    top: 575,
+    top: 100,
-    height: 1.4,
+    height: 1.5,
     left: 1,
-    right: 2,
+    right: 1,
-    fontSize: 1.6,
+    fontSize: 2,
     color: "white",
-    fontFamily: "Gill Sans, sans-serif",
+    fontFamily: "'Arial', sans-serif",
     lineHeight: 1.5,
     textAlign: "center",
     fontWeight: 400
@@ -54,27 +54,27 @@ export const corazon = {
     fontWeight: 700
   },
   date: {
-    top: 25,
+    top: 535,
     height: 4,
-    left: 5,
+    left: 8,
     right: 1,
-    fontSize: 1.1,
+    fontSize: 2,
     color: "#fff",
-    fontFamily: "sans-serif",
+    fontFamily: "'Arial', sans-serif",
-    lineHeight: 1,
+    lineHeight: 2,
-    textAlign: "right",
+    textAlign: "left",
     fontWeight: 700
   },
   time: {
-    top: 55,
+    top: 595,
     height: 2,
-    left: 18.5,
+    left: 8,
     right: 1,
-    fontSize: 1.8,
+    fontSize: 2,
     color: "#fff",
-    fontFamily: "sans-serif",
+    fontFamily: "'Arial', sans-serif",
     lineHeight: 2,
-    textAlign: "right",
+    textAlign: "left",
     fontWeight: 700
   },
   weekday: {
@@ -90,15 +90,15 @@ export const corazon = {
     fontWeight: 700
   },
   address: {
-    top: 620,
+    top: 645,
     height: 5.5,
-    left: 2,
+    left: 8,
     right: 2,
-    fontSize: 1.2,
+    fontSize: 1.3,
     color: "white",
-    fontFamily: "sans-serif",
+    fontFamily: "'Arial', sans-serif",
-    lineHeight: 1.8,
+    lineHeight: 1.6,
-    textAlign: "center",
+    textAlign: "left",
     fontWeight: 400
   },
 }

src/lib/templates/templates.js

@@ -32,7 +32,4 @@ import { corazon } from '$lib/templates/corazon';
 */
 
 /** @type Array<Template> */
-export const templates = [];
+export const templates = [verde, azul, corazon];
-templates.push(verde);
-templates.push(azul);
-templates.push(corazon);