feat: dedicated books page

src/assets/styles/base/index.css

@@ -251,6 +251,7 @@ nav ul li .active svg:hover {
 .brain svg { stroke: var(--brand-listenbrainz) !important; }
 .device-tv svg { stroke: var(--brand-trakt) !important; }
 .news svg { stroke: var(--brand-instapaper) !important; }
+.books svg { stroke: var(--brand-books) !important; }
 .coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
 .heart-handshake svg { stroke: var(--webrings) !important; }
 .rss svg { stroke: var(--brand-rss) !important; }

src/assets/styles/defaults/vars.css

@@ -49,6 +49,7 @@
   --brand-listenbrainz: #e97941;
   --brand-trakt: #ed1c24;
   --brand-instapaper: var(--text-color);
+  --brand-books: #12c28e;
   --brand-buy-me-a-coffee: #40dca5;
   --brand-rss: #f26522;
   --webrings: #ec8fd0;

src/assets/styles/index.css

@@ -17,6 +17,7 @@
 /* page styles */
 @import url('./pages/404.css') layer(page);
 @import url('./pages/about.css') layer(page);
+@import url('./pages/books.css') layer(page);
 @import url('./pages/blogroll.css') layer(page);
 @import url('./pages/contact.css') layer(page);
 @import url('./pages/now.css') layer(page);

src/assets/styles/pages/books.css

@@ -0,0 +1,70 @@
+.book-entry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sizing-sm);
+  align-items: center;
+
+  &:last-of-type {
+    border-bottom: 0;
+  }
+
+  & img {
+    border: 1px solid var(--accent-color);
+    border-radius: var(--rounded);
+  }
+
+  & img,
+  & picture {
+    max-width: calc(var(--sizing-3xl) * 4);
+    height: auto;
+  }
+
+  & .book-meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sizing-xs);
+    align-items: center;
+
+    & p {
+      margin: 0;
+      overflow: hidden;
+      max-width: 100%;
+      text-overflow: ellipsis;
+      width: fit-content;
+      margin-bottom: 0;
+
+      &.title {
+        font-size: var(--font-size-xl);
+      }
+
+      &.author-categories {
+        font-size: var(--font-size-xs);
+        line-height: var(--line-height-xs);
+      }
+    }
+
+    & blockquote.description {
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      overflow: hidden;
+      margin-bottom: var(--sizing-base);
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .book-entry {
+    flex-direction: row;
+    gap: var(--sizing-base);
+    align-items: start;
+
+    & picture {
+      margin-bottom: var(--sizing-md);
+    }
+
+    & .book-meta {
+      align-items: start;
+    }
+  }
+}