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
29 lines
1.4 KiB
HTML
29 lines
1.4 KiB
HTML
<!doctype html>
|
||
<!-- 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: #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: 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>
|
||
<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>
|
||
<p class="tag">Gary Gygax’s Dragonchess of 1985, free in the browser. Play a drake, or send a friend the link.</p>
|
||
<p class="site">wyrm.kestrelsnest.social</p>
|
||
</div>
|
||
</body>
|
||
</html>
|