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,24 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css"><style>.canvas{width:400px;height:400px;padding:0}.hs{position:absolute;inset:0}.hs .ph{border-radius:0;border-width:3px}.hs .ph b{font-size:20px}.hs .ph small{font-size:14px}.hs .ph svg{width:44px;height:44px}</style></head><body><div class="canvas" id="shot"><div class="slot hs" data-src="../assets/headshot-template" 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>Author photo goes here</b><small>800 × 800 px · square</small></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>