mejoras de estilos, lo voy a pushear y creo una branch nueva

src/app.css

@@ -6,7 +6,7 @@
 }
 
 :root {
-    font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    font-family: Ubuntu, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
     Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     --font-mono: 'Fira Mono', monospace;
     --pure-white: #ffffff;

src/lib/form/Colabs.svelte

@@ -59,7 +59,7 @@
 		display: grid;
 		grid-template-columns: repeat(3, min-content);
 		align-items: center;
-		justify-content: center;
+		justify-content: start;
 	}
 
 	.organization {

src/lib/form/Form.svelte

@@ -93,22 +93,30 @@
 		<div id="editor" on:click={getContent}>
 			<div on:click={getContent} on:keyup={getContent} bind:this={editor} />
 		</div>
+	</div>
 
-		<div class="form-group">
+	<div class="form-group when">
-			<label for="date">Fecha</label>
+		<div class="daymonthhour">
+			<label for="date">Fecha y hora</label>
 			<input bind:value={$date} type="datetime-local" name="date" />
 		</div>
-
+		<div class="dayname">
-		<div class="form-group">
 			<label for="weekday">Día de la semana</label>
-			<input bind:value={$weekday} type="text" name="weekday" />
+			<input bind:value={$weekday} type="text" name="weekday" placeholder="Ej. Lunes" />
 		</div>
+	</div>
 
-		<div class="form-group">
+	<div class="form-group">
-			<label for="address">Dirección</label>
+		<label for="address">Dirección</label>
-			<textarea bind:value={$address} type="text" name="address" />
+		<textarea
-		</div>
+			bind:value={$address}
+			type="text"
+			name="address"
+			placeholder="Ej. Calle del Abeto, 4
+Albacete"
+		/>
 	</div>
+
 	<div class="form-group ">
 		<label for="organizedBy">Organiza:</label>
 		<Organized />
@@ -116,6 +124,7 @@
 		<Colabs />
 	</div>
 </form>
+
 <button on:click|preventDefault={downloadCanvas}>Descargar</button>
 
 <style>
@@ -128,12 +137,16 @@
 		display: block;
 	}
 
+	.form-group {
+		display: block;
+	}
+
 	input {
 		display: block;
 		width: 100%;
 		font-size: 0.8rem;
 		font-family: sans-serif;
-		padding: 0.45rem;
+		padding: 0.5rem;
 	}
 
 	textarea {
@@ -164,4 +177,10 @@
 		font-size: 1.1rem;
 		cursor: pointer;
 	}
+
+	.form-group.when {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 0.25rem;
+	}
 </style>

src/lib/form/Organized.svelte

@@ -57,9 +57,9 @@
 <style>
 	.form-organized-by {
 		display: grid;
-		grid-template-columns: repeat(5, min-content);
+		grid-template-columns: repeat(3, min-content);
 		align-items: center;
-		justify-content: center;
+		justify-content: start;
 	}
 	.organization {
 		position: relative;
@@ -87,7 +87,6 @@
 		cursor: pointer;
 		background-color: white;
 		padding: 0 0.25rem;
-		z-index: 2;
 	}
 
 	input {
@@ -96,7 +95,7 @@
 	}
 
 	button {
-		display: block;
+		display: inline-block;
 		padding: 0.5rem;
 		cursor: pointer;
 		margin: 1rem;

src/lib/header/Header.svelte

@@ -1,19 +1,20 @@
 <header>
-    <h1>Cartelería DMD</h1>
+	<h1>Carteles dmd</h1>
 </header>
 
 <style>
-    header {
+	header {
-	max-height: 4rem;
+		max-height: 4rem;
-	margin: 0;
+		margin: 0;
-	padding: 0.5rem;
+		padding: 0.5rem 1rem;
-    }
+	}
-    h1 {
+	h1 {
-	font-size: 2rem;
+		text-align: left;
-	font-weight: 500;
+		font-size: 2rem;
-	color: firebrick;
+		font-weight: 700;
-	font-family: 'Gill Sans', sans-serif;
+		color: firebrick;
-	font-variant: small-caps;
+		font-family: 'Ubuntu', sans-serif;
-    }
+		/* font-family: 'Gill Sans', sans-serif; */
-
+		/* font-variant: small-caps; */
+	}
 </style>

src/lib/preview/Preview.svelte

@@ -96,4 +96,5 @@
 </div>
 
 <style>
+	/* @import url(`'${template}.css'`); */
 </style>

src/routes/+page.svelte

@@ -1,6 +1,8 @@
 <script>
 	import Form from '$lib/form/Form.svelte';
 	import Preview from '$lib/preview/Preview.svelte';
+
+	let template = 'verde';
 </script>
 
 <svelte:head>