Add Kickstarter story image HTML sources and build scripts

2026-09-25 17:36:23 +00:00
parent e5adccf279
commit d05d283d6d
54 changed files with 3447 additions and 0 deletions
@@ -0,0 +1,37 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css"><style>
+.lane{padding:16px 18px 18px}
+.lane+.lane{margin-top:14px}
+.lh{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px dashed var(--line-2);margin-bottom:14px}
+.ico.lhi{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--pine);color:#fff}
+.lh h3{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1.1}
+.lh p{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:3px}
+.steps{display:flex;align-items:flex-start}
+.stp{flex:1;min-width:0;text-align:center;padding:0 4px}
+.ar{flex:none;width:18px;height:18px;color:var(--line-2);margin-top:14px}
+.ico.ci{width:46px;height:46px;padding:11px;border-radius:999px;background:var(--pine-wash);border:1px solid var(--pine-tint);display:block;margin:0 auto 8px}
+.stp b{display:block;font-size:15.5px;font-weight:700}
+.stp p{font-size:13.5px;line-height:1.38;color:var(--muted);margin-top:3px}
+</style></head><body><div class="canvas" id="shot"><div class="card lane"><div class="lh"><span class="ico lhi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="m3.8 7 8.2 6 8.2-6"/></svg></span><div><h3>Digital rewards</h3><p>Arrive by email</p></div></div><div class="steps n3"><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="m3.8 7 8.2 6 8.2-6"/></svg></span><b>Email</b><p>To the address on your Kickstarter account</p></div><span class="ar"><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="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="12" rx="1.6"/><path d="M2 19.5h20"/><path d="M8 8.5h8M8 11.5h5"/></svg></span><b>Library access</b><p>Within about 14 days of a successful campaign</p></div><span class="ar"><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="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><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="M12 6.5C9.5 5 7 4.6 3.5 5v13c3.5-.4 6 0 8.5 1.5 2.5-1.5 5-1.9 8.5-1.5V5c-3.5-.4-6 0-8.5 1.5z"/><path d="M12 6.5v13"/></svg></span><b>eBook</b><p>January 2027</p></div></div></div><div class="card lane"><div class="lh"><span class="ico lhi"><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="M3.5 7.5 12 3.5l8.5 4v9L12 20.5l-8.5-4z"/><path d="M3.5 7.5 12 11.5l8.5-4M12 11.5v9"/></svg></span><div><h3>Signed paperbacks</h3><p>Ship in February 2027</p></div></div><div class="steps n4"><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4V3h6v1"/><path d="M8.5 9.5h7M8.5 13h7M8.5 16.5h4"/></svg></span><b>Survey</b><p>Kickstarter’s Pledge Manager asks for your address and charges shipping and any taxes</p></div><span class="ar"><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="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><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="M7 9V4h10v5"/><rect x="3.5" y="9" width="17" height="8" rx="2"/><path d="M7 14h10v6H7z"/><path d="M17 12h.01"/></svg></span><b>Printing</b></div><span class="ar"><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="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><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 20c2.5 0 3.5-2 5-2s2 1.5 3.5 1.5"/><path d="m14 4.5 5.5 5.5L11 18.5l-6 1.5 1.5-6z"/><path d="m12.5 6 5.5 5.5"/></svg></span><b>Signing</b><p>January 2027</p></div><span class="ar"><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="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><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="M2.5 6.5h11v9h-11z"/><path d="M13.5 9.5h4l3 3.5v2.5h-7"/><circle cx="6.5" cy="17" r="1.8"/><circle cx="17" cy="17" r="1.8"/></svg></span><b>Shipping</b><p>February 2027</p></div></div></div></div>
+<script>
+window.__ready = (async () => {
+  let empty = 0;
+  for (const s of document.querySelectorAll('.slot[data-src]')) {
+    let ok = false;
+    for (const ext of ['jpg', 'jpeg', 'png', 'webp']) {
+      const url = s.dataset.src + '.' + ext;
+      ok = await new Promise(r => { const i = new Image(); i.onload = () => r(true); i.onerror = () => r(false); i.src = url; });
+      if (ok) { s.style.backgroundImage = 'url("' + url + '")'; s.classList.add('filled'); break; }
+    }
+    if (!ok) empty++;
+  }
+  await document.fonts.ready;
+  for (const el of document.querySelectorAll('[data-fit]')) {
+    let fs = parseFloat(getComputedStyle(el).fontSize);
+    const max = el.dataset.fit ? parseFloat(el.dataset.fit) : el.parentElement.clientWidth;
+    while (el.scrollWidth > max && fs > 10) { fs -= 0.5; el.style.fontSize = fs + 'px'; }
+  }
+  if (window.afterLayout) await window.afterLayout();
+  return empty;
+})();
+</script></body></html>