Skip to content

Commit 377c7e8

Browse files
asimoneclaude
asimone
and
claude
committed
Reorder sections, fix push/pull icons, add footer
- Fix push/pull icons: override filter:none so natural SVG colors show on teal - Move Attack Effect Timing to bottom of Attack tab - Move Push & Pull to top of Movement tab - Cards tab: remove Item Usage header, reorder to Lost/Persistent/Recover/Spent/Refresh/Flip - Add footer with Ko-fi, Source Code, and File a Bug links - Switch body to flex column so footer sticks to bottom Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent a94ca7e commit 377c7e8

3 files changed

Lines changed: 121 additions & 65 deletions

File tree

‎assets/icons/pull.svg‎

Lines changed: 0 additions & 1 deletion
Loading

‎assets/icons/push.svg‎

Lines changed: 0 additions & 1 deletion
Loading

‎index.html‎

Lines changed: 121 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@
4747
max-width: 540px;
4848
margin: 0 auto;
4949
min-height: 100vh;
50+
display: flex;
51+
flex-direction: column;
5052
}
5153

5254
/* ── Sticky shell ── */
@@ -114,7 +116,7 @@
114116
}
115117

116118
/* ── Main content ── */
117-
main { padding: 16px 12px 48px; }
119+
main { padding: 16px 12px 32px; flex: 1; }
118120

119121
/* ── Section header ── */
120122
.section-header {
@@ -290,6 +292,44 @@
290292
position: relative;
291293
top: -1px;
292294
}
295+
296+
/* ── Footer ── */
297+
.site-footer {
298+
border-top: 1px solid var(--border);
299+
padding: 14px 16px;
300+
display: flex;
301+
align-items: center;
302+
justify-content: center;
303+
flex-wrap: wrap;
304+
gap: 6px;
305+
font-size: .78rem;
306+
}
307+
.kofi-btn {
308+
font-family: 'Lato', sans-serif;
309+
font-size: .78rem;
310+
font-weight: 700;
311+
color: #fff;
312+
background: #29abe0;
313+
padding: 4px 10px;
314+
border-radius: 5px;
315+
text-decoration: none;
316+
white-space: nowrap;
317+
transition: opacity .15s;
318+
}
319+
.kofi-btn:hover { opacity: .85; }
320+
.footer-sep {
321+
color: var(--border);
322+
user-select: none;
323+
}
324+
.footer-link {
325+
font-family: 'Lato', sans-serif;
326+
font-size: .78rem;
327+
color: var(--muted);
328+
text-decoration: none;
329+
white-space: nowrap;
330+
transition: color .15s;
331+
}
332+
.footer-link:hover { color: var(--text-sec); }
293333
</style>
294334
</head>
295335
<body>
@@ -663,29 +703,6 @@ <h2 class="section-header">Attack modifier rules</h2>
663703
</div>
664704
</div>
665705

666-
<h2 class="section-header">Attack effect timing</h2>
667-
668-
<!-- ATTACK EFFECT TIMING — text-only with table -->
669-
<div class="card">
670-
<div class="card-body">
671-
<p>Attack effects are applied in a specific order relative to the damage roll. Effects that say "on this attack" apply when listed below:</p>
672-
<table class="ref-table">
673-
<thead>
674-
<tr><th>Effect</th><th>When applied</th></tr>
675-
</thead>
676-
<tbody>
677-
<tr><td>+X Attack</td><td>During damage calculation</td></tr>
678-
<tr><td>Pierce X</td><td>During damage calculation</td></tr>
679-
<tr><td>Conditions (Wound, etc.)</td><td>After damage resolves</td></tr>
680-
<tr><td>Push X / Pull X</td><td>After damage resolves</td></tr>
681-
<tr><td>+X Target</td><td>After attack resolves (next target)</td></tr>
682-
<tr><td>Elemental infuse</td><td>End of your turn</td></tr>
683-
</tbody>
684-
</table>
685-
<div class="callout"><span class="callout-icon">⚠</span><span>Attack effects (conditions, Push/Pull) apply <em>even if the attack deals 0 damage</em> after shields — unless a ×0 null card was drawn. <em>(p. 26)</em></span></div>
686-
</div>
687-
</div>
688-
689706
<h2 class="section-header">Shield &amp; Pierce</h2>
690707

691708
<!-- SHIELD & PIERCE -->
@@ -728,6 +745,29 @@ <h2 class="section-header">Retaliate</h2>
728745
</div>
729746
</div>
730747

