diff --git a/static/styles.css b/static/styles.css index 5a6e088..26fe15c 100644 --- a/static/styles.css +++ b/static/styles.css @@ -75,59 +75,74 @@ h2 { list-style: none; margin: 0; padding: 0; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.75rem; } .book-item { border: 1px solid #000; - margin-bottom: 0.6rem; - padding: 0.6rem; + padding: 0.5rem; } .book-card { - display: table; - width: 100%; + display: block; color: inherit; text-decoration: none; } -.book-card-cover, -.book-card-body { - display: table-cell; - vertical-align: top; +.book-card-cover { + display: block; + margin-bottom: 0.5rem; } -.book-card-cover { - width: 4.8rem; - padding-right: 0.75rem; +.book-card-body { + display: block; +} + +.book-detail-cover { + display: block; +} + +.book-card-cover, +.book-detail-cover { + text-align: center; } .book-cover, .book-cover-placeholder { - display: block; - width: 4.2rem; - height: 6rem; + display: inline-block; + width: 100%; + max-width: 100%; + aspect-ratio: 2 / 3; border: 1px solid #000; object-fit: cover; + vertical-align: top; } .book-cover-placeholder { text-align: center; - line-height: 6rem; - font-size: 0.8rem; + font-size: 0.75rem; font-weight: bold; + line-height: 1.2; + padding-top: 2.3rem; + box-sizing: border-box; } .book-cover-detail, .book-cover-placeholder-detail { width: 8rem; height: 11.5rem; + max-width: none; margin-bottom: 1rem; } .book-title { display: block; - min-height: 44px; font-weight: bold; + font-size: 0.95rem; + line-height: 1.25; + margin-bottom: 0.25rem; } .book-author, @@ -136,10 +151,15 @@ h2 { margin-top: 0.2rem; } +.book-author { + font-size: 0.85rem; + line-height: 1.25; +} + .format { display: block; margin-top: 0.2rem; - font-size: 0.95rem; + font-size: 0.85rem; } .book-detail {