Improve template

src/App.svelte

@@ -8,28 +8,70 @@
 
 	<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>
 
 <style>
 	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;