The hall's cards name each game's house player and lead with "Play Dip →", Waving Hands shows its gesture grid, and the small text reads at 4.5:1

The intro says how to start before the cards. Each card's metadata line
names the house player, the call to action is "Play [Game] →" with the
game's address beneath, and an empty length line waits, hidden, for real
play data. Waving Hands' card shows the lobby's gesture grid instead of
the share card. "How a table works" says Start a table and how a seat
crosses devices, and the credits run in the cards' order. The faint bone
is gone: the metadata lines and the footer use the dimmed bone, 6.5:1
and 7.2:1 where they were 3.7:1 and 4.0:1, and the ko-fi link no longer
wraps.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2026-10-11 20:41:55 -04:00
co-authored by Claude Fable 5.1
parent c2582a4822
commit c162625d51
2 changed files with 39 additions and 20 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 36 KiB

+39 -20
View File
@@ -22,7 +22,6 @@
--line: #2c3236; --line: #2c3236;
--bone: #e6dfcf; --bone: #e6dfcf;
--bone-dim: #a9a494; --bone-dim: #a9a494;
--bone-faint: #7c7868;
--gold: #d2a94a; --gold: #d2a94a;
--gutter: 16px; --gutter: 16px;
} }
@@ -73,14 +72,17 @@
.game .art { position: relative; aspect-ratio: 5 / 3; background: #222; overflow: hidden; } .game .art { position: relative; aspect-ratio: 5 / 3; background: #222; overflow: hidden; }
.game .art img.fill { width: 100%; height: 100%; object-fit: cover; display: block; } .game .art img.fill { width: 100%; height: 100%; object-fit: cover; display: block; }
.game .art img.tafl { object-position: 50% 50%; } .game .art img.tafl { object-position: 50% 50%; }
.game .art img.hands { object-position: 0% 50%; }
.game .art img.dip { object-position: 50% 80%; } .game .art img.dip { object-position: 50% 80%; }
.game .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .game .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.game h2 { margin: 0; font-size: 1.45rem; font-weight: 500; } .game h2 { margin: 0; font-size: 1.45rem; font-weight: 500; }
.game .pitch { margin: 0; color: var(--bone); } .game .pitch { margin: 0; color: var(--bone); }
.game .facts { margin: 0; color: var(--bone-faint); font-size: 0.92rem; } .game .facts, .game .length { margin: 0; color: var(--bone-dim); font-size: 0.92rem; }
.game .play { margin-top: auto; padding-top: 10px; color: var(--gold); font-size: 1rem; } .game .length:empty { display: none; }
.game .go { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.game .play { color: var(--gold); font-size: 1rem; }
.game .site { color: var(--bone-dim); font-size: 0.85rem; }
.game:hover .play { text-decoration: underline; } .game:hover .play { text-decoration: underline; }
.nowrap { white-space: nowrap; }
/* The maze card: a stone floor in CSS, mortar-coloured walls, and the hall's own token drawings. */ /* The maze card: a stone floor in CSS, mortar-coloured walls, and the hall's own token drawings. */
.maze { .maze {
@@ -111,7 +113,7 @@
.keeper img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--line); } .keeper img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--line); }
@media (max-width: 480px) { .keeper { flex-direction: column; } } @media (max-width: 480px) { .keeper { flex-direction: column; } }
footer { margin-top: 64px; padding: 28px 0 48px; border-top: 1px solid var(--line); color: var(--bone-faint); font-size: 0.9rem; } footer { margin-top: 64px; padding: 28px 0 48px; border-top: 1px solid var(--line); color: var(--bone-dim); font-size: 0.9rem; }
footer p { margin: 0 0 8px; } footer p { margin: 0 0 8px; }
/* The hall-wide notice: its own colors, the same in every game of the hall. */ /* The hall-wide notice: its own colors, the same in every game of the hall. */
.hall-announcement { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .45rem 2.4rem .45rem 1rem; background: #f2c45a; color: #1d1a12; font: 500 .95rem/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: center; box-shadow: 0 1px 4px #0005; } .hall-announcement { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .45rem 2.4rem .45rem 1rem; background: #f2c45a; color: #1d1a12; font: 500 .95rem/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: center; box-shadow: 0 1px 4px #0005; }
@@ -123,10 +125,11 @@
<header class="mast"> <header class="mast">
<h1>Kestrel's Hall</h1> <h1>Kestrel's Hall</h1>
<p class="lede"><b>Free board games in the browser.</b> Play with friends by sending a link, or alone against the house. No accounts, no adverts, no timers, and nothing sold.</p> <p class="lede"><b>Free board games in the browser.</b> Play alone against the house right away, or open a table and send friends the link. No accounts, no adverts, no timers, and nothing sold.</p>
</header> </header>
<div class="games"> <div class="games">
<!-- Each card's empty "length" line is for a typical game's length, once real play has shown it; it is hidden until filled. -->
<a class="game" href="https://wizwar.kestrelsnest.social"> <a class="game" href="https://wizwar.kestrelsnest.social">
<div class="art"> <div class="art">
@@ -150,18 +153,26 @@
<div class="body"> <div class="body">
<h2>Wiz-War</h2> <h2>Wiz-War</h2>
<p class="pitch">Steal treasure. Blast through walls. Outwit your friends.</p> <p class="pitch">Steal treasure. Blast through walls. Outwit your friends.</p>
<p class="facts">2 to 6 players · an unofficial rebuild of Tom Jolly's 1993 board game</p> <p class="facts">2 to 6 players, or solo against the automaton · an unofficial rebuild of Tom Jolly's 1993 board game</p>
<span class="play">Play at wizwar.kestrelsnest.social →</span> <p class="length"></p>
<div class="go">
<span class="play">Play Wiz-War →</span>
<span class="site">wizwar.kestrelsnest.social</span>
</div>
</div> </div>
</a> </a>
<a class="game" href="https://hands.kestrelsnest.social"> <a class="game" href="https://hands.kestrelsnest.social">
<div class="art"><img class="fill hands" src="hands.png" alt="The Waving Hands share card: a column of gesture letters beside the title."></div> <div class="art"><img class="fill" src="hands.png" alt="Four turns of a Waving Hands duel as the game writes them: each row a turn, each letter one hand's gesture, and a spell named under the gesture that finished it."></div>
<div class="body"> <div class="body">
<h2>Waving Hands</h2> <h2>Waving Hands</h2>
<p class="pitch">Wizards duel with their hands, and the right run of gestures is a spell.</p> <p class="pitch">Wizards duel with their hands, and the right run of gestures is a spell.</p>
<p class="facts">2 to 12 players · Richard Bartle's pencil-and-paper duel, 1977</p> <p class="facts">2 to 12 players, or solo against a rival wizard · Richard Bartle's pencil-and-paper duel, 1977</p>
<span class="play">Play at hands.kestrelsnest.social →</span> <p class="length"></p>
<div class="go">
<span class="play">Play Waving Hands →</span>
<span class="site">hands.kestrelsnest.social</span>
</div>
</div> </div>
</a> </a>
@@ -170,8 +181,12 @@
<div class="body"> <div class="body">
<h2>Hnefatafl</h2> <h2>Hnefatafl</h2>
<p class="pitch">The Viking board game of a king breaking for safety and a ring of attackers closing in.</p> <p class="pitch">The Viking board game of a king breaking for safety and a ring of attackers closing in.</p>
<p class="facts">2 players · the Norse tafl game, by the Copenhagen rules or Linnaeus's 1732 Tablut</p> <p class="facts">2 players, or solo against the housecarl · the Norse tafl game, by the Copenhagen rules or Linnaeus's 1732 Tablut</p>
<span class="play">Play at tafl.kestrelsnest.social →</span> <p class="length"></p>
<div class="go">
<span class="play">Play Hnefatafl →</span>
<span class="site">tafl.kestrelsnest.social</span>
</div>
</div> </div>
</a> </a>
@@ -179,9 +194,13 @@
<div class="art"><img class="fill dip" src="dip.jpg" alt="Dip's map of Europe at the opening: the seven powers' armies and fleets on their home centers, each power's lands in its color."></div> <div class="art"><img class="fill dip" src="dip.jpg" alt="Dip's map of Europe at the opening: the seven powers' armies and fleets on their home centers, each power's lands in its color."></div>
<div class="body"> <div class="body">
<h2>Dip</h2> <h2>Dip</h2>
<p class="pitch">Seven powers share one map, and none of them has to keep its word.</p> <p class="pitch">Seven powers share one map, and none of them has to keep its word. Five fight on the Chromatic wheel, and ten on Youngstown Redux.</p>
<p class="facts">2 to 7 players · an unofficial rebuild of Allan B. Calhamer's 1959 Diplomacy</p> <p class="facts">2 to 7 players (5 on Chromatic, 10 on Youngstown Redux), or solo against the house's envoys · an unofficial rebuild of Allan B. Calhamer's 1959 Diplomacy</p>
<span class="play">Play at dip.kestrelsnest.social →</span> <p class="length"></p>
<div class="go">
<span class="play">Play Dip →</span>
<span class="site">dip.kestrelsnest.social</span>
</div>
</div> </div>
</a> </a>
@@ -191,9 +210,9 @@
<div> <div>
<h2>How a table works</h2> <h2>How a table works</h2>
<ul class="how"> <ul class="how">
<li><b>Open a table</b> and you get a four-letter code and a link. Send it to a friend, and begin once they sit down.</li> <li><b>Start a table</b> and you get a four-letter code and a link. Send it to a friend, and begin once they sit down.</li>
<li><b>No one home?</b> Every game can seat the house, whether an automaton, a housecarl, a rival wizard or an envoy, so you can play right away on your own.</li> <li><b>No one home?</b> Every game can seat the house, whether an automaton, a housecarl, a rival wizard or an envoy, so you can play right away on your own.</li>
<li><b>Nothing to sign up for.</b> Your browser holds your seat. Close the tab and come back, and the game is where you left it.</li> <li><b>Nothing to sign up for.</b> Your browser holds your seat. Come back in the same browser and the game is where you left it. On another device, use Transfer seat in any game to carry your seat over with four words.</li>
<li><b>Watchers welcome.</b> Anyone with the link can sit in the Peanut Gallery and, if the host allows, join the table talk.</li> <li><b>Watchers welcome.</b> Anyone with the link can sit in the Peanut Gallery and, if the host allows, join the table talk.</li>
<li><b>Something went wrong?</b> Every table has a report button that reaches the keeper with the exact moment attached.</li> <li><b>Something went wrong?</b> Every table has a report button that reaches the keeper with the exact moment attached.</li>
</ul> </ul>
@@ -208,12 +227,12 @@
</div> </div>
</div> </div>
<h2 style="margin-top:28px">The hosting</h2> <h2 style="margin-top:28px">The hosting</h2>
<p>The games are free and will stay free. They run on small servers that cost a few dollars a month, and anyone who wants to chip in toward the hosting can do so at <a href="https://ko-fi.com/kestrelsnest">ko-fi.com/kestrelsnest</a>. Every game stays whole either way.</p> <p>The games are free and will stay free. They run on small servers that cost a few dollars a month, and anyone who wants to chip in toward the hosting can do so at <a class="nowrap" href="https://ko-fi.com/kestrelsnest">ko-fi.com/kestrelsnest</a>. Every game stays whole either way.</p>
</div> </div>
</section> </section>
<footer> <footer>
<p>Wiz-War is Tom Jolly's design, and the rights rest with Steve Jackson Games. Waving Hands is Richard Bartle's. Diplomacy is Allan B. Calhamer's design, and its name is a trademark of Hasbro. Nothing here is official or endorsed by Steve Jackson Games, Richard Bartle or Hasbro. Hnefatafl belongs to everyone, and is more than a thousand years old.</p> <p>Wiz-War is Tom Jolly's design, and the rights rest with Steve Jackson Games. Waving Hands is Richard Bartle's. Hnefatafl belongs to everyone, and is more than a thousand years old. Diplomacy is Allan B. Calhamer's design, and its name is a trademark of Hasbro; the designers of Dip's Chromatic and Youngstown Redux maps are credited in Dip's How to play. Nothing here is official or endorsed by Steve Jackson Games, Richard Bartle or Hasbro.</p>
</footer> </footer>
</div> </div>