separa la aplicación en dos mitades

.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 .vercel
 .output
+*.swp
+*/*.swp

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">
+    <h1>Cartelería DMD</h1>
-		<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>
 </header>
 
 <style>
     header {
-		display: flex;
+	max-height: 4rem;
-		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;
+	padding: 0.5rem;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		list-style: none;
-		background: var(--background);
-		background-size: contain;
     }
-
+    h1 {
-	li {
+	font-size: 2rem;
-		position: relative;
+	font-weight: 500;
-		height: 100%;
+	color: firebrick;
+	font-family: 'Gill Sans', sans-serif;
+	font-variant: small-caps;
     }
 
-	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;
-	}
-
-	a:hover {
-		color: var(--accent-color);
-	}
 </style>

src/routes/+layout.svelte

@@ -4,23 +4,18 @@
 </script>
 
 <Header />
-
 <main>
     <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;
+	padding: 0;
 	margin: 0 auto;
 	box-sizing: border-box;
     }

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Counter from '$lib/Counter.svelte';
+    import Header from '$lib/header/Header.svelte'
 </script>
 
 <svelte:head>
@@ -7,34 +7,28 @@
     <meta name="description" content="Svelte demo app" />
 </svelte:head>
 
-<section>
+<div class="main">
-	<h1>
+    <section class="form"> <!-- Form component  --></section>
-		<span class="welcome">
+    <section class="preview"> <!-- Preview component --></section>
-			<picture>
+</div>
-				<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>
 
 <style>
-	section {
+    .main {
-		display: flex;
+	display: grid;
-		flex-direction: column;
+	grid-template-columns: 1fr 1fr;
-		justify-content: center;
+	grid-gap: 0.5rem;
-		align-items: center;
+	min-height: calc(100vh - 4rem);
-		flex: 1;
+    }
+    .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%;
     }