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:
1 parent
5099cf67e7
commit
3c453c86b2
3 files changed
+10
-8
No files matched your search
+10
-8
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user