Spaces:
Runtime error
Runtime error
| {% extends "base.html.j2" %} | |
| {% set eyebrow = "Field notes from the galaxy" %} | |
| {% set pal = {"bg1":"#1c1830","bg2":"#3a2f57","ink":"#ece7f3","mute":"#c1b9d0","a":"#b79ad6","b":"#7fa3b8","card":"rgba(236,231,243,.06)","line":"rgba(183,154,214,.28)","paper":"#e9e2f2","paperink":"#241f33","r":26} %} | |
| {% set fonts = {"h":"Cormorant Garamond","b":"Outfit","m":"Space Mono","hw":700,"ht":"none","bt":"none"} %} | |
| {% set cycle = ["#b79ad6","#7fa3b8","#d9a7b8","#8fb8a8","#c9b27a"] %} | |
| {% block bg %} | |
| <defs><radialGradient id="neb" cx=".5" cy=".5"><stop offset="0" stop-color="#b79ad6" stop-opacity=".45"/><stop offset="1" stop-color="#b79ad6" stop-opacity="0"/></radialGradient> | |
| <radialGradient id="neb2" cx=".5" cy=".5"><stop offset="0" stop-color="#7fa3b8" stop-opacity=".35"/><stop offset="1" stop-color="#7fa3b8" stop-opacity="0"/></radialGradient></defs> | |
| <circle cx="1300" cy="300" r="520" fill="url(#neb)"/><circle cx="250" cy="1800" r="560" fill="url(#neb2)"/> | |
| <g fill="none" stroke="#b79ad6" stroke-opacity=".22" stroke-width="2"><ellipse cx="1360" cy="1250" rx="620" ry="190" transform="rotate(-24 1360 1250)"/><ellipse cx="1360" cy="1250" rx="440" ry="130" transform="rotate(-24 1360 1250)"/><ellipse cx="200" cy="2020" rx="540" ry="150" transform="rotate(18 200 2020)"/></g> | |
| {% endblock %} | |
| {% block hero %} | |
| <defs><radialGradient id="core" cx=".5" cy=".5"><stop offset="0" stop-color="#f4ecff"/><stop offset=".25" stop-color="#b79ad6"/><stop offset="1" stop-color="#b79ad6" stop-opacity="0"/></radialGradient></defs> | |
| <g transform="translate(240 200)" fill="none" stroke-linecap="round"> | |
| <ellipse rx="210" ry="70" transform="rotate(-20)" stroke="#b79ad6" stroke-width="3" opacity=".9"/><ellipse rx="160" ry="52" transform="rotate(-20)" stroke="#7fa3b8" stroke-width="3"/> | |
| <ellipse rx="110" ry="36" transform="rotate(-20)" stroke="#d9a7b8" stroke-width="3"/><ellipse rx="60" ry="20" transform="rotate(-20)" stroke="#c9b27a" stroke-width="3"/> | |
| <path d="M-200 60C-120 -150 120 -190 210 -40" stroke="#b79ad6" stroke-width="2" stroke-dasharray="2 10" opacity=".8"/> | |
| <circle r="86" fill="url(#core)" stroke="none"/> | |
| <g fill="#ece7f3" stroke="none"><circle cx="-190" cy="64" r="9" fill="#7fa3b8"/><circle cx="150" cy="-70" r="7" fill="#d9a7b8"/><circle cx="196" cy="42" r="10" fill="#c9b27a"/><circle cx="-60" cy="-110" r="5"/><circle cx="90" cy="120" r="6"/></g> | |
| </g> | |
| {% endblock %} | |
| {% block css %} | |
| .ig h1{font-size:84px;line-height:1} | |
| .gi{display:grid;grid-template-columns:76px 300px 1fr;gap:24px;align-items:center;width:1090px;min-height:104px;padding:14px 30px 14px 22px;border-radius:60px;background:var(--card);border:1px solid var(--line);margin-bottom:14px;position:relative} | |
| .gi:before{content:"";position:absolute;left:-40px;top:50%;width:40px;height:2px;background:linear-gradient(90deg,transparent,var(--c))} | |
| .gi .mk{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:var(--fh);font-weight:700;font-size:32px;color:var(--bg1);background:radial-gradient(circle at 35% 30%,#fff8,var(--c) 60%);box-shadow:0 0 0 7px rgba(183,154,214,.16),0 0 30px var(--c)} | |
| .gi b{font-family:var(--fh);font-weight:700;font-size:36px;line-height:1.05} | |
| .gi p{font-size:24px;line-height:1.3;color:var(--mute)} | |
| .gc{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;row-gap:20px;flex:none} | |
| .gs{position:relative;padding-top:34px} | |
| .gs:before{content:"";position:absolute;left:0;right:-28px;top:9px;height:1px;background:var(--line)} | |
| .gs:nth-child(4n):before{right:0} | |
| .gs:after{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px rgba(183,154,214,.15),0 0 18px var(--c)} | |
| .gs small{display:block;font-family:var(--fm);font-size:19px;letter-spacing:.14em;color:var(--c);margin-bottom:4px} | |
| .gs b{display:block;font-family:var(--fh);font-weight:700;font-size:34px;margin-bottom:6px} | |
| .gs p{font-size:22px;line-height:1.32;color:var(--mute)} | |
| {% endblock %} | |
| {% block body %}<section><div class="lab">{{ c.items_label }}</div> | |
| <div class="gitems" style="flex:none"> | |
| {% for e in c["items"] %}<div class="gi" style="--c:{{ cycle[loop.index0 % cycle|length] }};margin-left:{{ loop.index0 * 56 + 30 }}px"><div class="mk">{{ loop.index }}</div><b>{{ e.name }}</b><p>{{ e.text }}</p></div>{% endfor %} | |
| </div></section> | |
| <section><div class="lab">{{ c.steps_label }}</div> | |
| <div class="gc"> | |
| {% for e in c.steps %}<div class="gs" style="--c:{{ cycle[loop.index0 % cycle|length] }}"><small>{{ '%02d'|format(loop.index) }}</small><b>{{ e.name }}</b><p>{{ e.text }}</p></div>{% endfor %} | |
| </div></section> | |
| {% endblock %} | |