From 97f041de8cb593d46ccb15141d92e1984d9847d1 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Mon, 20 Jun 2022 09:50:19 +0200
Subject: Some more mobile friendly layout tuning.

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

(limited to 'views/index.pug')

diff --git a/views/index.pug b/views/index.pug
index 85cc130..1b9ef21 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -8,25 +8,21 @@ html
 		title= SITE_NAME
 		style.
 			div.list {
-				max-width: 800px;
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: left;
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(0, 160px));
+				gap: 16px;
 			}
-			div.list div {
-				min-width: 150px;
-				margin: 10px 15px;
+			div.item {
 				text-align: center;
 			}
-			div.list a:not(:hover) {
+			div.item a:not(:hover) {
 				color: black;
 				text-decoration: none;
 			}
-			div.list img {
+			div.item img {
 				box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
 				height: 200px;
 				margin: 5px auto;
-				display: block;
 			}
 	body
 		include header
@@ -41,8 +37,10 @@ html
 				each title in titles
 					unless title.is_hidden
 						- let cover = "/" + title.title_id + "/cover"
-						div
-							+gamecover(title.title_id)
-							| #{title.title_name}
+						div.item
+							div
+								+gamecover(title.title_id)
+							div
+								a(href="/"+title.title_id)= title.title_name
 
 			p!= process.env.SITE_INVITE
-- 
cgit v1.2.3