30 lines
1.8 KiB
HTML
30 lines
1.8 KiB
HTML
<!doctype html><html><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
body{margin:0}
|
|
.wrap{background:var(--ground-dark);padding:0;box-sizing:border-box;display:flex;font-family:var(--font-body)}
|
|
.panel{flex:1;height:180px;position:relative;overflow:hidden}
|
|
.panel::before{content:"";position:absolute;inset:0;background:url(../assets/texture-grain.svg);background-size:240px;opacity:.06;mix-blend-mode:screen}
|
|
.m{position:absolute;filter:invert(60%) sepia(18%) saturate(360%) brightness(95%);transition:opacity var(--dur-slow) var(--ease-out)}
|
|
.lab{position:absolute;left:16px;bottom:12px;font-family:var(--font-mono);font-size:11px;color:var(--fg-on-dark-2);z-index:2}
|
|
.divider{width:1px;background:var(--hairline-on-dark)}
|
|
/* loose, non-rigid placement */
|
|
.a1{width:96px;top:24px;left:34px;transform:rotate(-4deg);opacity:.26}
|
|
.a2{width:30px;top:104px;left:150px;transform:rotate(6deg);opacity:.3}
|
|
.a3{width:50px;top:54px;right:54px;opacity:.24}
|
|
.b1{width:80px;top:34px;left:60px;transform:rotate(3deg);opacity:.28}
|
|
.b2{width:34px;bottom:40px;left:40px;opacity:.28}
|
|
.b3{width:44px;top:30px;right:40px;opacity:.26}
|
|
</style></head><body>
|
|
<div class="wrap">
|
|
<div class="panel">
|
|
<img class="m a1" src="../assets/accent-ringdots.svg"><img class="m a2" src="../assets/accent-pipes.svg"><img class="m a3" src="../assets/accent-dots.svg">
|
|
<span class="lab">simple marks · loose placement · visit-three subtlety</span>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="panel">
|
|
<img class="m b1" src="../assets/accent-dots.svg"><img class="m b2" src="../assets/accent-concentric.svg"><img class="m b3" src="../assets/accent-ringdots.svg">
|
|
<span class="lab">non-rigid · throughout</span>
|
|
</div>
|
|
</div>
|
|
</body></html>
|