From 92e27339618d13f81a141802194ea295ea683bdb Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Sat, 24 Sep 2022 14:41:34 +0200
Subject: [PATCH] =?UTF-8?q?separa=20la=20aplicaci=C3=B3n=20en=20dos=20mita?=
 =?UTF-8?q?des?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                   |   2 +
 src/lib/header/Header.svelte | 133 ++++-------------------------------
 src/routes/+layout.svelte    |  53 +++++++-------
 src/routes/+page.svelte      |  90 +++++++++++-------------
 4 files changed, 81 insertions(+), 197 deletions(-)

diff --git a/.gitignore b/.gitignore
index 64007bd..272173e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,5 @@ node_modules
 !.env.example
 .vercel
 .output
+*.swp
+*/*.swp
\ No newline at end of file
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
index b769f44..6f3b76e 100644
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@@ -1,126 +1,19 @@
-<script>
-	import { page } from '$app/stores';
-	import logo from './svelte-logo.svg';
-</script>
-
 <header>
-	<div class="corner">
-		<a href="https://kit.svelte.dev">
-			<img src={logo} alt="SvelteKit" />
-		</a>
-	</div>
-
-	<nav data-sveltekit-prefetch>
-		<svg viewBox="0 0 2 3" aria-hidden="true">
-			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
-		</svg>
-		<ul>
-			<li class:active={$page.url.pathname === '/'}>
-				<a href="/">Home</a>
-			</li>
-			<li class:active={$page.url.pathname === '/about'}>
-				<a href="/about">About</a>
-			</li>
-			<li class:active={$page.url.pathname === '/todos'}>
-				<a href="/todos">Todos</a>
-			</li>
-		</ul>
-		<svg viewBox="0 0 2 3" aria-hidden="true">
-			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
-		</svg>
-	</nav>
-
-	<div class="corner">
-		<!-- TODO put something else here? github link? -->
-	</div>
+    <h1>Cartelería DMD</h1>
 </header>
 
 <style>
-	header {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.corner {
-		width: 3em;
-		height: 3em;
-	}
-
-	.corner a {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-	}
-
-	.corner img {
-		width: 2em;
-		height: 2em;
-		object-fit: contain;
-	}
-
-	nav {
-		display: flex;
-		justify-content: center;
-		--background: rgba(255, 255, 255, 0.7);
-	}
-
-	svg {
-		width: 2em;
-		height: 3em;
-		display: block;
-	}
-
-	path {
-		fill: var(--background);
-	}
-
-	ul {
-		position: relative;
-		padding: 0;
-		margin: 0;
-		height: 3em;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		list-style: none;
-		background: var(--background);
-		background-size: contain;
-	}
-
-	li {
-		position: relative;
-		height: 100%;
-	}
-
-	li.active::before {
-		--size: 6px;
-		content: '';
-		width: 0;
-		height: 0;
-		position: absolute;
-		top: 0;
-		left: calc(50% - var(--size));
-		border: var(--size) solid transparent;
-		border-top: var(--size) solid var(--accent-color);
-	}
-
-	nav a {
-		display: flex;
-		height: 100%;
-		align-items: center;
-		padding: 0 1em;
-		color: var(--heading-color);
-		font-weight: 700;
-		font-size: 0.8rem;
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		text-decoration: none;
-		transition: color 0.2s linear;
-	}
+    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;
+    }
 
-	a:hover {
-		color: var(--accent-color);
-	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 51316ff..ea26203 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,45 +1,40 @@
 <script>
-	import Header from '$lib/header/Header.svelte';
-	import '../app.css';
+    import Header from '$lib/header/Header.svelte';
+    import '../app.css';
 </script>
 
 <Header />
-
 <main>
-	<slot />
+    <slot />
 </main>
 
 <footer>
-	<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
+    <p><a href="https://dereechoamorir.org">derechoamorir.org</a></p>
 </footer>
 
 <style>
-	main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		padding: 1rem;
-		width: 100%;
-		max-width: 1024px;
-		margin: 0 auto;
-		box-sizing: border-box;
-	}
+    main {
+	width: 100%;
+	padding: 0;
+	margin: 0 auto;
+	box-sizing: border-box;
+    }
 
-	footer {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		padding: 40px;
-	}
+    footer {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding: 40px;
+    }
 
-	footer a {
-		font-weight: bold;
-	}
+    footer a {
+	font-weight: bold;
+    }
 
-	@media (min-width: 480px) {
-		footer {
-			padding: 40px 0;
-		}
+    @media (min-width: 480px) {
+	footer {
+	    padding: 40px 0;
 	}
+    }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1382a3e..1440332 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,57 +1,51 @@
 <script>
-	import Counter from '$lib/Counter.svelte';
+    import Header from '$lib/header/Header.svelte'
 </script>
 
 <svelte:head>
-	<title>Home</title>
-	<meta name="description" content="Svelte demo app" />
+    <title>Home</title>
+    <meta name="description" content="Svelte demo app" />
 </svelte:head>
 
-<section>
-	<h1>
-		<span class="welcome">
-			<picture>
-				<source srcset="svelte-welcome.webp" type="image/webp" />
-				<img src="svelte-welcome.png" alt="Welcome" />
-			</picture>
-		</span>
-
-		to your new<br />SvelteKit app
-	</h1>
-
-	<h2>
-		try editing <strong>src/routes/+page.svelte</strong>
-	</h2>
-
-	<Counter />
-</section>
+<div class="main">
+    <section class="form"> <!-- Form component  --></section>
+    <section class="preview"> <!-- Preview component --></section>
+</div>
 
 <style>
-	section {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		flex: 1;
-	}
-
-	h1 {
-		width: 100%;
-	}
-
-	.welcome {
-		display: block;
-		position: relative;
-		width: 100%;
-		height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
-	}
-
-	.welcome img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		display: block;
-	}
+    .main {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-gap: 0.5rem;
+	min-height: calc(100vh - 4rem);
+    }
+    .form {
+	grid-column: 1/2;
+	background-color: rgb(230,240,240);
+    }
+
+    .preview {
+	grid-column: 2/3;
+	min-height: 200px;
+	background-color: rgb(240,238,240);
+    }
+    h1 {
+	width: 100%;
+    }
+
+    .welcome {
+	display: block;
+	position: relative;
+	width: 100%;
+	height: 0;
+	padding: 0 0 calc(100% * 495 / 2048) 0;
+    }
+
+    .welcome img {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	display: block;
+    }
 </style>