empieza a meter cosicas y una plantilla

src/lib/form/Form.svelte

@@ -1,34 +1,34 @@
 <script>
-    import {title} from '$lib/stores/store'
+	import { title } from '$lib/stores/store';
 
-    const handleSubmit = async () => {
+	const handleSubmit = async () => {
-	console.log("submit");	
+		console.log('submit');
-    }
+	};
 </script>
 
 <form on:submit|preventDefault={handleSubmit}>
-    <label for="title">Título</label>
+	<label for="title">Título</label>
-    <input bind:value={$title} type="text" name="title" placeholder="Título">
+	<input bind:value={$title} type="text" name="title" placeholder="Título" />
 </form>
 
 <style>
+	form {
+		margin: 1rem;
+		display: block;
+	}
 
-    form {
+	input {
-	margin: 1rem;
+		display: block;
-	display: block;
+		width: 100%;
-    }
+		font-size: 1rem;
+		font-family: monospace;
+		padding: 0.5rem;
+	}
 
-    input {
+	label {
-	display: block;
+		display: block;
-	width: 100%;
+		font-size: 1rem;
-	font-size: 1rem;
+		font-family: monospace;
-	font-family: monospace;
+		margin: 0.5rem 0;
-	padding: 0.5rem;
+	}
-    }
-
-    label {
-	display: block;
-	font-size: 1.5rem;
-	margin: 0.5rem 0;
-    }
 </style>

src/lib/preview/Preview.svelte

@@ -1,7 +1,51 @@
 <script>
- import {title} from '$lib/stores/store'
+    import {title, subtitle, date, address, content, heading} from '$lib/stores/store'
 </script>
 
 <div class="preview">
-    {$title}
+    <div class="result">
+	<div class="heading">{$heading}</div>
+	<div class="title">{$title}</div>
+    </div>
 </div>
+
+<style>
+    .preview {
+	padding: 1rem;
+	display: grid;
+	justify-content: center;
+	grid-template-columns: 1fr;
+    }
+
+    .result {
+	display: block;
+	aspect-ratio: 1/1.4142;
+	max-height: 92vh;
+	align-self: center;
+	background-color: lightblue;
+	width: auto;
+	background-image: url('imagen01.png');
+	background-size: contain;
+	position: relative;
+	padding: 1rem;
+    }
+
+    .title {
+	position: absolute;
+	top: 370px;
+	left: 1rem;
+	font-family: 'Gill Sans', sans-serif;
+	font-size: 2.5rem;
+	font-variant: small-caps;
+	right: 1rem;
+    }
+
+    .heading {
+	position: absolute;
+	top: 350px;
+	left: 1rem;
+	right: 1rem;
+	font-size: 2rem;
+	color: grey;
+	font-variant: small-caps;}
+</style>

src/lib/stores/store.js

@@ -1,3 +1,8 @@
 import {writable} from 'svelte/store'
 
 export const title = writable("");
+export const heading = writable("");
+export const subtitle = writable("");
+export const content = writable("");
+export const date = writable("");
+export const address = writable("");