748+
<h2 class="section-header">Attack effect timing</h2>
749+
750+
<!-- ATTACK EFFECT TIMING — text-only with table -->
751+
<div class="card">
752+
<div class="card-body">
753+
<p>Attack effects are applied in a specific order relative to the damage roll. Effects that say "on this attack" apply when listed below:</p>
754+
<table class="ref-table">
755+
<thead>
756+
<tr><th>Effect</th><th>When applied</th></tr>
757+
</thead>
758+
<tbody>
759+
<tr><td>+X Attack</td><td>During damage calculation</td></tr>
760+
<tr><td>Pierce X</td><td>During damage calculation</td></tr>
761+
<tr><td>Conditions (Wound, etc.)</td><td>After damage resolves</td></tr>
762+
<tr><td>Push X / Pull X</td><td>After damage resolves</td></tr>
763+
<tr><td>+X Target</td><td>After attack resolves (next target)</td></tr>
764+
<tr><td>Elemental infuse</td><td>End of your turn</td></tr>
765+
</tbody>
766+
</table>
767+
<div class="callout"><span class="callout-icon">⚠</span><span>Attack effects (conditions, Push/Pull) apply <em>even if the attack deals 0 damage</em> after shields — unless a ×0 null card was drawn. <em>(p. 26)</em></span></div>
768+
</div>
769+
</div>
770+
731771
</div><!-- /tab-attack -->
732772

733773

@@ -736,6 +776,31 @@ <h2 class="section-header">Retaliate</h2>
736776
───────────────────────────────────────── -->
737777
<div id="tab-movement" class="tab-panel" role="tabpanel" aria-labelledby="btn-movement">
738778

779+
<h2 class="section-header">Push &amp; Pull</h2>
780+
781+
<!-- PUSH & PULL -->
782+
<div class="card">
783+
<div class="card-header">
784+
<div style="display:flex;gap:6px;flex-shrink:0">
785+
<div class="badge-icon-wrap" style="background:#2a5a4a">
786+
<img src="assets/icons/push.svg" alt="Push icon" style="filter:none">
787+
</div>
788+
<div class="badge-icon-wrap" style="background:#2a5a4a">
789+
<img src="assets/icons/pull.svg" alt="Pull icon" style="filter:none">
790+
</div>
791+
</div>
792+
<div class="card-meta">
793+
<div class="card-title">Push &amp; Pull</div>
794+
<span class="card-sub">Forced movement</span>
795+
</div>
796+
</div>
797+
<div class="card-body">
798+
<p><strong>Push X</strong> forces the target to move up to X hexes, with each hex moving the target <em>farther away</em> from the source. <strong>Pull X</strong> moves the target up to X hexes <em>closer</em>. The attacker chooses the path.</p>
799+
<p>Forced movement triggers hazardous terrain on each hex entered. The pushed/pulled figure can be moved through friendly figures, but not through enemies or obstacles.</p>
800+
<div class="callout"><span class="callout-icon">⚠</span><span>Forced movement does <em>not</em> cost extra for difficult terrain — it ignores movement point costs entirely. It can also be used to move a figure onto a hazardous hex intentionally. <em>(p. 32)</em></span></div>
801+
</div>
802+
</div>
803+
739804
<h2 class="section-header">Move &amp; Jump</h2>
740805

741806
<!-- MOVE & JUMP -->
@@ -817,17 +882,6 @@ <h2 class="section-header">Terrain types</h2>
817882
</div>
818883
</div>
819884

820-
<h2 class="section-header">Push &amp; Pull</h2>
821-
822-
<!-- PUSH & PULL — text-only -->
823-
<div class="card">
824-
<div class="card-body">
825-
<p><strong>Push X</strong> forces the target to move up to X hexes, with each hex moving the target <em>farther away</em> from the source. <strong>Pull X</strong> moves the target up to X hexes <em>closer</em>. The attacker chooses the path.</p>
826-
<p>Forced movement triggers hazardous terrain on each hex entered. The pushed/pulled figure can be moved through friendly figures, but not through enemies or obstacles.</p>
827-
<div class="callout"><span class="callout-icon">⚠</span><span>Forced movement does <em>not</em> cost extra for difficult terrain — it ignores movement point costs entirely. It can also be used to move a figure onto a hazardous hex intentionally. <em>(p. 32)</em></span></div>
828-
</div>
829-
</div>
830-
831885
</div><!-- /tab-movement -->
832886

833887

@@ -838,21 +892,6 @@ <h2 class="section-header">Push &amp; Pull</h2>
838892

839893
<h2 class="section-header">Card use</h2>
840894

841-
<!-- SPENT -->
842-
<div class="card">
843-
<div class="card-header">
844-
<img src="assets/icons/spent.svg" class="badge-img" alt="Spent icon">
845-
<div class="card-meta">
846-
<div class="card-title">Spent</div>
847-
<span class="card-sub">Card usage</span>
848-
</div>
849-
</div>
850-
<div class="card-body">
851-
<p>A <strong>spent</strong> card is placed face-down in your spent pile. Spent cards are returned to your hand when you take a <strong>short rest</strong> (with one card randomly lost) or a <strong>long rest</strong>.</p>
852-
<div class="callout"><span class="callout-icon">⚠</span><span>Items with a spent icon are <em>rotated sideways</em> when used. They are recovered the next time you perform a long rest. <em>(p. 36)</em></span></div>
853-
</div>
854-
</div>
855-
856895
<!-- LOST -->
857896
<div class="card">
858897
<div class="card-header">
@@ -883,20 +922,33 @@ <h2 class="section-header">Card use</h2>
883922
</div>
884923
</div>
885924

