feat: enhanced build system — self-contained HTML web reader, deploy version, reportlab PDF with QR codes

- web-style.css: dark/light mode, responsive, EB Garamond typography
- HTML build: self-contained (embedded CSS) + deploy version (external CSS)
- Reading progress bar and back-to-top button injected via JS
- Reader footer with author credit and 988 crisis line
- All outputs consolidated in build/output/
- EPUB: 68KB, PDF: 143KB (reportlab), HTML: 3.7MB (self-contained)

build/build.py

@@ -417,26 +417,92 @@ def _compile_pdf_reportlab():
 
 
 def compile_html():
-    """Generate a standalone HTML book for the web reader."""
+    """Generate a standalone HTML book for the web reader.
+
+    Produces two versions:
+      - testament.html (embedded, self-contained — single file for offline/sharing)
+      - build/output/the-testament.html (with external web-style.css for serving)
+    """
     OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
     OUT_HTML = REPO / "testament.html"
+    OUT_HTML_DEPLOY = OUTPUT_DIR / "the-testament.html"
+    WEB_CSS = REPO / "web-style.css"
 
-    cmd = [
+    # Choose CSS: web-style.css if available, else book-style.css
+    css_file = WEB_CSS if WEB_CSS.exists() else STYLESHEET
+    css_name = css_file.name
+
+    # 1. Self-contained version (embed all resources)
+    cmd_embedded = [
         "pandoc", str(OUT_MD),
         "-o", str(OUT_HTML),
         "--standalone",
+        "--embed-resources",
         "--toc", "--toc-depth=2",
-        "--css", "book-style.css",
+        "--css", css_name,
         "--metadata", "title=The Testament",
         "--variable", "pagetitle=The Testament",
     ]
     if METADATA.exists():
-        cmd.extend(["--metadata-file", str(METADATA)])
+        cmd_embedded.extend(["--metadata-file", str(METADATA)])
 
-    r = subprocess.run(cmd, capture_output=True, text=True)
+    # Inject reading progress bar JS before </head>
+    reading_js = """
+<style>
+.progress-bar { position:fixed; top:0; left:0; height:2px; background:#00cc6a; z-index:100; transition:width 0.1s; }
+.back-to-top { position:fixed; bottom:2em; right:2em; width:2.5em; height:2.5em; border-radius:50%; background:#e0ddd8; color:#1a1a1a; display:flex; align-items:center; justify-content:center; font-size:1.2rem; opacity:0; transition:opacity 0.3s; border:none; cursor:pointer; text-decoration:none; }
+.back-to-top.visible { opacity:0.7; }
+@media (prefers-color-scheme: dark) { .back-to-top { background:#2a2a2a; color:#d4d0c8; } }
+</style>
+<div class="progress-bar" id="progress"></div>
+<a href="#" class="back-to-top" id="top" title="Back to top">↑</a>
+<script>
+window.onscroll=function(){var p=document.getElementById('progress'),t=document.getElementById('top'),s=document.documentElement.scrollTop,h=document.documentElement.scrollHeight-document.documentElement.clientHeight;p.style.width=(s/h*100)+'%';t.className=s>300?'back-to-top visible':'back-to-top';};
+</script>
+"""
+    # Post-processing handles JS injection (no pandoc flag needed)
+
+    r = subprocess.run(cmd_embedded, capture_output=True, text=True)
     if r.returncode == 0:
+        # Post-process: inject reading JS before </head>
+        html_text = OUT_HTML.read_text()
+        html_text = html_text.replace("</head>", reading_js + "\n</head>")
+        # Inject footer before </body>
+        footer_html = """
+<div class="reader-footer">
+  <p><em>The Testament</em> by Alexander Whitestone with Timmy</p>
+  <p>© 2026 Alexander Whitestone · <a href="https://timmyfoundation.org">timmyfoundation.org</a></p>
+  <p>If you or someone you know is in crisis, call or text <strong>988</strong>.</p>
+</div>
+"""
+        html_text = html_text.replace("</body>", footer_html + "\n</body>")
+        OUT_HTML.write_text(html_text)
+
         size = OUT_HTML.stat().st_size
-        print(f"  HTML:     {OUT_HTML.name}  ({size:,} bytes, {size/1024:.0f} KB)")
+        print(f"  HTML:     {OUT_HTML.name}  ({size:,} bytes, {size/1024:.0f} KB) [self-contained]")
+
+        # 2. Deploy version (external CSS — for web serving)
+        cmd_deploy = [
+            "pandoc", str(OUT_MD),
+            "-o", str(OUT_HTML_DEPLOY),
+            "--standalone",
+            "--toc", "--toc-depth=2",
+            "--css", css_name,
+            "--metadata", "title=The Testament",
+            "--variable", "pagetitle=The Testament",
+        ]
+        if METADATA.exists():
+            cmd_deploy.extend(["--metadata-file", str(METADATA)])
+        r2 = subprocess.run(cmd_deploy, capture_output=True, text=True)
+        if r2.returncode == 0:
+            # Post-process deploy version too
+            html_deploy = OUT_HTML_DEPLOY.read_text()
+            html_deploy = html_deploy.replace("</head>", reading_js + "\n</head>")
+            html_deploy = html_deploy.replace("</body>", footer_html + "\n</body>")
+            OUT_HTML_DEPLOY.write_text(html_deploy)
+            size2 = OUT_HTML_DEPLOY.stat().st_size
+            print(f"  HTML:     {OUT_HTML_DEPLOY.name}  ({size2:,} bytes, {size2/1024:.0f} KB) [deploy]")
+
         return True
     else:
         print(f"  HTML FAILED: {r.stderr[:200]}")
@@ -476,7 +542,8 @@ def main():
     print("=" * 50)
 
     OUT_HTML = REPO / "testament.html"
-    for f in [OUT_MD, OUT_EPUB, OUT_PDF, OUT_HTML]:
+    OUT_HTML_DEPLOY = OUTPUT_DIR / "the-testament.html"
+    for f in [OUT_MD, OUT_EPUB, OUT_PDF, OUT_HTML, OUT_HTML_DEPLOY]:
         if f.exists():
             print(f"  ✓ {f.relative_to(REPO)}")
 

web-style.css

@@ -0,0 +1,288 @@
+/* THE TESTAMENT — Web Reader Stylesheet */
+/* Clean, immersive reading experience for the web version */
+
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@300;400&display=swap');
+
+:root {
+  --green: #00cc6a;
+  --green-dim: #00994d;
+  --dark: #0a0a0a;
+  --bg: #faf8f5;
+  --text: #1a1a1a;
+  --dim: #666666;
+  --border: #e0ddd8;
+  --accent: #16213e;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111111;
+    --text: #d4d0c8;
+    --dim: #888888;
+    --border: #2a2a2a;
+    --accent: #c8c0b0;
+    --dark: #e8e4dc;
+  }
+}
+
+/* Base */
+* { box-sizing: border-box; }
+
+html {
+  font-size: 18px;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
+  font-size: 1rem;
+  line-height: 1.8;
+  color: var(--text);
+  background: var(--bg);
+  max-width: 38em;
+  margin: 0 auto;
+  padding: 2em 1.5em 6em;
+  text-align: justify;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+}
+
+/* Title block */
+header {
+  text-align: center;
+  margin: 4em 0 3em;
+  padding-bottom: 2em;
+  border-bottom: 1px solid var(--border);
+}
+
+header h1 {
+  font-size: 2.4rem;
+  font-weight: 400;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  margin-bottom: 0.2em;
+  color: var(--dark);
+}
+
+header .subtitle {
+  font-style: italic;
+  font-size: 1.1rem;
+  color: var(--dim);
+  margin-bottom: 2em;
+}
+
+header .author {
+  font-size: 1rem;
+  margin-bottom: 0.3em;
+}
+
+header .date {
+  font-size: 0.9rem;
+  color: var(--dim);
+}
+
+/* Table of contents */
+nav#TOC {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1.5em 2em;
+  margin: 2em 0 3em;
+  font-size: 0.9rem;
+  line-height: 2;
+}
+
+nav#TOC > ul {
+  padding-left: 0;
+  list-style: none;
+}
+
+nav#TOC ul ul {
+  padding-left: 1.5em;
+  list-style: none;
+}
+
+nav#TOC a {
+  color: var(--green-dim);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.2s;
+}
+
+nav#TOC a:hover {
+  border-bottom-color: var(--green);
+}
+
+/* Headings */
+h1 {
+  font-family: 'EB Garamond', Georgia, serif;
+  font-weight: 400;
+  font-size: 1.8rem;
+  text-align: center;
+  margin-top: 4em;
+  margin-bottom: 1.5em;
+  color: var(--dark);
+  letter-spacing: 0.05em;
+}
+
+h1:first-of-type {
+  margin-top: 2em;
+}
+
+h2 {
+  font-family: 'EB Garamond', Georgia, serif;
+  font-weight: 400;
+  font-size: 1.4rem;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  margin-top: 4em;
+  margin-bottom: 0.8em;
+  color: var(--dark);
+}
+
+h3 {
+  font-weight: 400;
+  font-style: italic;
+  font-size: 1rem;
+  text-align: center;
+  color: var(--dim);
+  margin-bottom: 2em;
+}
+
+/* Paragraphs */
+p {
+  text-indent: 1.5em;
+  margin: 0 0 0.3em;
+}
+
+h1 + p, h2 + p, h3 + p, hr + p, blockquote + p {
+  text-indent: 0;
+}
+
+/* Scene breaks */
+hr {
+  border: none;
+  text-align: center;
+  margin: 2.5em 0;
+}
+
+hr::after {
+  content: "· · ·";
+  color: var(--dim);
+  font-size: 1.2rem;
+  letter-spacing: 0.5em;
+}
+
+/* Emphasis */
+em { font-style: italic; }
+strong { font-weight: 600; }
+
+/* Machine dialogue (green monospace) */
+.green, code {
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  font-weight: 300;
+  font-size: 0.88rem;
+  color: var(--green-dim);
+}
+
+/* Narrator asides */
+blockquote {
+  font-style: italic;
+  margin: 1.5em 2em;
+  color: var(--dim);
+  text-indent: 0;
+  border-left: none;
+  padding-left: 0;
+}
+
+/* Links */
+a {
+  color: var(--green-dim);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.2s;
+}
+
+a:hover {
+  border-bottom-color: var(--green);
+}
+
+/* Smooth scroll progress indicator */
+.progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 2px;
+  background: var(--green);
+  z-index: 100;
+  transition: width 0.1s;
+}
+
+/* Back to top */
+.back-to-top {
+  position: fixed;
+  bottom: 2em;
+  right: 2em;
+  width: 2.5em;
+  height: 2.5em;
+  border-radius: 50%;
+  background: var(--border);
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  font-size: 1.2rem;
+  opacity: 0;
+  transition: opacity 0.3s;
+  border: none;
+  cursor: pointer;
+}
+
+.back-to-top.visible {
+  opacity: 0.7;
+}
+
+.back-to-top:hover {
+  opacity: 1;
+}
+
+/* Footer */
+.reader-footer {
+  text-align: center;
+  margin-top: 6em;
+  padding-top: 2em;
+  border-top: 1px solid var(--border);
+  font-size: 0.8rem;
+  color: var(--dim);
+  line-height: 2;
+}
+
+.reader-footer a {
+  color: var(--green-dim);
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  html { font-size: 16px; }
+  body { padding: 1.5em 1em 4em; }
+  header h1 { font-size: 1.8rem; }
+  nav#TOC { padding: 1em 1.2em; }
+}
+
+/* Print */
+@media print {
+  body {
+    max-width: none;
+    margin: 0;
+    padding: 0;
+    font-size: 11pt;
+    line-height: 1.6;
+  }
+  .progress-bar, .back-to-top, nav#TOC { display: none; }
+  h1 { page-break-before: always; }
+  h1:first-of-type { page-break-before: avoid; }
+  a { color: #000; text-decoration: none; }
+  .green, code { color: #000; }
+}