- 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>
72 lines
3.0 KiB
HTML
72 lines
3.0 KiB
HTML
<link rel="stylesheet" href="book-page.css">
|
||
|
||
<main>
|
||
<!-- Initial Narrative Context -->
|
||
<div class="section-box">
|
||
<p>Few truly know what lurks behind the quiet of this enigmatic place, lost in the depths of the forest. The locals never cross its threshold—even during celebrations—and the youngsters show great respect to those who dare enter just the first chamber. Moss and lichens cover the wall of the now forgotten Badger Temple… and its secret should be forgotten as well.</p>
|
||
</div>
|
||
|
||
<!-- Main At-a-Glance Section -->
|
||
<div class="section-box">
|
||
<h2>BADGER TEMPLE AT A GLANCE</h2>
|
||
<p style="font-style: italic;">Keywords: curse, trial, seal.</p>
|
||
|
||
<dl>
|
||
<dt>Terrain:</dt>
|
||
<dd>stone, vines, water. Common elements: <span class="element-list">L</span>, <span class="element-list">D</span>, <span class="element-list">E</span></dd>
|
||
</dl>
|
||
|
||
<dl>
|
||
<dt>Travel roll:</dt>
|
||
<dd>d8. Rare elements: <span class="element-list">A</span>, <span class="element-list">F</span></dd>
|
||
</dl>
|
||
|
||
<h3 style="margin-top: 20px; margin-bottom: 10px;">Key Features</h3>
|
||
|
||
<div class="data-grid" style="display: flex; gap: 40px; margin-top: 15px;">
|
||
<!-- Dangers -->
|
||
<div style="flex: 1;">
|
||
<h4>Dangers</h4>
|
||
<ul>
|
||
<li>A huge sentient plant guarding the path.</li>
|
||
<li>A magical mist that fools the senses.</li>
|
||
<li>A barrier created by the statues that flank the entrance.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Discoveries -->
|
||
<div style="flex: 1;">
|
||
<h4>Discoveries</h4>
|
||
<ul>
|
||
<li>A spirit protector of the forest.</li>
|
||
<li>A plant with miraculous properties.</li>
|
||
<li>A shrine hiding a prodigious blessing.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Themes -->
|
||
<dl style="grid-template-columns: 1fr 2fr; margin-top: 20px;">
|
||
<dt>Themes:</dt>
|
||
<dd>Facing one’s fears, gaining self-awareness and self-confidence, understanding the past to build the future.</dd>
|
||
</dl>
|
||
|
||
</div>
|
||
|
||
<!-- Structured Title/Section Block -->
|
||
<div class="section-box">
|
||
<h3>Structural Context</h3>
|
||
<p style="font-weight: bold; margin-bottom: 10px;">THE ANCIENT SHRINE / Badger Temple</p>
|
||
<div style="display: flex; justify-content: space-around; text-align: center; padding: 15px 0; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc;">
|
||
<div><strong>THE ANCIENT SHRINE</strong></div>
|
||
<div style="font-size: 1.2em;">/</div>
|
||
<div><strong>Badger Temple</strong></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Metadata / Footer Information -->
|
||
<div class="section-box meta-info">
|
||
<h4>Additional Data</h4>
|
||
</div>
|
||
|
||
</main> |