drew/fabula-ultima-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add book viewer at /book with shared design system

Browse Source 
- Add html/index.html: book viewer with auto-discovering sidebar,
  prev/next navigation, keyboard shortcuts, and URL hash persistence
- Add html/book-page.css: shared stylesheet for all book pages derived
  from fabula-ultima-sheet.css (dark theme, CSS variables, Cinzel/
  Crimson Text fonts, common class styles)
- Add book.js entry point so webpack injects the shared CSS into the
  book viewer; update webpack.config.js for two entry points, split
  CSS chunk, CopyWebpackPlugin for book pages, and /book dev server
  rewrite rule
- Add scripts/strip_watermark.py: removes "Guest Customer (Order
  #52072168)" watermark artifacts from all 210 book pages
- Add scripts/restyle_book.py: strips per-page <style> blocks and
  injects <link rel="stylesheet" href="book-page.css"> into all pages
- Update Justfile deploy to scp -r dist/* for the new /book subtree

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Drew Malzahn
2026-06-06 03:36:35 +00:00
parent 58552b536f
commit c75cd188c1
220 changed files with 12685 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
html/80.html Normal file
View File

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index & Glossary</title>
<link rel="stylesheet" href="book-page.css">
</head>
<body>
<div class="container">
<header>
<h1>CHAPTER</h1>
<h2>Other Nature <small>(d8 or d12, based upon the context)</small></h2>
<p><strong>Type:</strong> Fungal / Incorporeal Liquid</p>
</header>
<!-- Section 1: Tripartite Classification (Fungal/Liquid) -->
<section class="three-column-section">
<div class="three-column-list">
<h3>Fungal</h3>
<ul>
<li>Boletus</li>
<li>Hen</li>
<li>Honeyshroom</li>
<li>Morel</li>
<li>Mucilage</li>
<li>Mushroom</li>
<li>Oyster</li>
<li>Truffle</li>
<li>&nbsp;</li> <!-- Placeholder for missing data continuity -->
</ul>
</div>
<div class="three-column-list">
<h3>Incorporeal Liquid</h3>
<ul>
<li>Ash</li>
<li>Bubble</li>
<li>Essence</li>
<li>Gas</li>
<li>Mirage</li>
<li>Smoke</li>
<li>Strand</li>
<li>Vapor</li>
<li>&nbsp;</li>
</ul>
</div>
<div class="three-column-list">
<h3>Properties</h3>
<ul>
<li>Clot</li>
<li>Drop</li>
<li>Extract</li>
<li>Fluid</li>
<li>Ichor</li>
<li>Oil</li>
<li>Reagent</li>
<li>Sludge</li>
<li>&nbsp;</li>
</ul>
</div>
</section>
<!-- Section 2: Artificial Mineral Plant (Grid Layout) -->
<h2 style="margin-top: 40px;">Artificial Mineral Plant</h2>
<div class="mineral-plant-grid">
<div class="mineral-column"><strong>1. Chain</strong>
<ul><li>Core</li><li>Fabric</li><li>Gear</li><li>Leather</li><li>Lens</li><li>Plate</li><li>Propeller</li><li>Rope</li><li>Scrap</li><li>Spring</li><li>Valve</li></ul>
</div>
<div class="mineral-column"><strong>2. Block</strong>
<ul><li>Charcoal</li><li>Crystal</li><li>Dust</li><li>Fragment</li><li>Gem</li><li>Limestone</li><li>Block</li><li>Salt</li><li>Stele</li><li>Stone</li></ul>
</div>
<div class="mineral-column"><strong>3. Algae</strong>
<ul><li>Bark</li><li>Bramble</li><li>Flower</li><li>Berry</li><li>Branch</li><li>Fruit</li><li>Plant</li><li>Moss</li><li>Root</li><li>Thorn</li></ul>
</div>
<div class="mineral-column"><strong>1. Block (Restarting structure due to poor extraction)</strong>
<ul><li>Algae</li><li>Bark</li><li>Crystal</li><li>Bramble</li><li>Flower</li><li>Fruit</li><li>Leaf</li><li>Moss</li><li>Petal</li><li>Stone</li></ul>
</div>
</div>
<!-- Section 3: Dialogue/Epilogue -->
<div class="dialogue">
<p>“This mushroom here? They call it Faery Toadstool.<br>No. It’s not a good idea to pick it.”</p>
<hr style="border: none; border-top: 1px solid #ccc; margin: 20px 0;">
<div class="signature">
</div>
</div>
</div>
</body>
</html>