Establish the publication foundation

2026-07-14 11:54:31 +01:00
commit 006955bfc8
46 changed files with 7704 additions and 0 deletions
@@ -0,0 +1,43 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { site } from '../site.config';
+---
+
+<BaseLayout title="Book" description="Ana's book: argument, sample, and purchase information.">
+  <section class="shell book-page">
+    <div class="cover" aria-hidden="true">
+      {site.book.cover ? <img src={site.book.cover} alt="" /> : <span>THE<br />BOOK</span>}
+    </div>
+    <div>
+      <p class="eyebrow">The book</p>
+      <h1 class="display">{site.book.enabled ? site.book.title : 'The book belongs at the centre of the work.'}</h1>
+      <p class="lede">{site.book.enabled ? site.book.description : 'This surface is ready for the actual cover, title, argument, sample chapter, endorsements, and purchase route. Those details are intentionally not fabricated in the scaffold.'}</p>
+      {site.book.enabled && (
+        <div class="actions">
+          {site.book.sampleUrl && <a class="button" href={site.book.sampleUrl}>Read a sample</a>}
+          {site.book.buyUrl && <a class="button primary" href={site.book.buyUrl}>Buy the book</a>}
+        </div>
+      )}
+      <div class="book-anatomy">
+        <div><span>01</span><p>Why I wrote it</p></div>
+        <div><span>02</span><p>Read a real chapter</p></div>
+        <div><span>03</span><p>Choose a purchase route</p></div>
+      </div>
+    </div>
+  </section>
+</BaseLayout>
+
+<style>
+  .book-page { display: grid; grid-template-columns: minmax(250px, .65fr) 1.35fr; gap: clamp(3rem, 9vw, 9rem); align-items: center; padding: clamp(4rem, 9vw, 8rem) 0; }
+  .cover { display: grid; aspect-ratio: 3 / 4; place-items: center; border: 1px solid #7690ad; background: var(--blue); box-shadow: 22px 22px 0 #d8d1c4; color: var(--paper); font-family: 'Newsreader', Georgia, serif; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .85; text-align: center; }
+  .cover img { width: 100%; height: 100%; object-fit: cover; }
+  h1 { max-width: 13ch; }
+  .lede { max-width: 58ch; color: var(--muted); font-size: 1.1rem; }
+  .actions { display: flex; gap: .7rem; margin: 2rem 0; }
+  .book-anatomy { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; border-top: 1px solid var(--rule); }
+  .book-anatomy div { padding: 1rem; border-right: 1px solid var(--rule); }
+  .book-anatomy div:last-child { border-right: 0; }
+  .book-anatomy span { color: var(--amend); font-family: 'IBM Plex Mono', monospace; font-size: .68rem; }
+  .book-anatomy p { font-family: 'Newsreader', Georgia, serif; font-size: 1.15rem; }
+  @media (max-width: 750px) { .book-page { grid-template-columns: 1fr; } .cover { max-width: 320px; } .book-anatomy { grid-template-columns: 1fr; } .book-anatomy div { border-right: 0; border-bottom: 1px solid var(--rule); } }
+</style>