Story images: sources for landing-page cover and live screenshots

This commit is contained in:
pat
2026-09-25 17:58:24 +00:00
parent 1685918c11
commit a69711227e
22 changed files with 223 additions and 195 deletions
@@ -1,10 +1,9 @@
<!doctype html><html lang="en"><head><meta charset="utf-8">
<link rel="stylesheet" href="../styles.css"><style>
.wel{display:flex;gap:34px;align-items:center;padding:6px 6px 26px}
.bookwrap{flex:none;padding:6px 14px 14px 4px}
.book{width:184px;height:258px;border-radius:3px 8px 8px 3px;position:relative;box-shadow:10px 12px 0 -3px #efe9db,10px 12px 0 -2px #d6cdba,0 26px 40px -18px rgba(18,63,52,.5)}
.book .slot{position:absolute;inset:0;border-radius:3px 8px 8px 3px}
.book .slot .ph b{font-size:15px}
.wel{display:flex;gap:30px;align-items:center;padding:0 6px 22px}
.bookwrap{flex:none;margin:0;width:196px;text-align:center}
.bookwrap img{width:196px;display:block}
.bookwrap figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:-14px}
.wtxt h2{font-family:var(--display);font-weight:900;font-size:50px;letter-spacing:-.03em;line-height:1;color:var(--pine-deep)}
.wtxt .t{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.2;margin:14px 0 12px}
.wtxt .s{font-size:16px;line-height:1.5;color:var(--muted);max-width:25rem}
@@ -16,7 +15,7 @@
</style></head><body>
<div class="canvas" id="shot">
<div class="wel">
<div class="bookwrap"><div class="book"><div class="slot cover" data-src="../assets/cover" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Book cover goes here</b><small>Final cover · owner supplies</small></div></div></div></div>
<figure class="bookwrap"><img src="../assets-gen/cover-3d.png" alt=""><figcaption>Cover mockup</figcaption></figure>
<div class="wtxt">
<h2>Welcome</h2>
<p class="t">We Own AI — The New American Dream</p>