58 lines
5.1 KiB
HTML
58 lines
5.1 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Traces of the Invisible — a catalogue of compositions</title>
|
|
<style>
|
|
html,body{margin:0;background:#17150f;color:#cabfa6}
|
|
body{padding:60px 54px 72px;font:12px/1.5 ui-monospace,Menlo,monospace}
|
|
.head{letter-spacing:.34em;text-transform:uppercase;font-size:14px;color:#9fb7af;margin:0 0 4px}
|
|
.sub{color:#6f6a5c;font-size:12px;margin:0 0 40px;letter-spacing:.06em}
|
|
.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:46px 38px}
|
|
figure{margin:0}
|
|
.mat{background:#f3ecdb;padding:14px;box-shadow:0 2px 0 #0008,0 20px 44px -20px #000c;border:1px solid #000}
|
|
.mat img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#fff}
|
|
figcaption{margin-top:10px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
|
|
.cat{color:#9fb7af;letter-spacing:.1em}.src{color:#6f6a5c;font-style:italic}
|
|
.ttl{color:#cabfa6;text-align:center;flex:1}
|
|
</style></head><body>
|
|
<p class="head">Traces of the Invisible — a catalogue of compositions</p>
|
|
<p class="sub">the grammar of great pictures, applied to one instrument · 20 plates</p>
|
|
<div class="wall">
|
|
<figure><div class="mat"><img src="01_great-wave_v1.svg"></div>
|
|
<figcaption><span class="cat">01</span><span class="ttl">Great Wave</span><span class="src">Hokusai</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="02_great-wave_v2.svg"></div>
|
|
<figcaption><span class="cat">02</span><span class="ttl">Great Wave</span><span class="src">Hokusai</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="03_great-wave_v3.svg"></div>
|
|
<figcaption><span class="cat">03</span><span class="ttl">Great Wave</span><span class="src">Hokusai</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="04_monk-by-sea_v1.svg"></div>
|
|
<figcaption><span class="cat">04</span><span class="ttl">Monk by the Sea</span><span class="src">Friedrich</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="05_monk-by-sea_v2.svg"></div>
|
|
<figcaption><span class="cat">05</span><span class="ttl">Monk by the Sea</span><span class="src">Friedrich</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="06_rothko_v1.svg"></div>
|
|
<figcaption><span class="cat">06</span><span class="ttl">Colour Fields</span><span class="src">Rothko</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="07_rothko_v2.svg"></div>
|
|
<figcaption><span class="cat">07</span><span class="ttl">Colour Fields</span><span class="src">Rothko</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="08_turner_v1.svg"></div>
|
|
<figcaption><span class="cat">08</span><span class="ttl">Atmospheric Dissolution</span><span class="src">Turner</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="09_turner_v2.svg"></div>
|
|
<figcaption><span class="cat">09</span><span class="ttl">Atmospheric Dissolution</span><span class="src">Turner</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="10_turner_v3.svg"></div>
|
|
<figcaption><span class="cat">10</span><span class="ttl">Atmospheric Dissolution</span><span class="src">Turner</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="11_ma_v1.svg"></div>
|
|
<figcaption><span class="cat">11</span><span class="ttl">Ma · Negative Space</span><span class="src">Hiroshige</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="12_ma_v2.svg"></div>
|
|
<figcaption><span class="cat">12</span><span class="ttl">Ma · Negative Space</span><span class="src">Hiroshige</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="13_suprematist_v1.svg"></div>
|
|
<figcaption><span class="cat">13</span><span class="ttl">Single Form on Void</span><span class="src">Malevich</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="14_suprematist_v2.svg"></div>
|
|
<figcaption><span class="cat">14</span><span class="ttl">Single Form on Void</span><span class="src">Malevich</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="15_golden-thirds_v1.svg"></div>
|
|
<figcaption><span class="cat">15</span><span class="ttl">Golden Section</span><span class="src">Renaissance φ</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="16_golden-thirds_v2.svg"></div>
|
|
<figcaption><span class="cat">16</span><span class="ttl">Golden Section</span><span class="src">Renaissance φ</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="17_golden-thirds_v3.svg"></div>
|
|
<figcaption><span class="cat">17</span><span class="ttl">Golden Section</span><span class="src">Renaissance φ</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="18_wright_v1.svg"></div>
|
|
<figcaption><span class="cat">18</span><span class="ttl">Cantilevered Horizontal</span><span class="src">Frank Lloyd Wright</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="19_wright_v2.svg"></div>
|
|
<figcaption><span class="cat">19</span><span class="ttl">Cantilevered Horizontal</span><span class="src">Frank Lloyd Wright</span></figcaption></figure>
|
|
<figure><div class="mat"><img src="20_wright_v3.svg"></div>
|
|
<figcaption><span class="cat">20</span><span class="ttl">Cantilevered Horizontal</span><span class="src">Frank Lloyd Wright</span></figcaption></figure>
|
|
</div></body></html> |