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

2026-09-25 17:58:24 +00:00
parent 1685918c11
commit a69711227e
22 changed files with 223 additions and 195 deletions
@@ -0,0 +1,30 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css"><style>
+.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
+.t{padding:16px 16px 18px;display:flex;flex-direction:column}
+.t .n{font-family:var(--mono);font-size:13px;color:var(--pine);letter-spacing:.08em}
+.t h3{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1.12;margin:10px 0 6px}
+.t p{font-size:14px;line-height:1.4;color:var(--muted)}
+</style></head><body><div class="canvas" id="shot"><p class="spec">The founding library</p><div class="tg"><div class="card t"><span class="n">01</span><h3>Real Estate</h3><p>Market briefs & listings, without leaking client data</p></div><div class="card t"><span class="n">02</span><h3>Financial Advisors</h3><p>Portfolio summaries that stay compliant & reviewed</p></div><div class="card t"><span class="n">03</span><h3>Fractional <span style="white-space:nowrap">C-Suite</span></h3><p>Board updates & plans with real escalation paths</p></div><div class="card t"><span class="n">04</span><h3>Higher Education</h3><p>Course & research workflows with academic integrity</p></div><div class="card t"><span class="n">05</span><h3>Communities</h3><p>Moderation & programming that respects members</p></div><div class="card t"><span class="n">06</span><h3>Technology</h3><p>Agent patterns, evals & the responsible defaults</p></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>