<title>Ben's Bookshelf</title>
<link rel="stylesheet" href="/styles/main.css" />
<style>
- .timeline {
+ .Timeline {
list-style-type: none;
- counter-reset: year 2023;
}
- .timeline > li::before {
- content: counter(year);
- counter-increment: year -1;
+ .Timeline > li::before {
+ content: attr(value);
display: block;
font-weight: bold;
font-size: 1.2em;
- padding-bottom: 1rem;
+ padding: 4rem 0 1rem 0;
}
- .timeline ul {
- padding-bottom: 2rem;
- list-style-type: disc;
+ .Bookshelf {
+ list-style-type: none;
+ width: 100%;
+ white-space: nowrap;
+ }
+
+ .Book {
+ overflow: hidden;
+ position: relative;
+ display: inline-block;
+ border-radius: 0.25rem / 0.75rem;
+ background-color: #501;
+ margin-right: 3px;
+ padding: 0;
+ }
+
+ .Book:nth-last-of-type(2n) {
+ background-color: #113800;
+ }
+
+ .Book:nth-last-of-type(3n) {
+ background-color: #105;
+ }
+
+ .Book:nth-last-of-type(5n) {
+ background-color: #610;
+ }
+
+ .Book-spine {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .Book::after {
+ content: '';
+ display: block;
+ position: absolute;
+ pointer-events: none;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ box-shadow: 2rem 0 2rem -2rem inset #fff5, 0 1rem 1rem -1rem inset #fff5,
+ -2rem 0 2rem -2rem inset #0005, 0 -1rem 1rem -1rem inset #0005;
+ }
+
+ .Book-title,
+ .Book-author {
+ writing-mode: vertical-rl;
+ color: #fffc;
+ font-variant: small-caps;
+ text-shadow: -1px -1px 1px #0003, 1px 1px 1px #fff3;
+ }
+
+ .Book-title {
+ min-height: 12rem;
+ max-height: 20rem;
+ width: fit-content;
+ line-height: 1em;
+ padding: 0 1.3rem;
+ white-space: normal;
+ }
+
+ .Book-author {
+ display: flex;
+ align-items: center;
+ padding: 1rem 0;
+ text-transform: lowercase;
+ }
+
+ .Book-bindingInset {
+ background-color: #0003;
+ box-shadow: 0 2px 2px -2px inset #0001, 0 1px 1px #fff1;
+ }
+
+ .Book-bindingSpacer {
+ height: 1rem;
+ }
+
+ .Book-bindingSpacer--expand {
+ min-height: 1rem;
+ flex: 1;
}
</style>
</head>
</header>
<hr />
<main>
- <ol class="timeline">
- <li>
- <ul>
- <li>1066 - David Howarth - 4/5</li>
- <li>How to Get to the Bottom - Roland Huntford - 4/5</li>
- <li>The Vision for You - David Clayton - 4/5</li>
- <li>Hrafenkel's Saga - Hermann Pálsson - 4/5</li>
- <li>Fundamentals of the Faith - Peter Kreeft - 4/5</li>
- <li>The Saga of Hervor and Heidrek - Jackson Crawford - 4/5</li>
- <li>The Poetic Edda - Jackson Crawford - 4/5</li>
- <li>The Great Polar Fraud - Anthony Galvin - 5/5</li>
- <li>The Saga of the Volsungs - Jackson Crawford - 4/5</li>
- <li>The Boys in the Boat - Daniel James Brown - 4/5</li>
- <li>The Ghost Map - Steven Johnson - 3/5</li>
- </ul>
- </li>
- <li>
- <ul>
- <li>Sea of Darkness - Roland Huntford - 4/5</li>
- <li>Gunnar's Daughter - Sigrid Undset - 4/5</li>
- <li>Two Planks and a Passion - Roland Huntford - 5/5</li>
- <li>Kristin Lavransdatter: The Cross - Sigrid Undset - 5/5</li>
- <li>
- Kristin Lavransdatter: The Mistress of Husaby - Sigrid Undset -
- 5/5
- </li>
- <li>
- Kristin Lavransdatter: The Bridal Wreath - Sigrid Undset - 5/5
- </li>
- <li>Children of Dune - Frank Herbert - 3/5</li>
- <li>Dune Messiah - Frank Herbert - 3/5</li>
- <li>Dune - Frank Herbert - 4/5</li>
- <li>Nansen - Roland Huntford - 5/5</li>
- <li>Into Thin Air - Jon Krakauer - 4/5</li>
- <li>Shackleton - Roland Huntford - 6/5</li>
- <li>Njal's Saga - 4/5</li>
- <li>The Last Place on Earth - Roland Huntford - 6/5</li>
- <li>Christus Vincit - Athanasius Schneider - 4/5</li>
- </ul>
- </li>
- </ol>
-
+ <ol class="Timeline" id="timeline"></ol>
<p>
Before 2021 I hadn't read much since middle school. As a kid I loved to
- read, but all ðe garbage I had to read in high school and college
- convinced me ðat reading was no fun. Fortunately I rediscovered how
- great a book can be in 2021 þanks to
+ read, but all the garbage I had to read in high school and college
+ convinced me that reading was no fun. Fortunately I rediscovered how
+ great a book can be in 2021 thanks to
<i>The Last Place on Earth</i>, and now I'm making up for lost time.
</p>
</main>
+
+ <script>
+ const timeline = {
+ 2021: [
+ {
+ title: 'Christus Vincit',
+ author: { name: 'Athanasius Schneider', abbr: 'Schneider' },
+ rating: 4,
+ },
+ {
+ title: 'The Last Place on Earth',
+ author: { name: 'Roland Huntford', abbr: 'Huntford' },
+ rating: 6,
+ },
+ {
+ title: "Njal's Saga ",
+ author: { name: 'Anonymous', abbr: '' },
+ rating: 4,
+ },
+ {
+ title: 'Shackleton',
+ author: { name: 'Roland Huntford', abbr: 'Huntford' },
+ rating: 6,
+ },
+ {
+ title: 'Into Thin Air',
+ author: { name: 'Jon Krakauer', abbr: 'Krakauer' },
+ rating: 4,
+ },
+ {
+ title: 'Nansen',
+ author: { name: 'Roland Huntford', abbr: 'Huntford' },
+ rating: 5,
+ },
+ {
+ title: 'Dune',
+ author: { name: 'Frank Herbert', abbr: 'Herbert' },
+ rating: 4,
+ },
+ {
+ title: 'Dune Messiah',
+ author: { name: 'Frank Herbert', abbr: 'Herbert' },
+ rating: 3,
+ },
+ {
+ title: 'Children of Dune',
+ author: { name: 'Frank Herbert', abbr: 'Herbert' },
+ rating: 3,
+ },
+ {
+ title: 'The Bridal Wreath',
+ series: 'Kristin Lavransdatter',
+ author: { name: 'Sigrid Undset', abbr: 'Undset' },
+ rating: 5,
+ },
+ {
+ title: 'The Mistress of Husaby',
+ series: 'Kristin Lavransdatter',
+ author: { name: 'Sigrid Undset', abbr: 'Undset' },
+ rating: 5,
+ },
+ {
+ title: 'The Cross',
+ series: 'Kristin Lavransdatter',
+ author: { name: 'Sigrid Undset', abbr: 'Undset' },
+ rating: 5,
+ },
+ {
+ title: 'Two Planks and a Passion',
+ author: { name: 'Roland Huntford', abbr: 'Huntford' },
+ rating: 5,
+ },
+ {
+ title: "Gunnar's Daughter",
+ author: { name: 'Sigrid Undset', abbr: 'Undset' },
+ rating: 4,
+ },
+ {
+ title: 'Sea of Darkness',
+ author: { name: 'Roland Huntford', abbr: 'Huntford' },
+ rating: 4,
+ },
+ ],
+ 2022: [
+ {
+ title: 'The Ghost Map',
+ author: { name: 'Steven Johnson', abbr: 'Johnson' },
+ rating: 3,
+ },
+ {
+ title: 'The Boys in the Boat',
+ author: { name: 'Daniel James Brown', abbr: 'Brown' },
+ rating: 4,
+ },
+ {
+ title: 'The Saga of the Volsungs',
+ author: { name: 'Jackson Crawford', abbr: 'Crawford' },
+ rating: 4,
+ },
+ {
+ title: 'The Great Polar Fraud',
+ author: { name: 'Anthony Galvin', abbr: 'Galvin' },
+ rating: 5,
+ },
+ {
+ title: 'The Poetic Edda',
+ author: { name: 'Jackson Crawford', abbr: 'Crawford' },
+ rating: 4,
+ },
+ {
+ title: 'Two Sagas of Mythical Heroes',
+ author: { name: 'Jackson Crawford', abbr: 'Crawford' },
+ rating: 4,
+ },
+ {
+ title: 'Fundamentals of the Faith',
+ author: { name: 'Peter Kreeft', abbr: 'Kreeft' },
+ rating: 4,
+ },
+ {
+ title: "Hrafenkel's Saga",
+ author: { name: 'Hermann Pálsson', abbr: 'Pálsson' },
+ rating: 4,
+ },
+ {
+ title: 'The Vision for You',
+ author: { name: 'David Clayton', abbr: 'Clayton' },
+ rating: 4,
+ },
+ {
+ title: 'How to Get to the Bottom',
+ author: { name: 'Roland Huntford', abbr: 'Huntford' },
+ rating: 4,
+ },
+ {
+ title: '1066',
+ author: { name: 'David Howarth', abbr: 'Howarth' },
+ rating: 4,
+ },
+ {
+ title: 'West with the Night',
+ author: { name: 'Beryl Markham', abbr: 'Markham' },
+ rating: 2,
+ },
+ {
+ title: 'We Die Alone',
+ author: { name: 'David Howarth', abbr: 'Howarth' },
+ rating: 5,
+ },
+ ],
+ };
+
+ document.querySelector('#timeline').innerHTML = Object.keys(timeline)
+ .map(
+ (year) =>
+ `<li value="${year}">
+ <ul class="Bookshelf">
+ ${timeline[year]
+ .map(
+ (book) =>
+ `<li class="Book">
+ <div class="Book-spine">
+ <div class="Book-bindingSpacer"></div>
+ <div class="Book-bindingSpacer Book-bindingInset"></div>
+ <div class="Book-bindingSpacer"></div>
+ <div class="Book-title">${book.title}</div>
+ <div class="Book-bindingSpacer--expand"></div>
+ <div class="Book-author Book-bindingInset">${book.author.abbr}</div>
+ <div class="Book-bindingSpacer"></div>
+ </div>
+ </li>`
+ )
+ .reverse()
+ .join('')}
+ </ul>
+ </li>`
+ )
+ .reverse()
+ .join('');
+ </script>
</body>
</html>
projects / xyz.git / commitdiff