886-
<h2 class="section-header">Item usage</h2>
925+
<!-- RECOVER -->
926+
<div class="card">
927+
<div class="card-header">
928+
<img src="assets/icons/recover.svg" class="badge-img" alt="Recover icon">
929+
<div class="card-meta">
930+
<div class="card-title">Recover</div>
931+
<span class="card-sub">Card usage</span>
932+
</div>
933+
</div>
934+
<div class="card-body">
935+
<p>A <strong>Recover</strong> ability lets you take one or more lost cards from your lost pile and return them to your hand or spent pile (as specified). This is the only way to get lost cards back mid-scenario.</p>
936+
<div class="callout"><span class="callout-icon">⚠</span><span>Recover does <em>not</em> apply to cards discarded by resting — only to cards in your lost pile. <em>(p. 38)</em></span></div>
937+
</div>
938+
</div>
887939

888-
<!-- FLIP -->
940+
<!-- SPENT -->
889941
<div class="card">
890942
<div class="card-header">
891-
<img src="assets/icons/flip.svg" class="badge-img" alt="Flip icon">
943+
<img src="assets/icons/spent.svg" class="badge-img" alt="Spent icon">
892944
<div class="card-meta">
893-
<div class="card-title">Flip</div>
894-
<span class="card-sub">Item usage</span>
945+
<div class="card-title">Spent</div>
946+
<span class="card-sub">Card usage</span>
895947
</div>
896948
</div>
897949
<div class="card-body">
898-
<p>Items with a <strong>flip</strong> icon are flipped after use, revealing a different use on the other side. When that other side is then used, the item flips back to its front — ready to use again. The specific timing of when to use the back side is detailed in the card's text.</p>
899-
<div class="callout"><span class="callout-icon">⚠</span><span>Characters should always start a scenario with flip items on the side showing the gold or crafting cost. <em>(p. 36)</em></span></div>
950+
<p>A <strong>spent</strong> card is placed face-down in your spent pile. Spent cards are returned to your hand when you take a <strong>short rest</strong> (with one card randomly lost) or a <strong>long rest</strong>.</p>
951+
<div class="callout"><span class="callout-icon">⚠</span><span>Items with a spent icon are <em>rotated sideways</em> when used. They are recovered the next time you perform a long rest. <em>(p. 36)</em></span></div>
900952
</div>
901953
</div>
902954

@@ -915,18 +967,18 @@ <h2 class="section-header">Item usage</h2>
915967
</div>
916968
</div>
917969

918-
<!-- RECOVER -->
970+
<!-- FLIP -->
919971
<div class="card">
920972
<div class="card-header">
921-
<img src="assets/icons/recover.svg" class="badge-img" alt="Recover icon">
973+
<img src="assets/icons/flip.svg" class="badge-img" alt="Flip icon">
922974
<div class="card-meta">
923-
<div class="card-title">Recover</div>
924-
<span class="card-sub">Card usage</span>
975+
<div class="card-title">Flip</div>
976+
<span class="card-sub">Item usage</span>
925977
</div>
926978
</div>
927979
<div class="card-body">
928-
<p>A <strong>Recover</strong> ability lets you take one or more lost cards from your lost pile and return them to your hand or spent pile (as specified). This is the only way to get lost cards back mid-scenario.</p>
929-
<div class="callout"><span class="callout-icon">⚠</span><span>Recover does <em>not</em> apply to cards discarded by resting — only to cards in your lost pile. <em>(p. 38)</em></span></div>
980+
<p>Items with a <strong>flip</strong> icon are flipped after use, revealing a different use on the other side. When that other side is then used, the item flips back to its front — ready to use again. The specific timing of when to use the back side is detailed in the card's text.</p>
981+
<div class="callout"><span class="callout-icon">⚠</span><span>Characters should always start a scenario with flip items on the side showing the gold or crafting cost. <em>(p. 36)</em></span></div>
930982
</div>
931983
</div>
932984

@@ -935,6 +987,12 @@ <h2 class="section-header">Item usage</h2>
935987

936988
</main>
937989

990+
<footer class="site-footer">
991+
<a href="https://ko-fi.com/B0B717I6U" class="kofi-btn" target="_blank" rel="noreferrer">☕ Support on Ko-fi</a>
992+
<span class="footer-sep">|</span><a href="https://github.com/frosthaven-reference/frosthaven-reference.github.io" class="footer-link" target="_blank" rel="noreferrer">Source Code</a>
993+
<span class="footer-sep">|</span><a href="https://github.com/frosthaven-reference/frosthaven-reference.github.io/issues" class="footer-link" target="_blank" rel="noreferrer">File a Bug</a>
994+
</footer>
995+
938996
<script>
939997
(function () {
940998
const btns = document.querySelectorAll('.tab-btn');

0 commit comments

Comments
 (0)