diff options
| author | Tor Andersson <tor@ccxvii.net> | 2023-10-13 19:59:06 +0200 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2023-10-13 22:41:09 +0200 |
| commit | 4c5d2e4afe02479dcfb770fa1d6cfccb499e4fff (patch) | |
| tree | 9206a2c5472c5c1480ad5c035b776a74d74a602f /views/index.pug | |
| parent | 5cdc7862b20c8642a235e8ea46686939e5f6032a (diff) | |
| download | server-4c5d2e4afe02479dcfb770fa1d6cfccb499e4fff.tar.gz | |
Clean up stylesheet and improve layout on small and large screens.
Use variables for color theming.
Diffstat (limited to 'views/index.pug')
| -rw-r--r-- | views/index.pug | 20 |
1 files changed, 8 insertions, 12 deletions
diff --git a/views/index.pug b/views/index.pug index 190018b..60da6ac 100644 --- a/views/index.pug +++ b/views/index.pug @@ -8,30 +8,26 @@ html title= SITE_NAME style. div.list { - display: flex; - flex-wrap: wrap; - gap: 12px; + margin: 24px 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); + gap: 24px 12px; } div.i { - width: 170px; height: 200px; text-align: center; margin-bottom: 6px; } div.t { text-align: center; - width: 170px; - } - div.t a:not(:hover) { - color: black; - text-decoration: none; } div.i img { - box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); + box-shadow: var(--drop-shadow); + border: var(--thin-border); } body include header - article + article.wide h1= SITE_NAME p #{SITE_NAME} is a website where you can play historic board games online. @@ -45,7 +41,7 @@ html div.i +gamecover(title.title_id) div.t - a(href="/"+title.title_id)= title.title_name + a.black(href="/"+title.title_id)= title.title_name p!= process.env.SITE_INVITE |