Spaces:
Runtime error
Runtime error
| {% extends "base.html.j2" %} | |
| {% set eyebrow = "Observation log" %} | |
| {% set pal = {"bg1":"#102427","bg2":"#1d4144","ink":"#ece8da","mute":"#b9c9c4","a":"#8fc2b4","b":"#d6b66a","card":"rgba(236,232,218,.06)","line":"rgba(143,194,180,.3)","paper":"#ece8da","paperink":"#102427","r":14} %} | |
| {% set fonts = {"h":"Playfair Display","b":"Outfit","m":"Space Mono","hw":700,"ht":"none","bt":"none"} %} | |
| {% set cycle = ["#8fc2b4","#d6b66a","#a9b9d6","#d68f7a","#8fc2b4"] %} | |
| {% block bg %} | |
| <g fill="none" stroke="#8fc2b4" stroke-opacity=".14" stroke-width="2"><circle cx="1500" cy="300" r="260"/><circle cx="1500" cy="300" r="380"/><circle cx="1500" cy="300" r="500"/><path d="M1500 -200V800M1000 300H2000"/></g> | |
| <g stroke="#d6b66a" stroke-opacity=".35" stroke-width="2" fill="#d6b66a"><path d="M1090 190L1180 260L1260 220L1330 330" fill="none"/><circle cx="1090" cy="190" r="6"/><circle cx="1180" cy="260" r="8"/><circle cx="1260" cy="220" r="6"/><circle cx="1330" cy="330" r="7"/></g> | |
| {% endblock %} | |
| {% block hero %} | |
| <g transform="translate(240 240) rotate(-32)"><rect x="-130" y="-34" width="250" height="68" rx="8" fill="#d6b66a"/><rect x="-170" y="-26" width="46" height="52" rx="6" fill="#8fc2b4"/><rect x="100" y="-46" width="40" height="92" rx="6" fill="#ece8da"/><path d="M-60 -34V34M0 -34V34M60 -34V34" stroke="#102427" stroke-width="3"/></g> | |
| <path d="M240 250L170 390M240 250L320 390M240 250V392" stroke="#ece8da" stroke-width="7" stroke-linecap="round"/> | |
| <circle cx="380" cy="70" r="30" fill="#ece8da" opacity=".9"/><circle cx="392" cy="62" r="26" fill="#102427"/> | |
| <g fill="#d6b66a"><path d="M70 90l6 -16 6 16 16 6 -16 6 -6 16 -6 -16 -16 -6z"/><path d="M430 200l4 -11 4 11 11 4 -11 4 -4 11 -4 -11 -11 -4z"/></g> | |
| {% endblock %} | |
| {% block css %} | |
| .ig h1{font-size:68px} | |
| .ob{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:none} | |
| .ob .pl{position:relative;padding:20px 26px 22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)} | |
| .ob .pl:last-child:nth-child(even){grid-column:span 2} | |
| .ob .pl small{font-family:var(--fm);font-size:18px;letter-spacing:.2em;color:var(--c);text-transform:uppercase} | |
| .ob .pl b{display:block;font-family:var(--fh);font-weight:700;font-style:italic;font-size:32px;margin:4px 0 6px} | |
| .ob .pl p{font-size:23px;line-height:1.34;color:var(--mute)} | |
| .ob .feat{grid-column:span 2;display:grid;grid-template-columns:130px 1fr;gap:6px 28px;align-items:center;padding:26px 34px;background:linear-gradient(100deg,rgba(143,194,180,.18),rgba(143,194,180,.04));border-color:var(--c)} | |
| .ob .feat .big{grid-row:span 3;font-family:var(--fh);font-weight:700;font-size:118px;line-height:1;color:var(--c);opacity:.9} | |
| .ob .feat b{font-size:42px;margin:0}.ob .feat p{font-size:26px} | |
| .ed{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;flex:none} | |
| .ed .li{display:grid;grid-template-columns:80px 1fr;gap:0 16px;padding:12px 0 14px;border-bottom:1px solid var(--line)} | |
| .ed .li .n{grid-row:span 2;font-family:var(--fh);font-weight:700;font-size:58px;line-height:.95;color:var(--c)} | |
| .ed .li b{font-family:var(--fh);font-weight:700;font-size:29px} | |
| .ed .li p{font-size:22px;line-height:1.3;color:var(--mute)} | |
| {% endblock %} | |
| {% block body %}<section><div class="lab">{{ c.items_label }}</div> | |
| <div class="ob"> | |
| {% for e in c["items"] %}{% if loop.first %} | |
| <div class="pl feat" style="--c:{{ cycle[0] }}"><div class="big">1</div><small>The main idea</small><b>{{ e.name }}</b><p>{{ e.text }}</p></div> | |
| {% else %} | |
| <div class="pl" style="--c:{{ cycle[loop.index0 % cycle|length] }}"><small>Plate {{ loop.index }}</small><b>{{ e.name }}</b><p>{{ e.text }}</p></div> | |
| {% endif %}{% endfor %} | |
| </div></section> | |
| <section><div class="lab">{{ c.steps_label }}</div> | |
| <div class="ed"> | |
| {% for e in c.steps %}<div class="li" style="--c:{{ cycle[loop.index0 % cycle|length] }}"><div class="n">{{ loop.index }}</div><b>{{ e.name }}</b><p>{{ e.text }}</p></div>{% endfor %} | |
| </div></section> | |
| {% endblock %} | |