From 2ef325d3dd5900d7681fce8f0ffc2450b493b363 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Mon, 14 Nov 2022 14:20:33 +0100
Subject: Tweak layout to allow for square cover images.

---
 public/style.css   |  1 -
 tools/gencovers.sh | 37 ++++++++++++++++++++++++++++++-------
 views/index.pug    | 15 +++++++++------
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/public/style.css b/public/style.css
index 68346bb..a28676f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -39,7 +39,6 @@ div.logo {
 	float: left;
 	margin: 0 20px 5px 0;
 	min-width: 150px;
-	height: 200px;
 }
 div.logo img {
 	box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.3);
diff --git a/tools/gencovers.sh b/tools/gencovers.sh
index a0ec53d..1ae2b90 100644
--- a/tools/gencovers.sh
+++ b/tools/gencovers.sh
@@ -1,18 +1,41 @@
-for F in public/*/cover.jpg
+for F in public/*/cover.jpg public/*/cover.png
 do
 	echo Processing: $F
-	B=$(echo $F | sed s/.jpg//)
+	B=$(echo $F | sed s/.jpg// | sed s/.png//)
 	D=$(dirname $F)
 
-	convert -resize 200x200 $F $B.1x.png
+	PORTRAIT=$(convert $F -format '%[fx:w<h]' info:)
+	SQUARE=$(convert $F -format '%[fx:w=h]' info:)
+
+	SIZE_1X=170x200
+	SIZE_2X=340x400
+	SIZE_TH=120x144
+
+	if test $PORTRAIT = 1
+	then
+		echo - portrait
+		SIZE_1X=150x200!
+		SIZE_2X=300x400!
+		SIZE_TH=108x144!
+	fi
+
+	if test $SQUARE = 1
+	then
+		echo - square
+		SIZE_1X=170x170!
+		SIZE_2X=170x170!
+		SIZE_TH=120x120!
+	fi
+
+	convert -colorspace RGB -resize $SIZE_1X -colorspace sRGB $F $B.1x.png
 	mozjpeg -q 95 -outfile $B.1x.jpg $B.1x.png
 	rm -f $B.1x.png
 
-	convert -resize 400x400 $F $B.2x.png
-	mozjpeg -q 90 -outfile $B.2x.jpg $B.2x.png
+	convert -colorspace RGB -resize $SIZE_2X $F -colorspace sRGB $B.2x.png
+	mozjpeg -q 95 -outfile $B.2x.jpg $B.2x.png
 	rm -f $B.2x.png
 
-	convert -resize 108x144! $F $D/thumbnail.png
-	mozjpeg -q 90 -outfile $D/thumbnail.jpg $D/thumbnail.png
+	convert -colorspace RGB -resize $SIZE_TH $F -colorspace sRGB $D/thumbnail.png
+	mozjpeg -q 95 -outfile $D/thumbnail.jpg $D/thumbnail.png
 	rm -f $D/thumbnail.png
 done
diff --git a/views/index.pug b/views/index.pug
index 2be79e9..7fe95e0 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -8,21 +8,24 @@ html
 		title= SITE_NAME
 		style.
 			div.list {
-				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(0, 160px));
-				gap: 16px;
+				display: flex;
+				flex-wrap: wrap;
+				gap: 8px 0;
 			}
 			div.item {
-				text-align: center;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				align-items: center;
 			}
 			div.item a:not(:hover) {
 				color: black;
 				text-decoration: none;
 			}
 			div.item img {
+				display: block;
 				box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
-				height: 200px;
-				margin: 5px auto;
+				margin: 6px 16px;
 			}
 	body
 		include header
-- 
cgit v1.2.3