From 07343d4ec3b5f7b923d8c49f21b6df637bc9ef84 Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Thu, 29 Sep 2022 12:38:06 +0200
Subject: [PATCH] intento hacer cosas con plantillas

---
 src/lib/preview/Preview.svelte    | 221 +-----------------------------
 src/lib/preview/verde.css         | 220 +++++++++++++++++++++++++++++
 src/lib/templates/Template.svelte |   1 +
 3 files changed, 222 insertions(+), 220 deletions(-)
 create mode 100644 src/lib/preview/verde.css

diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte
index 8b799e8..94b3a2b 100644
--- a/src/lib/preview/Preview.svelte
+++ b/src/lib/preview/Preview.svelte
@@ -1,4 +1,5 @@
 <script>
+	import './verde.css';
 	import {
 		title,
 		subtitle,
@@ -95,224 +96,4 @@
 </div>
 
 <style>
-	.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;
-	}
 </style>
diff --git a/src/lib/preview/verde.css b/src/lib/preview/verde.css
new file mode 100644
index 0000000..2e34088
--- /dev/null
+++ b/src/lib/preview/verde.css
@@ -0,0 +1,220 @@
+	.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;
+	}
diff --git a/src/lib/templates/Template.svelte b/src/lib/templates/Template.svelte
index b3c6b6d..49f5fcd 100644
--- a/src/lib/templates/Template.svelte
+++ b/src/lib/templates/Template.svelte
@@ -1 +1,2 @@
 <script>
+</script>