/tags/projects/ Recent content in Projects on The Tangiest Blog Hugo en-uk 2026 Andrew Tang All rights reserved Wed, 18 Apr 2018 12:00:00 +0100 /page/bookshelf/ Wed, 18 Apr 2018 12:00:00 +0100 /page/bookshelf/ <p>This page lists the books I&rsquo;m currently reading, and that I have read recently. If you would like to recommend a book for me to read, please use the <a href="page/contact-me">Contact form</a>. Thanks!</p> <style> .bookshelf { --bs-surface: #f6f7f8; --bs-text: #2b2b2b; --bs-muted: #6b7075; --bs-rule: #e4e6e8; --bs-accent: #2a6ebb; --bs-star: #d9902b; --bs-star-off: #d6d9dc; --bs-shadow: rgba(30, 35, 40, .28); margin: 40px 0; } .bookshelf .shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; margin: 0; padding: 0; list-style: none; } @media (max-width: 760px) { .bookshelf .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } } @media (max-width: 440px) { .bookshelf .shelf { grid-template-columns: 1fr; } } .bookshelf .book { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0; padding: 0; } .bookshelf .book::marker { content: ""; } .bookshelf .cover { position: relative; width: 100%; max-width: 220px; aspect-ratio: 2 / 3; background: var(--bs-surface); border-radius: 2px 5px 5px 2px; box-shadow: 0 1px 2px var(--bs-shadow), 0 14px 22px -12px var(--bs-shadow); overflow: hidden; margin-bottom: 20px; } .bookshelf .cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .14) 45%, rgba(0, 0, 0, 0) 100%); } .bookshelf .cover img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; } .bookshelf .cover.is-missing img { display: none; } .bookshelf .cover-fallback { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; padding: 20px 18px 20px 24px; gap: 6px; background: var(--bs-surface); border-left: 1px solid var(--bs-rule); text-align: left; } .bookshelf .cover.is-missing .cover-fallback { display: flex; } .bookshelf .cover-fallback strong { font-size: 1rem; line-height: 1.25; } .bookshelf .cover-fallback span { font-size: .85rem; color: var(--bs-muted); } .bookshelf .title { font-size: 1.05rem; line-height: 1.35; font-weight: 700; margin: 0 0 2px; } .bookshelf .author { margin: 0 0 10px; color: var(--bs-muted); font-size: .92rem; } .bookshelf .stars { display: inline-flex; gap: 2px; font-size: 1.15rem; line-height: 1; } .bookshelf .stars .on { color: var(--bs-star); } .bookshelf .stars .off { color: var(--bs-star-off); } .bookshelf .reading { display: inline-block; font-size: .85rem; color: var(--bs-accent); border: 1px solid currentColor; border-radius: 99px; padding: 1px 12px; } .bookshelf .sentinel { height: 1px; } .bookshelf .shelf-status { text-align: center; color: var(--bs-muted); font-size: .9rem; margin-top: 48px; min-height: 1.5em; } </style> <div class="bookshelf" id="bookshelf" data-cover-dir="/ covers/"> <ol class="shelf" aria-label="Books I've read"></ol> <div class="sentinel" aria-hidden="true"></div> <p class="shelf-status" role="status"></p>