diff options
| author | Tor Andersson <tor@ccxvii.net> | 2021-12-04 18:55:49 +0100 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2021-12-04 18:57:24 +0100 |
| commit | 1b9565fa2eeb2635f2233161f920963bf514b524 (patch) | |
| tree | 63b1623f9575c8453d5348a9d9eeaa54e34e472d | |
| parent | 07c8263929fb5b46082d5c3b20a11edfb59a2b25 (diff) | |
| download | server-1b9565fa2eeb2635f2233161f920963bf514b524.tar.gz | |
Use img srcset for cover images of differing resolutions.
| -rw-r--r-- | .gitignore | 6 | ||||
| -rw-r--r-- | public/style.css | 3 | ||||
| -rw-r--r-- | tools/gencovers.sh | 13 | ||||
| -rw-r--r-- | views/create.pug | 3 | ||||
| -rw-r--r-- | views/head.pug | 4 | ||||
| -rw-r--r-- | views/index.pug | 6 | ||||
| -rw-r--r-- | views/info.pug | 2 | ||||
| -rw-r--r-- | views/join.pug | 3 |
8 files changed, 29 insertions, 11 deletions
@@ -3,9 +3,9 @@ node_modules db db-wal db-shm -sessions -sessions-wal -sessions-shm +login +login-wal +login-shm log .env *.pem diff --git a/public/style.css b/public/style.css index cfeacd6..c28939d 100644 --- a/public/style.css +++ b/public/style.css @@ -43,9 +43,8 @@ div.logo { min-width: 150px; height: 200px; } -img.logo { +div.logo img { box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); - height: 100%; } table { diff --git a/tools/gencovers.sh b/tools/gencovers.sh new file mode 100644 index 0000000..911a050 --- /dev/null +++ b/tools/gencovers.sh @@ -0,0 +1,13 @@ +for F in public/*/cover.jpg +do + echo Processing: $F + B=$(echo $F | sed s/.jpg//) + + convert -scale 200x200 $F $B.1x.png + mozjpeg -q 95 -outfile $B.1x.jpg $B.1x.png + rm -f $B.1x.png + + convert -scale 400x400 $F $B.2x.png + mozjpeg -q 90 -outfile $B.2x.jpg $B.2x.png + rm -f $B.2x.png +done diff --git a/views/create.pug b/views/create.pug index 7aa53f3..84f950a 100644 --- a/views/create.pug +++ b/views/create.pug @@ -11,7 +11,8 @@ html article h1= title.title_name - a(href="/info/"+title.title_id): img.logo(src="/"+title.title_id+"/cover.jpg") + div.logo + +gamecover(title.title_id) form(method="post" action="/create/"+title.title_id) if scenarios.length > 1 diff --git a/views/head.pug b/views/head.pug index 294a911..d5350ac 100644 --- a/views/head.pug +++ b/views/head.pug @@ -12,6 +12,10 @@ link(rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/SourceSa //- link(rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Dingbats.woff2") //- link(rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/NotoEmoji.woff2") +mixin gamecover(title_id) + a(href="/info/"+title_id) + img(src=`/${title_id}/cover.1x.jpg` srcset=`/${title_id}/cover.2x.jpg 2x`) + mixin forumpost(row,show_buttons) .post .head diff --git a/views/index.pug b/views/index.pug index ba915b0..0a2262b 100644 --- a/views/index.pug +++ b/views/index.pug @@ -38,10 +38,10 @@ html div.list each title in titles unless title.is_hidden + - let cover = "/" + title.title_id + "/cover" div - a(href="/info/"+title.title_id) - img(src="/"+title.title_id+"/cover.jpg") - | #{title.title_name} + +gamecover(title.title_id) + | #{title.title_name} p: a(href="/games") List of all open and active games. diff --git a/views/info.pug b/views/info.pug index f73e6ef..b579f64 100644 --- a/views/info.pug +++ b/views/info.pug @@ -12,7 +12,7 @@ html h1= title.title_name div.logo - img.logo(src="/"+title.title_id+"/cover.jpg") + +gamecover(title.title_id) | !{ about_html } diff --git a/views/join.pug b/views/join.pug index 101afdf..ff15624 100644 --- a/views/join.pug +++ b/views/join.pug @@ -22,7 +22,8 @@ html article h1= game.title_name - a(href="/info/"+game.title_id): img.logo(src="/"+game.title_id+"/cover.jpg") + div.logo + +gamecover(game.title_id) p if game.is_private |