From 33c9e87286ccaf9dbf5bc89ed55381c7b03630b4 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sun, 5 Mar 2023 17:56:13 +0100
Subject: Tweak front page to reduce layout shifts as cover images load.

---
 views/index.pug | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

(limited to 'views/index.pug')

diff --git a/views/index.pug b/views/index.pug
index 7fe95e0..dffbe46 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -10,22 +10,23 @@ html
 			div.list {
 				display: flex;
 				flex-wrap: wrap;
-				gap: 8px 0;
+				gap: 12px;
 			}
-			div.item {
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-				align-items: center;
+			div.i {
+				width: 170px;
+				height: 200px;
+				text-align: center;
+				margin-bottom: 6px;
+			}
+			div.t {
+				text-align: center;
 			}
-			div.item a:not(:hover) {
+			div.t a:not(:hover) {
 				color: black;
 				text-decoration: none;
 			}
-			div.item img {
-				display: block;
+			div.i img {
 				box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
-				margin: 6px 16px;
 			}
 	body
 		include header
@@ -40,9 +41,9 @@ html
 				each title in titles
 					unless title.is_hidden
 						div.item
-							div
+							div.i
 								+gamecover(title.title_id)
-							div
+							div.t
 								a(href="/"+title.title_id)= title.title_name
 
 			p!= process.env.SITE_INVITE
-- 
cgit v1.2.3