Storyline: add the Prologue chapter, extend the layout for sessions
Chapters now carry an eyebrow ("Overview", "Prologue", ...) and a short
tag for the list/sidebar badge, instead of a bare running number, so
non-numbered entries read correctly.
New chapter: "Prologue - The Long Road to Brackenford", the session
outline formatted as a runnable document -- an at-a-glance metadata band
(levels, duration, locations, hook), the in-world courier notice as a
posted handout, numbered scenes, GM callouts for the "ask the players"
prompts, label/body rows for the skill-check clues and travel-day
prompts, a three-stage encounter block, dramatic beat lines, and a
before/after panel for the legend the party's own retelling becomes.
Cross-links the Hearthburrow to Enemies and the closing line to the
overview's "Five and the Five".
Tests: render every chapter partial headless (no HTTP/DB) so a broken
variable or path() fails loudly, check each registered chapter has its
template file, and assert the /storyline routes sit behind the login gate.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Frank
@@ -428,3 +428,149 @@ table.dataTable {
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
.storyline-pager-title { font-weight: 600; }
|
||||
|
||||
/* Chapter list: kicker line above each title */
|
||||
.storyline-chapter-kicker {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
/* --- Storyline: session / adventure chapter components -------------- */
|
||||
|
||||
/* At-a-glance metadata band under the chapter header */
|
||||
.storyline-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
|
||||
gap: 0.6rem 1.75rem;
|
||||
margin: 0 0 2rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: var(--bs-tertiary-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.storyline-meta > div { display: flex; flex-direction: column; }
|
||||
.storyline-meta dt {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
.storyline-meta dd { margin: 0.1rem 0 0; font-weight: 500; }
|
||||
|
||||
/* In-world handout / posted notice */
|
||||
.storyline-handout {
|
||||
max-width: 24rem;
|
||||
margin: 1.75rem auto;
|
||||
padding: 1.5rem 1.75rem;
|
||||
text-align: center;
|
||||
background: var(--bs-tertiary-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 5px var(--bs-body-bg), 0 0 0 6px var(--bs-border-color);
|
||||
font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.storyline-handout strong {
|
||||
display: block;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
/* Label + body rows: skill checks, day prompts */
|
||||
.storyline-rows {
|
||||
list-style: none;
|
||||
margin: 1.25rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
.storyline-rows li {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 0.55rem 0;
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
}
|
||||
.storyline-rows li:last-child { border-bottom: 1px solid var(--bs-border-color); }
|
||||
.storyline-rows .k {
|
||||
flex: 0 0 9rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@media (max-width: 40rem) {
|
||||
.storyline-rows li { flex-direction: column; gap: 0.15rem; }
|
||||
.storyline-rows .k { flex-basis: auto; }
|
||||
}
|
||||
|
||||
/* Question / answer + itemised lists */
|
||||
.storyline-qa { margin: 1.25rem 0; }
|
||||
.storyline-qa > div {
|
||||
padding: 0.55rem 0;
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
}
|
||||
.storyline-qa > div:last-child { border-bottom: 1px solid var(--bs-border-color); }
|
||||
.storyline-qa dt { font-weight: 600; }
|
||||
.storyline-qa dd { margin: 0.15rem 0 0; color: var(--bs-secondary-color); }
|
||||
|
||||
/* Staged encounter */
|
||||
.storyline-stages {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
.storyline-stage {
|
||||
padding: 0.9rem 1.1rem;
|
||||
background: var(--bs-tertiary-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-left: 3px solid var(--bs-primary);
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.storyline-stage h4 {
|
||||
font-size: 0.95rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin: 0 0 0.4rem;
|
||||
}
|
||||
.storyline-stage > :last-child { margin-bottom: 0; }
|
||||
|
||||
/* A dramatic beat: SCRATCH / sign text / milestone */
|
||||
.storyline-beat {
|
||||
text-align: center;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin: 1.75rem 0 !important;
|
||||
}
|
||||
|
||||
/* Before / after legend distortion */
|
||||
.storyline-legend {
|
||||
list-style: none;
|
||||
margin: 1.25rem 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
.storyline-legend li {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
.storyline-legend .from {
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
.storyline-legend .arrow { color: var(--bs-primary); font-size: 1.1rem; }
|
||||
.storyline-legend .to { font-style: italic; }
|
||||
@media (max-width: 45rem) {
|
||||
.storyline-legend li { grid-template-columns: 1fr; gap: 0.2rem; }
|
||||
.storyline-legend .from { text-align: left; }
|
||||
.storyline-legend .arrow { display: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user