diff options
| -rw-r--r-- | public/style.css | 1 | ||||
| -rw-r--r-- | tools/gencovers.sh | 37 | ||||
| -rw-r--r-- | 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 |