diff options
| -rw-r--r-- | public/style.css | 4 | ||||
| -rw-r--r-- | tools/gencovers.sh | 15 | ||||
| -rw-r--r-- | views/index.pug | 42 |
3 files changed, 32 insertions, 29 deletions
diff --git a/public/style.css b/public/style.css index 4810988..55f0bd0 100644 --- a/public/style.css +++ b/public/style.css @@ -350,6 +350,10 @@ div.body img { border: var(--thin-border); } +.game_main img.square { max-width: 60px; max-height: 60px; } +.game_main img.wide { max-width: 72px; max-height: 60px; } +.game_main img.tall { max-width: 60px; max-height: 72px; } + .game_item .game_head { background-color: gainsboro } .game_item .game_main { background-color: whitesmoke } diff --git a/tools/gencovers.sh b/tools/gencovers.sh index 5d4d244..454d69b 100644 --- a/tools/gencovers.sh +++ b/tools/gencovers.sh @@ -4,7 +4,7 @@ do B=$(echo $F | sed s/.jpg// | sed s/.png//) D=$(dirname $F) - if [ $F -nt $D/thumbnail.jpg ] + if [ $F -nt $D/thumbnail.png ] then PORTRAIT=$(convert $F -format '%[fx:w<h]' info:) @@ -30,17 +30,14 @@ do SIZE_TH=120x120! fi + convert -colorspace RGB -resize $SIZE_TH $F -colorspace sRGB $D/thumbnail.png convert -colorspace RGB -resize $SIZE_1X -colorspace sRGB $F $B.1x.png - pngtopnm $B.1x.png | cjpeg -progressive -optimize -sample 1x1 -quality 95 > $B.1x.jpg - rm -f $B.1x.png - convert -colorspace RGB -resize $SIZE_2X $F -colorspace sRGB $B.2x.png - pngtopnm $B.2x.png | cjpeg -progressive -optimize -sample 1x1 -quality 95 > $B.2x.jpg - rm -f $B.2x.png - convert -colorspace RGB -resize $SIZE_TH $F -colorspace sRGB $D/thumbnail.png + fi + pngtopnm $D/thumbnail.png | cjpeg -progressive -optimize -sample 1x1 -quality 95 > $D/thumbnail.jpg - rm -f $D/thumbnail.png + pngtopnm $B.1x.png | cjpeg -progressive -optimize -sample 1x1 -quality 95 > $B.1x.jpg + pngtopnm $B.2x.png | cjpeg -progressive -optimize -sample 1x1 -quality 95 > $B.2x.jpg - fi done diff --git a/views/index.pug b/views/index.pug index f3a9a86..c50ace1 100644 --- a/views/index.pug +++ b/views/index.pug @@ -7,25 +7,29 @@ html meta(name="keywords" content="wargames, war games, block games") title= SITE_NAME style. - div.list { - margin: 24px 0; + .list { display: grid; - grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); - gap: 24px 12px; + grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); + grid-auto-rows: 190px; + gap: 8px; } - div.i { - height: 200px; - text-align: center; - margin-bottom: 6px; - } - div.t { + .list a { + display: grid; + grid-template-rows: 146px 40px; text-align: center; + font-family: var(--font-small); + font-size: 14px; + line-height: 20px; + text-wrap: balance; + gap: 4px; } - div.i img { - min-width: 150px; - min-height: 150px; - max-width: 200px; - max-height: 200px; + .list img { + display: block; + margin: auto auto; + min-width: 108px; + min-height: 108px; + max-width: 144px; + max-height: 144px; background-color: silver; box-shadow: var(--drop-shadow); border: var(--thin-border); @@ -38,11 +42,9 @@ html div.list each title in TITLE_LIST unless title.is_hidden - div.item - div.i - +gamecover(title.title_id) - div.t - a.black(href="/"+title.title_id)= title.title_name + a.black(href="/"+title.title_id) + img(src="/"+title.title_id+"/thumbnail.jpg") + div= title.title_name p!= process.env.SITE_INVITE |