feat: add basic book layout

src/_includes/css/spacing.njk

@@ -4,6 +4,14 @@
         gap: {{ value }}px;
     }
 
+    .row-gap-{{ key }} {
+        row-gap: {{ value }}px;
+    }
+
+    .column-gap-{{ key }} {
+        column-gap: {{ value }}px;
+    }
+
     .p-{{ key }} {
         padding: {{ value }}px;
     }
@@ -72,6 +80,10 @@
         width: {{ value }}px;
         height: {{ value }}px;
     }
+
+    .radius-{{ key }} {
+        border-radius: {{ value }}px;
+    }
 {% endfor %}
 
 :root {

src/_layouts/book.html

@@ -0,0 +1,37 @@
+---
+layout: base
+---
+
+<article class="[ catalogue ] [ flow ]">
+    <time class="[ date ] [ flex items-center gap-0.5 my-1 ]"
+          datetime="{{ date }}">
+        {% include "svgs/calendar.svg" %}
+    {{ date | formatDate("MMMM Do YYYY") }}</time>
+    <section class="[ meta ] [ flex justify-between mb-1 gap-1 ]">
+        <div>
+            <h1>{{ title }}</h1>
+            {% if subtitle %}<h2 class="[ text-fadeText my-1 ]">{{ subtitle }}</h2>{% endif %}
+            <hr />
+            <div class="[ catalogue-meta ] [ column-gap-1 row-gap-0.5 ]">
+                <div>
+                    <strong>Author</strong>
+                </div>
+                <div>{{ author }}</div>
+                <div>
+                    <strong>ISBN</strong>
+                </div>
+                <div>{{ isbn }}</div>
+            </div>
+            <hr />
+            <ul class="[ flex list-none p-0 gap-0.5 ]">
+                {% for tag in tags | filter(["catalogue", "book"]) %}
+                    <li class="[ bg-surface radius-1 px-1 py-0.5 ]">{{ tag }}</li>
+                {% endfor %}
+            </ul>
+        </div>
+        {% if image %}
+            <div>{% image image, "", "" %}</div>
+        {% endif %}
+    </section>
+    {{ content | safe }}
+</article>

src/_layouts/catalogue.html

@@ -6,7 +6,7 @@ layout: base
     <section class="[ meta ] [ flex justify-between mb-1 ]">
         <div>
             <h1>{{ title }}</h1>
-            <h2>{{ subtitle }}</h2>
+            <h2 class="[ text-fadeText ]">{{ subtitle }}</h2>
         </div>
         {% if image %}
             <div>{% image image, "", "" %}</div>

src/assets/css/blocks/catalogue.css

@@ -1,4 +1,4 @@
-.catalogue .meta img {
+.catalogue .meta picture {
   inline-size: 10rem;
 }
 
@@ -6,3 +6,9 @@
   font-size: 0.8rem;
   border-radius: 0.5rem;
 }
+
+.catalogue-meta {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  font-size: 0.875rem;
+}

src/content/catalogue/books/books.json

@@ -1,5 +1,5 @@
 {
-  "layout": "catalogue",
+  "layout": "book",
   "tags": "book",
   "permalink": "catalogue/books/{{ page.fileSlug }}/index.html"
 }