20 lines
1.4 KiB
HTML
20 lines
1.4 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8">
|
|
<style>html,body{margin:0;background:#222}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;width:2400px}figure{margin:0;position:relative;background:#000;overflow:hidden}img{width:100%;display:block}figcaption{position:absolute;left:0;bottom:0;right:0;padding:6px 10px;font:15px ui-monospace,monospace;color:#fff;background:linear-gradient(transparent,#000d)}</style></head><body>
|
|
<div class="grid" id=g></div><script>
|
|
const items=[
|
|
["01_centered-reference.svg","01 centred reference"],
|
|
["02_cubic-left-schlegel-right.svg","02 cubic L · schlegel R"],
|
|
["03_huge-cubic-bleed.svg","03 huge cubic (bleeds frame)"],
|
|
["04_huge-schlegel-bleed.svg","04 huge schlegel"],
|
|
["05_tiny-lots-of-paper.svg","05 tiny — small island"],
|
|
["06_e8-cluster-lower-right.svg","06 large E8 lower-right"],
|
|
["07_e8-quartet-at-corners.svg","07 E8 quartet at corners"],
|
|
["08_composition-shifted-upper-left.svg","08 shifted upper-left"],
|
|
["09_vertical-stack.svg","09 vertical stack"],
|
|
["10_triptych-corners.svg","10 triptych corners"],
|
|
["11_inverse-scales.svg","11 inverse scales"],
|
|
];
|
|
const base="http://localhost:8731/output/qft/sketch03/";const g=document.getElementById('g');
|
|
for(const[f,c]of items){const fig=document.createElement('figure');const im=document.createElement('img');im.src=base+f;const cap=document.createElement('figcaption');cap.textContent=c;fig.append(im,cap);g.append(fig);}
|
|
</script></body></html>
|