From 1eed8c02e8256a066ec8fe8efc7d0d95f9942275 Mon Sep 17 00:00:00 2001
From: yeraydavidrodriguez <yeray.rodriguez@edataconsulting.de>
Date: Wed, 10 Nov 2021 14:37:22 +0000
Subject: [PATCH] Improve template

---
 src/App.svelte | 52 +++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index f60c55b..35ec27e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -8,11 +8,20 @@
 
 	<h2>Base Drawings</h2>
 	
-	<ul>
+	<div class="gallery">
+
 		{#each image_files as { id, filename }, i}
-		<li><a terget="_blank" href="./images/{filename}">{filename}</a></li>
+			{#if filename.endsWith(".jpg") }
+			<div class="item">
+				<a target="_blank" href="./images/{filename}">
+					<img src="./images/{filename}" alt="{filename}" />
+					<span>{filename}</span>
+				</a>
+			</div>
+			{/if}
 		{/each}
-	</ul>
+
+	</div>
 
 </main>
 
@@ -20,16 +29,49 @@
 	main {
 		text-align: left;
 		padding: 1em;
-		max-width: 240px;
 		margin: 0 auto;
 	}
 
+	.gallery {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.item {
+		margin: 15px;
+	}
+
+	.item a {
+		display: flex;	
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.item a img {
+		height: 180px;
+	}
+
+	.item a span {
+		color: black;
+		margin-top: 10px;
+		font-size: 0.9em;
+	}
+
 	h1 {
-		color: #ff3e00;
+		color: #909090;
 		font-size: 4em;
 		font-weight: 100;
+		margin-top: 0;
+		padding-top: 0;
+		padding-bottom: 8px;
+		margin-bottom: 8px;
 	}
 
+	h2 {
+		padding-top: 0;
+		margin-top: 0;
+	} 
+
 	@media (min-width: 640px) {
 		main {
 			max-width: none;