npi

src/routes/+page.svelte

@@ -1,84 +1,84 @@
 <script>
-  import { templates } from "$lib/templates/templates";
+	import { templates } from "$lib/templates/templates";
 </script>
 
 <svelte:head>
-  <title>Carteles DMD</title>
+	<title>Carteles DMD</title>
-  <meta
+	<meta
-    name="description"
+		name="description"
-    content="Aplicación para la generación automática de carteles de actividades de DMD"
+		content="Aplicación para la generación automática de carteles de actividades de DMD"
-  />
+	/>
 </svelte:head>
 <section>
-  <p>Elige plantilla</p>
+	<p>Elige plantilla</p>
-  <div class="main">
+	<div class="main">
-    {#each templates as template}
+		{#each templates as template}
-      <div class="element">
+			<div class="element">
-        <a href="/{template.name}" data-sveltekit-prefetch
+				<a data-sveltekit-preload-data href="/{template.name}"
-          ><img
+					><img
-            src="/{template.image}"
+						src="/{template.image}"
-            alt="Plantilla en blanco estilo {template.name}"
+						alt="Plantilla en blanco estilo {template.name}"
-          />
+					/>
-          {#if template.description}
+					{#if template.description}
-            <div class="caption">{@html template.description}</div>
+						<div class="caption">{@html template.description}</div>
-          {:else}
+					{:else}
-            <div class="caption">{template.name}</div>
+						<div class="caption">{template.name}</div>
-          {/if}
+					{/if}
-        </a>
+				</a>
-      </div>
+			</div>
-    {/each}
+		{/each}
-  </div>
+	</div>
 </section>
 
 <style>
-  section {
+	section {
-    max-width: 800px;
+		max-width: 800px;
-    margin: 0 auto;
+		margin: 0 auto;
-    display: grid;
+		display: grid;
-    min-height: 90vh;
+		min-height: 90vh;
-  }
+	}
 
-  .main {
+	.main {
-    display: grid;
+		display: grid;
-    grid-template-columns: repeat(4, min-content);
+		grid-template-columns: repeat(4, min-content);
-    /* grid-auto-rows: 1fr; */
+		/* grid-auto-rows: 1fr; */
-    grid-gap: 1rem;
+		grid-gap: 1rem;
-    padding: 1rem 0;
+		padding: 1rem 0;
-  }
+	}
-  p {
+	p {
-    font-size: 1.5rem;
+		font-size: 1.5rem;
-    color: #333;
+		color: #333;
-  }
+	}
-  .element {
+	.element {
-    line-height: 2rem;
+		line-height: 2rem;
-    display: inline-block;
+		display: inline-block;
-    padding: 0.25rem;
+		padding: 0.25rem;
-    background-color: rebeccapurple;
+		background-color: rebeccapurple;
-    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.7);
+		box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.7);
-    margin: 0 0.5rem;
+		margin: 0 0.5rem;
-    border-radius: 0.5rem;
+		border-radius: 0.5rem;
-    align-self: center;
+		align-self: center;
-  }
+	}
-  a {
+	a {
-    text-transform: capitalize;
+		text-transform: capitalize;
-    cursor: pointer;
+		cursor: pointer;
-    color: white;
+		color: white;
-    text-decoration: none;
+		text-decoration: none;
-    text-align: center;
+		text-align: center;
-    font-weight: 400;
+		font-weight: 400;
-    font-size: 1.4rem;
+		font-size: 1.4rem;
-  }
+	}
-  img {
+	img {
-    max-height: 200px;
+		max-height: 200px;
-    border-radius: 0.25rem 0.25rem 0 0;
+		border-radius: 0.25rem 0.25rem 0 0;
-  }
+	}
-  .caption {
+	.caption {
-    text-align: left;
+		text-align: left;
-    padding: 0.25rem;
+		padding: 0.25rem;
-  }
+	}
-  @media (max-width: 768px) {
+	@media (max-width: 768px) {
-    .main {
+		.main {
-      grid-template-columns: repeat(2, min-content);
+			grid-template-columns: repeat(2, min-content);
-    }
+		}
-  }
+	}
 </style>