Compleet
ae1ae96d55
validate / validate (push) Failing after 7s
- Self-host Newsreader/Inter/IBM Plex Mono via fontsource (no external requests) - Open each story with its trust anatomy: pattern moved into the article header, expanded by default; review date flags itself when overdue - Homepage shows only what exists: podcast, book, and guide placeholders replaced by one honest roadmap note - Story-card diagram now drawn from the story's own trust pattern; the failure link encodes status (dashed developing, broken disputed, solid resolved) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
44 lines
2.7 KiB
Plaintext
44 lines
2.7 KiB
Plaintext
---
|
|
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 Variable', 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 Variable', 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>
|