diff --git a/static/styles.css b/static/styles.css index 8045dca..8e1c2a7 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,19 +1,12 @@ :root { color-scheme: light; - --bg: #f6f4ee; - --surface: #ffffff; - --surface-muted: #f0ece2; - --text: #1d1b16; - --muted: #6b6458; - --border: #d6cebf; - --shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } html, body { margin: 0; padding: 0; - background: var(--bg); - color: var(--text); + background: #fff; + color: #000; font-family: Arial, sans-serif; font-size: 18px; line-height: 1.45; @@ -24,9 +17,8 @@ img { } .header { - border-bottom: 1px solid var(--border); - background: var(--surface); - padding: 0.9rem 1rem; + border-bottom: 2px solid #000; + padding: 0.75rem 1rem; } .header h1 { @@ -41,13 +33,12 @@ img { .container { padding: 1rem; - max-width: 56rem; - margin: 0 auto; + max-width: 42rem; } h2 { margin-top: 0; - font-size: 1.4rem; + font-size: 1.25rem; } .page-head { @@ -55,8 +46,7 @@ h2 { } .page-subtitle { - margin: 0.35rem 0 0; - color: var(--muted); + margin: 0.25rem 0 0; font-size: 0.95rem; } @@ -64,112 +54,87 @@ h2 { list-style: none; margin: 0; padding: 0; - display: grid; - gap: 0.85rem; } .book-item { - margin: 0; + border: 1px solid #000; + margin-bottom: 0.6rem; + padding: 0.6rem; } .book-card { - display: grid; - grid-template-columns: 5.5rem 1fr; - gap: 0.9rem; - align-items: start; - border: 1px solid var(--border); - border-radius: 14px; - background: var(--surface); - padding: 0.8rem; + display: table; + width: 100%; color: inherit; text-decoration: none; - box-shadow: var(--shadow); } .book-card-cover, -.book-detail-cover { - display: flex; - align-items: flex-start; - justify-content: center; +.book-card-body { + display: table-cell; + vertical-align: top; +} + +.book-card-cover { + width: 4.8rem; + padding-right: 0.75rem; } .book-cover, .book-cover-placeholder { - width: 100%; - max-width: 5.5rem; - aspect-ratio: 2 / 3; - border-radius: 10px; - border: 1px solid var(--border); - background: var(--surface-muted); + display: block; + width: 4.2rem; + height: 6rem; + border: 1px solid #000; object-fit: cover; - overflow: hidden; } .book-cover-placeholder { - display: flex; - align-items: center; - justify-content: center; - color: var(--muted); - font-size: 0.85rem; + text-align: center; + line-height: 6rem; + font-size: 0.8rem; font-weight: bold; - letter-spacing: 0.08em; } .book-cover-detail, .book-cover-placeholder-detail { - max-width: 12rem; -} - -.book-card-body { - min-width: 0; + width: 8rem; + height: 11.5rem; + margin-bottom: 1rem; } .book-title { display: block; - font-size: 1.05rem; + min-height: 44px; + font-weight: bold; } .book-author, .book-author-detail { display: block; - color: var(--muted); + margin-top: 0.2rem; } -.book-author { +.format { + display: block; margin-top: 0.2rem; font-size: 0.95rem; } -.book-author-detail { - margin: -0.35rem 0 1rem; -} - -.format { - display: inline-block; - margin-top: 0.6rem; - padding: 0.15rem 0.5rem; - border: 1px solid var(--border); - border-radius: 999px; - font-size: 0.85rem; - text-transform: uppercase; - background: var(--surface-muted); -} - .book-detail { - display: grid; - gap: 1.25rem; + display: block; } -.book-detail-body { - min-width: 0; +.book-detail-cover { + margin-bottom: 1rem; } .book-meta { - margin: 0 0 1.25rem; + margin: 0 0 1rem; } .book-meta div { - margin-bottom: 0.8rem; + margin-bottom: 0.6rem; } .book-meta dt { @@ -177,38 +142,24 @@ h2 { } .book-meta dd { - margin: 0.2rem 0 0; - color: var(--muted); - word-break: break-word; + margin: 0.15rem 0 0; } .back-link { - color: var(--muted); - text-decoration: none; + color: inherit; } .btn { display: inline-block; min-height: 44px; padding: 0.7rem 1rem; - border: 1px solid var(--text); - border-radius: 999px; + border: 2px solid #000; text-decoration: none; - color: #fff; - background: var(--text); + color: #000; font-weight: bold; } code { - border: 1px solid var(--border); - border-radius: 6px; - background: var(--surface); + border: 1px solid #000; padding: 0.1rem 0.3rem; } - -@media (min-width: 700px) { - .book-detail { - grid-template-columns: 12rem 1fr; - align-items: start; - } -}