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

feat: Add core rules

Browse Source
This commit is contained in:
Drew Malzahn
2026-06-06 13:03:00 +00:00
parent c75cd188c1
commit 75c6ab9975
583 changed files with 13580 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
css/book-page.css Normal file
View File

@@ -0,0 +1,288 @@
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inconsolata:wght@400;600&display=swap');
/* Variables mirrored from fabula-ultima-sheet.css */
:root {
--bg: #0d0f0e;
--surface: #141816;
--surface2: #1b1f1d;
--surface3: #222826;
--border: #2e3830;
--border-bright:#3d4f47;
--teal: #4ecdc4;
--teal-dim: #2a6b66;
--gold: #c9a84c;
--gold-dim: #7a6130;
--red: #c0392b;
--text: #d4cfc4;
--text-dim: #7a8a82;
--text-bright: #ede8dc;
--font-display: 'Cinzel', serif;
--font-body: 'Crimson Text', serif;
--font-mono: 'Inconsolata', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Base ── */
body {
background: var(--bg);
background-image:
radial-gradient(ellipse at 20% 10%, rgba(78,205,196,.04) 0%, transparent 50%),
radial-gradient(ellipse at 80% 90%, rgba(201,168,76,.04) 0%, transparent 50%);
color: var(--text);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.75;
padding: 32px;
max-width: 860px;
margin: 0 auto;
}
/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
line-height: 1.3;
margin-top: 1.6em;
margin-bottom: 0.5em;
}
h1 {
font-size: 1.85em;
color: var(--teal);
border-bottom: 1px solid var(--border-bright);
padding-bottom: 0.3em;
margin-top: 0.4em;
}
h2 { font-size: 1.3em; color: var(--gold); }
h3 { font-size: 1.1em; color: var(--text-bright); }
h4 { font-size: 0.95em; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; }
h5, h6 { font-size: 0.85em; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
/* ── Body copy ── */
p { margin-bottom: 0.9em; }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--text-bright); font-weight: 600; }
em, i { color: var(--text-dim); font-style: italic; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: 0.82em; color: var(--text-dim); }
/* ── Lists ── */
ul, ol { padding-left: 1.5em; margin-bottom: 0.9em; }
li { margin-bottom: 0.35em; }
li > p { margin-bottom: 0.3em; }
li strong { color: var(--gold); }
/* Custom bullet style used by several pages */
ul.no-bullets, .class-list, .toc-list, .ability-list { list-style: none; padding-left: 0; }
/* ── Blockquote ── */
blockquote {
border-left: 3px solid var(--teal-dim);
margin: 1em 0;
padding: 0.6em 1.2em;
color: var(--text-dim);
font-style: italic;
background: var(--surface2);
}
blockquote cite, cite { font-size: 0.85em; color: var(--text-dim); display: block; margin-top: 0.4em; }
/* ── Code ── */
code {
font-family: var(--font-mono);
font-size: 0.84em;
background: var(--surface2);
color: var(--teal);
padding: 0.05em 0.3em;
}
pre {
font-family: var(--font-mono);
font-size: 0.84em;
background: var(--surface2);
color: var(--text);
border: 1px solid var(--border);
padding: 1em;
overflow-x: auto;
margin-bottom: 0.9em;
}
/* ── HR / dividers ── */
hr {
border: none;
border-top: 1px solid var(--border);
margin: 1.4em 0;
}
/* ── Tables ── */
table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.9em; }
th {
background: var(--surface3);
color: var(--teal);
font-family: var(--font-display);
font-size: 0.65em;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid var(--border-bright);
}
td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
/* ── Structural ── */
header {
border-bottom: 1px solid var(--border);
padding-bottom: 0.8em;
margin-bottom: 1.4em;
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 0.78em;
}
section { margin-bottom: 1.4em; }
/* .container wrappers used by some pages */
.container, .document-container, .section-container { /* inherit body max-width */ }
/* ── Metadata / footer notes ── */
.metadata, .meta-data, .metadata-box, .meta-info,
.document-footer, .page-info, .reference-note,
.source-note, .footer-note {
margin-top: 2em;
padding: 0.7em 0.9em;
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 0.76em;
color: var(--text-dim);
}
/* ── Section breaks ── */
.section-break, .section-divider {
border-top: 1px solid var(--border-bright);
margin: 1.6em 0;
padding-top: 1.6em;
}
/* ── Section / sub-section headings ── */
.section-header, .section-title, .subheading {
font-family: var(--font-display);
font-size: 0.65em;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--teal);
border-bottom: 1px solid var(--border);
padding-bottom: 5px;
margin-bottom: 10px;
}
/* ── Card-style entries ── */
.weapon-entry, .skill-entry, .artifact-entry, .item-entry,
.character-card, .stat-block, .skill-card, .ability-item,
.lore-entry, .credit-entry, .choice-group,
.index-item, .equipment, .equipment-details {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--teal-dim);
padding: 14px 16px;
margin-bottom: 12px;
}
/* Entry / item titles */
.weapon-title, .artifact-title, .entry-title,
.item-name, .item-title, .item-header,
.ability-title, .skill-title, .skill-name,
.weapon-name, .effect-header, .skill-header {
font-family: var(--font-display);
font-size: 0.72em;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 0.35em;
}
/* Stats / attributes lines */
.weapon-stats, .stats-line, .stats, .stats-block,
.stats-data, .stats-grid, .attributes,
.key-attributes, .stat-item, .stat-box, .stat-block {
font-family: var(--font-mono);
font-size: 0.82em;
color: var(--text-dim);
margin-bottom: 0.5em;
}
.attributes span, .stats-grid span { display: inline-block; margin-right: 1em; }
/* Damage / cost labels */
.damage-type { color: var(--red); font-weight: 600; }
.cost, .item-cost, .skill-cost, .requirements { color: var(--gold-dim); font-family: var(--font-mono); font-size: 0.85em; }
/* ── ToC ── */
.toc-list { list-style: none; padding: 0; }
.toc-item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5em;
padding: 4px 0;
border-bottom: 1px solid var(--border);
font-size: 0.95em;
}
.toc-item:last-child { border-bottom: none; }
.title, .section-header.title { flex: 1; }
.page-number { font-family: var(--font-mono); font-size: 0.82em; color: var(--text-dim); white-space: nowrap; }
/* ── Profile / character ── */
.profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
}
.profile-attribute strong, .profile-field strong { color: var(--text-dim); font-size: 0.85em; display: block; }
.profile-attribute span { font-weight: 600; color: var(--text-bright); }
.character-info { font-size: 0.9em; color: var(--text-dim); margin-bottom: 0.5em; }
/* ── Notes / highlights / examples ── */
.highlight, .note, .info-box, .info-item, .special-rules {
background: var(--surface2);
border: 1px solid var(--border-bright);
padding: 10px 14px;
margin: 0.8em 0;
}
.example {
border-left: 3px solid var(--gold-dim);
padding: 0.5em 1em;
color: var(--text-dim);
font-style: italic;
margin: 0.8em 0;
}
/* ── Descriptor / index groups ── */
.descriptor-group, .index-list, .class-list, .ability-list { margin-bottom: 1em; }
.index-item { display: flex; gap: 0.5em; }
.skill-classes { font-size: 0.8em; color: var(--text-dim); }
/* ── Section group ── */
.section-group { margin-bottom: 1.4em; }
/* ── Skill header layout ── */
.skill-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.4em;
}
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-bright); }
::-webkit-scrollbar-thumb:hover { background: var(--teal-dim); }