From f09a6dba7fc27c62ef111028e53e168add75fe58 Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Thu, 29 Sep 2022 14:55:27 +0200
Subject: [PATCH] arregla un problema de importar el css a lo loco

---
 src/lib/form/Colabs.svelte    |   4 +-
 src/lib/form/Form.svelte      |   4 +-
 src/lib/form/Organized.svelte |   7 +-
 src/lib/preview/verde.css     | 443 +++++++++++++++++-----------------
 src/routes/+page.svelte       |   1 +
 5 files changed, 234 insertions(+), 225 deletions(-)

diff --git a/src/lib/form/Colabs.svelte b/src/lib/form/Colabs.svelte
index 7b98c99..8d87f53 100644
--- a/src/lib/form/Colabs.svelte
+++ b/src/lib/form/Colabs.svelte
@@ -57,10 +57,11 @@
 <style>
 	.colabs {
 		display: grid;
-		grid-template-columns: repeat(5, min-content);
+		grid-template-columns: repeat(3, min-content);
 		align-items: center;
 		justify-content: center;
 	}
+
 	.organization {
 		position: relative;
 		display: grid;
@@ -88,6 +89,7 @@
 		cursor: pointer;
 		background-color: white;
 		padding: 0 0.25rem;
+		z-index: 2;
 	}
 
 	input {
diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte
index 641a9da..3f0a155 100644
--- a/src/lib/form/Form.svelte
+++ b/src/lib/form/Form.svelte
@@ -108,7 +108,7 @@
 			<textarea bind:value={$address} type="text" name="address" />
 		</div>
 	</div>
-	<div class="form-group media">
+	<div class="form-group ">
 		<label for="organizedBy">Organiza:</label>
 		<Organized />
 		<label for="colabs">Colabora:</label>
@@ -158,7 +158,7 @@
 	}
 
 	button {
-		margin: 0 1rem;
+		margin: 1rem;
 		padding: 0.5rem;
 		font-size: 1.1rem;
 		cursor: pointer;
diff --git a/src/lib/form/Organized.svelte b/src/lib/form/Organized.svelte
index 2430bf9..062a70b 100644
--- a/src/lib/form/Organized.svelte
+++ b/src/lib/form/Organized.svelte
@@ -22,7 +22,7 @@
 	};
 </script>
 
