32 lines
3.2 KiB
HTML
32 lines
3.2 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
||
<link rel="stylesheet" href="../styles.css"><style>
|
||
.q{display:flex;gap:18px;align-items:center;padding:18px 20px}
|
||
.q+.q{margin-top:12px}
|
||
.qp{width:84px;height:84px;border-radius:999px;flex:none}
|
||
.qp .ph{border-width:2px;gap:2px}.qp .ph svg{width:20px;height:20px}.qp .ph b{font-size:12px}.qp .ph small{font-size:10px}
|
||
.qq{font-family:var(--display);font-style:italic;font-size:21px;letter-spacing:-.01em;color:#8d8579;line-height:1.3}
|
||
.who{font-size:14.5px;color:var(--muted);margin-top:6px}
|
||
.who b{color:var(--ink)}
|
||
</style></head><body><div class="canvas" id="shot"><div class="card q"><div class="slot qp" data-src="../assets/reader-1" 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>Photo</b><small>400 × 400</small></div></div><div class="qt"><p class="qq">“Early reader quote 1 goes here.”</p><p class="who"><b>Name goes here</b> · Role and firm</p></div></div><div class="card q"><div class="slot qp" data-src="../assets/reader-2" 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>Photo</b><small>400 × 400</small></div></div><div class="qt"><p class="qq">“Early reader quote 2 goes here.”</p><p class="who"><b>Name goes here</b> · Role and firm</p></div></div><div class="card q"><div class="slot qp" data-src="../assets/reader-3" 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>Photo</b><small>400 × 400</small></div></div><div class="qt"><p class="qq">“Early reader quote 3 goes here.”</p><p class="who"><b>Name goes here</b> · Role and firm</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> |