From 769fef28b6260c9aeb3cc0eecf53a7501aecac44 Mon Sep 17 00:00:00 2001
From: ElnuDev <elnu@elnu.com>
Date: Mon, 19 Dec 2022 15:14:08 -0800
Subject: [PATCH] Improve image loading by keeping size

---
 themes/tegakituesday.com/layouts/partials/submission.html | 4 ++--
 themes/tegakituesday.com/static/css/style.css             | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/themes/tegakituesday.com/layouts/partials/submission.html b/themes/tegakituesday.com/layouts/partials/submission.html
index 6c0b5ce..a10bc7d 100644
--- a/themes/tegakituesday.com/layouts/partials/submission.html
+++ b/themes/tegakituesday.com/layouts/partials/submission.html
@@ -2,10 +2,10 @@
 	<figure>
 		{{ if .image }}
 			{{ $thumbnail := .image.Resize "500x" }}
-			<a href="{{ .image.RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" alt="{{ .submission.username }}'s submission"></a>
+			<a href="{{ .image.RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" style="aspect-ratio: {{ .image.Width }} / {{ .image.Height }}" title="{{ .submission.username }}'s submission"></a>
 			<figcaption><a href="https://discord.com/users/{{ .submission.id }}"><i class="fab fa-discord"></i> {{ .submission.username }}</a></figcaption>
 		{{ else }}
 			<figcaption>Image not found!</figcaption>
 		{{ end }}
 	</figure>
-</div>
\ No newline at end of file
+</div>
diff --git a/themes/tegakituesday.com/static/css/style.css b/themes/tegakituesday.com/static/css/style.css
index b2a18d4..c1976a1 100644
--- a/themes/tegakituesday.com/static/css/style.css
+++ b/themes/tegakituesday.com/static/css/style.css
@@ -497,6 +497,8 @@ figure {
 	margin-bottom: var(--gap);
 	overflow: hidden;
 	display: inline-block;
+	width: 100%;
+	box-sizing: border-box;
 }
 
 figcaption {