From bfb58294f74bcea051b680dd0d531985423bdd0c Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Fri, 30 Sep 2022 16:21:55 +0200
Subject: [PATCH] mejoras de estilos, lo voy a pushear y creo una branch nueva

---
 src/app.css                    |  2 +-
 src/lib/form/Colabs.svelte     |  2 +-
 src/lib/form/Form.svelte       | 39 +++++++++++++++++++++++++---------
 src/lib/form/Organized.svelte  |  7 +++---
 src/lib/header/Header.svelte   | 29 +++++++++++++------------
 src/lib/preview/Preview.svelte |  1 +
 src/routes/+page.svelte        |  2 ++
 7 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/app.css b/src/app.css
index f6f07bc..40fd199 100644
--- a/src/app.css
+++ b/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;
diff --git a/src/lib/form/Colabs.svelte b/src/lib/form/Colabs.svelte
index 8d87f53..6049f8a 100644
--- a/src/lib/form/Colabs.svelte
+++ b/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 {
diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte
index 7495fec..c2e88e3 100644
--- a/src/lib/form/Form.svelte
+++ b/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">
-			<label for="date">Fecha</label>
+	<div class="form-group when">
+		<div class="daymonthhour">
+			<label for="date">Fecha y hora</label>
 			<input bind:value={$date} type="datetime-local" name="date" />
 		</div>
-
-		<div class="form-group">
+		<div class="dayname">
 			<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">
-			<label for="address">Dirección</label>
-			<textarea bind:value={$address} type="text" name="address" />
-		</div>
+	<div class="form-group">
+		<label for="address">Dirección</label>
+		<textarea
+			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>
diff --git a/src/lib/form/Organized.svelte b/src/lib/form/Organized.svelte
index 062a70b..c88722d 100644
--- a/src/lib/form/Organized.svelte
+++ b/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;
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
index 6f3b76e..32df4cf 100644
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@@ -1,19 +1,20 @@
 <header>
-    <h1>Cartelería DMD</h1>
+	<h1>Carteles dmd</h1>
 </header>
 
 <style>
-    header {
-	max-height: 4rem;
-	margin: 0;
-	padding: 0.5rem;
-    }
-    h1 {
-	font-size: 2rem;
-	font-weight: 500;
-	color: firebrick;
-	font-family: 'Gill Sans', sans-serif;
-	font-variant: small-caps;
-    }
-
+	header {
+		max-height: 4rem;
+		margin: 0;
+		padding: 0.5rem 1rem;
+	}
+	h1 {
+		text-align: left;
+		font-size: 2rem;
+		font-weight: 700;
+		color: firebrick;
+		font-family: 'Ubuntu', sans-serif;
+		/* font-family: 'Gill Sans', sans-serif; */
+		/* font-variant: small-caps; */
+	}
 </style>
diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte
index 94b3a2b..c8b0e53 100644
--- a/src/lib/preview/Preview.svelte
+++ b/src/lib/preview/Preview.svelte
@@ -96,4 +96,5 @@
 </div>
 
 <style>
+	/* @import url(`'${template}.css'`); */
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 91e25d4..8954221 100644
--- a/src/routes/+page.svelte
+++ b/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>