mejora estilos un poco

src/lib/preview/Preview.svelte

@@ -1,38 +1,16 @@
 <script>
 	/** @type {number} */ export let templateIndex;
 	/** @type {string} */ export let templateImage;
+
+	import { organizedBy, colabs, canvas } from '$lib/stores/store';
+
 	import Heading from '$lib/templates/Heading.svelte';
 	import Title from '$lib/templates/Title.svelte';
 	import Subtitle from '$lib/templates/Subtitle.svelte';
 	import Content from '$lib/templates/Content.svelte';
-	import { date, weekday, address, organizedBy, colabs, canvas } from '$lib/stores/store';
-	import { getMonthName } from '$lib/monthName';
 	import Date from '$lib/templates/Date.svelte';
 	import Weekday from '$lib/templates/Weekday.svelte';
 	import Address from '$lib/templates/Address.svelte';
-
-	/** @type {Object<string,string>} */ let newdate = {};
-
-	const convertDateTime = (/** @type {string | undefined} */ datetime) => {
-		if (datetime == undefined) {
-			return {
-				date: '',
-				time: ''
-			};
-		}
-		const monthNumber = datetime.split('-')[1];
-		const day = datetime.split('-')[2].split('T')[0];
-		const time = datetime.split('T')[1];
-		const month = getMonthName(monthNumber);
-		return {
-			date: `${day} de ${month}`,
-			time: time
-		};
-	};
-
-	$: if ($date !== '') {
-		newdate = convertDateTime($date);
-	}
 </script>
 
 <div class="preview">
@@ -45,8 +23,8 @@
 			<Weekday {templateIndex} />
 			<Date {templateIndex} />
 			<Address {templateIndex} />
-			<!-- <div class="address">{$address}</div> -->
 		{/if}
+
 		{#if $organizedBy[0] && $colabs[0]}
 			<div class="orgcolab">
 				<div class="org">Organiza:</div>
@@ -69,6 +47,7 @@
 				</div>
 			</div>
 		{/if}
+
 		{#if $organizedBy[0] && !$colabs[0]}
 			<div class="imagetitle">Organiza:</div>
 			<div class="organized-by">
@@ -80,6 +59,7 @@
 				{/each}
 			</div>
 		{/if}
+
 		{#if $colabs[0] && !$organizedBy[0]}
 			<div class="imagetitle">Colabora:</div>
 			<div class="organized-by">
@@ -116,14 +96,15 @@
 
 	.imagetitle {
 		position: absolute;
-		top: 720px;
+		top: 725px;
 		font-size: 0.8rem;
 		color: #444;
+		text-transform: uppercase;
 	}
 
 	.organized-by {
 		position: absolute;
-		top: 740px;
+		top: 745px;
 		left: 1rem;
 		right: 1rem;
 		display: grid;
@@ -144,8 +125,8 @@
 	}
 
 	.organization img {
-		max-height: 48px;
+		max-height: 64px;
-		max-width: 100px;
+		max-width: 128px;
 		margin: 0 auto;
 		opacity: 75%;
 	}
@@ -160,7 +141,7 @@
 
 	.orgcolab {
 		position: absolute;
-		top: 720px;
+		top: 725px;
 		height: 7rem;
 		overflow: hidden;
 		display: grid;
@@ -176,12 +157,14 @@
 		grid-row: 1/2;
 		grid-column: 1/2;
 		font-size: 0.8rem;
+		text-transform: uppercase;
 	}
 
 	.colab {
 		font-size: 0.8rem;
 		grid-row: 1/2;
 		grid-column: 2/3;
+		text-transform: uppercase;
 	}
 
 	.orgmixed {