-<div class="organized-by">
+<div class="form-organized-by">
 	{#if $organizedBy[0]}
 		{#each $organizedBy as organization, i}
 			<div class="organization">
@@ -55,7 +55,7 @@
 />
 
 <style>
-	.organized-by {
+	.form-organized-by {
 		display: grid;
 		grid-template-columns: repeat(5, min-content);
 		align-items: center;
@@ -87,11 +87,14 @@
 		cursor: pointer;
 		background-color: white;
 		padding: 0 0.25rem;
+		z-index: 2;
 	}
+
 	input {
 		display: block;
 		max-width: 100px;
 	}
+
 	button {
 		display: block;
 		padding: 0.5rem;
diff --git a/src/lib/preview/verde.css b/src/lib/preview/verde.css
index 2e34088..a6bcc2d 100644
--- a/src/lib/preview/verde.css
+++ b/src/lib/preview/verde.css
@@ -1,220 +1,223 @@
-	.preview {
-		padding: 1rem;
-		display: grid;
-		justify-content: center;
-		grid-template-columns: 1fr;
-	}
-
-	.result {
-		display: block;
-		aspect-ratio: 1/1.4142;
-		min-height: 842px;
-		align-self: center;
-		/* background-color: rebeccapurple; */
-		width: auto;
-		background-image: url('/imagen01.png');
-		background-size: contain;
-		position: relative;
-		padding: 1rem;
-		/* border-radius: 0.5rem; */
-	}
-
-	.heading {
-		position: absolute;
-		top: 300px;
-		left: 1rem;
-		right: 1rem;
-		font-size: 1rem;
-		color: grey;
-		font-variant: small-caps;
-		height: 1.2rem;
-		overflow: hidden;
-	}
-
-	.title {
-		position: absolute;
-		top: 320px;
-		left: 1rem;
-		right: 1rem;
-		font-family: 'Gill Sans', sans-serif;
-		font-size: 2.9rem;
-		font-variant: small-caps;
-		line-height: 2.5rem;
-		color: firebrick;
-		font-weight: 600;
-		height: 5rem;
-		overflow: hidden;
-		display: flex;
-		justify-content: center;
-		align-items: end;
-		text-align: center;
-	}
-	.subtitle {
-		position: absolute;
-		display: flex;
-		top: 410px;
-		left: 1rem;
-		right: 2rem;
-		font-size: 1.2rem;
-		color: #787;
-		text-transform: uppercase;
-		height: 3rem;
-		overflow: hidden;
-		text-align: center;
-		align-items: start;
-		justify-content: center;
-	}
-
-	.content {
-		position: absolute;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		top: 480px;
-		left: 2rem;
-		right: 16rem;
-		height: 7.5rem;
-		font-size: 1rem;
-		color: #222;
-		line-height: 1.5rem;
-		overflow: hidden;
-	}
-
-	.weekday {
-		position: absolute;
-		text-transform: uppercase;
-		top: 605px;
-		left: 22rem;
-		right: 5rem;
-		color: white;
-		max-height: 2rem;
-		font-size: 1.3rem;
-		font-weight: 700;
-		overflow: hidden;
-		text-align: center;
-	}
-
-	.date {
-		position: absolute;
-		text-transform: uppercase;
-		top: 630px;
-		left: 22rem;
-		right: 4rem;
-		font-size: 1.1rem;
-		/* font-weight: 700; */
-		color: white;
-		max-height: 2rem;
-		overflow: hidden;
-		text-align: center;
-	}
-
-	.time {
-		position: absolute;
-		top: 650px;
-		left: 22rem;
-		right: 5rem;
-		font-size: 1.8rem;
-		color: white;
-		max-height: 2rem;
-		overflow: hidden;
-		text-align: center;
-		font-weight: 700;
-	}
-
-	.address {
-		position: absolute;
-		top: 620px;
-		left: 2rem;
-		right: 20rem;
-		font-size: 1rem;
-		text-align: center;
-		font-weight: 700;
-		line-height: 1.5rem;
-		font-family: sans-serif;
-		color: firebrick;
-		max-height: 4.5rem;
-		overflow: hidden;
-		white-space: pre-wrap;
-	}
-
-	.imagetitle {
-		position: absolute;
-		top: 720px;
-		font-size: 0.8rem;
-		color: #444;
-	}
-
-	.organized-by {
-		position: absolute;
-		top: 740px;
-		left: 1rem;
-		right: 1rem;
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
-		grid-template-rows: min-content;
-		grid-auto-rows: auto;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.organization {
-		margin: 0 1rem;
-		display: flex;
-		flex-direction: column;
-		text-align: center;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.organization img {
-		max-height: 48px;
-		max-width: 100px;
-		margin: 0 auto;
-		opacity: 75%;
-	}
-
-	.caption {
-		margin: 0.5rem 0;
-		font-size: 0.7rem;
-		font-family: sans-serif;
-		text-transform: uppercase;
-		color: #666;
-	}
-
-	.orgcolab {
-		position: absolute;
-		top: 720px;
-		height: 7rem;
-		overflow: hidden;
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		grid-template-rows: min-content 1fr;
-		grid-gap: 0.25rem;
-		justify-content: start;
-		align-items: center;
-		width: 100%;
-	}
-
-	.org {
-		grid-row: 1/2;
-		grid-column: 1/2;
-		font-size: 0.8rem;
-	}
-
-	.colab {
-		font-size: 0.8rem;
-		grid-row: 1/2;
-		grid-column: 2/3;
-	}
-
-	.orgmixed {
-		grid-row: 2/3;
-		grid-column: 1/2;
-		display: flex;
-	}
-
-	.colabmixed {
-		grid-row: 2/3;
-		grid-column: 2/3;
-		display: flex;
-	}
+.preview {
+	padding: 0.5rem;
+	display: grid;
+	justify-content: center;
+	grid-template-columns: 1fr;
+  align-items: start;
+}
+
+.result {
+	display: block;
+	aspect-ratio: 1/1.4142;
+	min-height: 842px;
+	align-self: center;
+	/* background-color: rebeccapurple; */
+	width: auto;
+	background-image: url('/imagen01.png');
+	background-size: contain;
+	position: relative;
+	padding: 1rem;
+	/* border-radius: 0.5rem; */
+}
+
+.heading {
+	position: absolute;
+	top: 300px;
+	left: 1rem;
+	right: 1rem;
+	font-size: 1rem;
+	color: grey;
+	font-variant: small-caps;
+	height: 1.2rem;
+	overflow: hidden;
+}
+
+.title {
+	position: absolute;
+	top: 320px;
+	left: 1rem;
+	right: 1rem;
+	font-family: 'Gill Sans', sans-serif;
+	font-size: 2.9rem;
+	font-variant: small-caps;
+	line-height: 2.5rem;
+	color: firebrick;
+	font-weight: 600;
+	height: 5rem;
+	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	align-items: end;
+	text-align: center;
+}
+
+.subtitle {
+	position: absolute;
+	display: flex;
+	top: 410px;
+	left: 1rem;
+	right: 2rem;
+	font-size: 1.2rem;
+	color: #787;
+	text-transform: uppercase;
+	height: 3rem;
+	overflow: hidden;
+	text-align: center;
+	align-items: start;
+	justify-content: center;
+}
+
+.content {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	top: 480px;
+	left: 2rem;
+	right: 16rem;
+	height: 7.5rem;
+	font-size: 1rem;
+	color: #222;
+	line-height: 1.5rem;
+	overflow: hidden;
+}
+
+.weekday {
+	position: absolute;
+	text-transform: uppercase;
+	top: 605px;
+	left: 22rem;
+	right: 5rem;
+	color: white;
+	max-height: 2rem;
+	font-size: 1.3rem;
+	font-weight: 700;
+	overflow: hidden;
+	text-align: center;
+}
+
+.date {
+	position: absolute;
+	text-transform: uppercase;
+	top: 630px;
+	left: 22rem;
+	right: 4rem;
+	font-size: 1.1rem;
+	/* font-weight: 700; */
+	color: white;
+	max-height: 2rem;
+	overflow: hidden;
+	text-align: center;
+}
+
+.time {
+	position: absolute;
+	top: 650px;
+	left: 22rem;
+	right: 5rem;
+	font-size: 1.8rem;
+	color: white;
+	max-height: 2rem;
+	overflow: hidden;
+	text-align: center;
+	font-weight: 700;
+}
+
+.address {
+	position: absolute;
+	top: 620px;
+	left: 2rem;
+	right: 20rem;
+	font-size: 1rem;
+	text-align: center;
+	font-weight: 700;
+	line-height: 1.5rem;
+	font-family: sans-serif;
+	color: firebrick;
+	max-height: 4.5rem;
+	overflow: hidden;
+	white-space: pre-wrap;
+}
+
+.imagetitle {
+	position: absolute;
+	top: 720px;
+	font-size: 0.8rem;
+	color: #444;
+}
+
+.organized-by {
+	position: absolute;
+	top: 740px;
+	left: 1rem;
+	right: 1rem;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
+	grid-template-rows: min-content;
+	grid-auto-rows: auto;
+	justify-content: center;
+	align-items: center;
+}
+
+.organization {
+	margin: 0 1rem;
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+}
+
+.organization img {
+	max-height: 48px;
+	max-width: 100px;
+	margin: 0 auto;
+	opacity: 75%;
+}
+
+
+.caption {
+	margin: 0.5rem 0;
+	font-size: 0.7rem;
+	font-family: sans-serif;
+	text-transform: uppercase;
+	color: #666;
+}
+
+.orgcolab {
+	position: absolute;
+	top: 720px;
+	height: 7rem;
+	overflow: hidden;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: min-content 1fr;
+	grid-gap: 0.25rem;
+	justify-content: start;
+	align-items: center;
+	width: 100%;
+}
+
+.org {
+	grid-row: 1/2;
+	grid-column: 1/2;
+	font-size: 0.8rem;
+}
+
+.colab {
+	font-size: 0.8rem;
+	grid-row: 1/2;
+	grid-column: 2/3;
+}
+
+.orgmixed {
+	grid-row: 2/3;
+	grid-column: 1/2;
+	display: flex;
+}
+
+.colabmixed {
+	grid-row: 2/3;
+	grid-column: 2/3;
+	display: flex;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ea2d1f2..91e25d4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -23,6 +23,7 @@
 		grid-gap: 0.5rem;
 		min-height: calc(100vh - 5rem);
 	}
+
 	.form {
 		grid-column: 1/2;
 		background-color: rgb(230, 240, 240);