The share sheet shows the glass board at the opening, from the corner, in place of two cropped flat boards

docs/og-card.html is rebuilt around docs/og-board.png, the shot the card was made from, and says how to take it again.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CCLa2PaEeCj8njQZSWGqHx
This commit is contained in:
Eric WagonerandClaude Fable 5.1 committed 2026-10-27 17:35:48 -04:00
1 parent 5099cf67e7
commit 3c453c86b2
3 files changed
+10 -8

No files matched your search

+10 -8
View File
@@ -1,21 +1,23 @@
<!doctype html>
<!-- The share card, 1200 by 630. Open it with the site running at localhost:5173 and screenshot the body at 1200 by 630 into static/. -->
<!-- The share card, 1200 by 630. og-board.png beside it is the glass board at
the opening, shot from the corner on the told game with the canvas
widened to 2400 pixels and the camera one wheel step back, then cropped
to 650 by 630. Open this file and screenshot the body into static/og.png. -->
<html>
<head>
<meta charset="utf-8" />
<style>
body { margin: 0; width: 1200px; height: 630px; background: #121a20; color: #e9e2d2; font-family: 'Iowan Old Style', Georgia, serif; overflow: hidden; position: relative; }
.boards { position: absolute; left: 56px; top: 44px; width: 480px; height: 542px; overflow: hidden; border-radius: 8px; border: 1px solid rgba(233, 226, 210, 0.2); }
.boards img { width: 480px; display: block; }
.words { position: absolute; left: 600px; top: 120px; width: 540px; }
body { margin: 0; width: 1200px; height: 630px; background: #1c2830; color: #e9e2d2; font-family: 'Iowan Old Style', Georgia, serif; overflow: hidden; position: relative; }
.board { position: absolute; left: 0; top: 0; width: 650px; height: 630px; display: block; }
.words { position: absolute; left: 672px; top: 112px; width: 490px; }
h1 { font-size: 110px; font-weight: 300; margin: 0; line-height: 1; letter-spacing: -0.01em; }
.pitch { font-size: 30px; font-style: italic; margin: 22px 0 0; line-height: 1.3; }
.tag { font-size: 23px; color: #98a4ab; margin: 26px 0 0; line-height: 1.4; }
.pitch { font-size: 29px; font-style: italic; margin: 22px 0 0; line-height: 1.3; }
.tag { font-size: 22px; color: #a3aeb4; margin: 26px 0 0; line-height: 1.4; }
.site { font-size: 22px; color: #f0a53a; margin: 34px 0 0; letter-spacing: 0.04em; }
</style>
</head>
<body>
<div class="boards"><img src="http://localhost:5173/guide/boards.png" alt="" /></div>
<img class="board" src="og-board.png" alt="" />
<div class="words">
<h1>Wyrm</h1>
<p class="pitch">Chess on three boards, with a Dragon in the air above your King and a Basilisk in the earth below.</p>