Spaces:
Runtime error
Runtime error
| {% extends "base.html.j2" %} | |
| {% set eyebrow = "A tour of the solar system" %} | |
| {% set pal = {"bg1":"#1a2230","bg2":"#2e3d52","ink":"#f0ead9","mute":"#c2c9cf","a":"#d9a441","b":"#7fa3b8","card":"rgba(240,234,217,.07)","line":"rgba(240,234,217,.2)","paper":"#f0ead9","paperink":"#1a2230","r":16} %} | |
| {% set fonts = {"h":"Playfair Display","b":"Outfit","m":"Space Mono","hw":700,"ht":"none","bt":"none"} %} | |
| {% set cycle = ["#d9a441","#c8745f","#7fa3b8","#8fb0a0","#b79ad6"] %} | |
| {% block bg %} | |
| <g fill="none" stroke="#f0ead9" stroke-opacity=".12" stroke-width="2"><circle cx="-120" cy="1100" r="620"/><circle cx="-120" cy="1100" r="900"/><circle cx="-120" cy="1100" r="1180"/><circle cx="-120" cy="1100" r="1460"/></g> | |
| <circle cx="-120" cy="1100" r="190" fill="#d9a441" opacity=".13"/> | |
| <circle cx="1556" cy="860" r="18" fill="#c8745f" opacity=".6"/><circle cx="1560" cy="1500" r="26" fill="#7fa3b8" opacity=".5"/> | |
| {% endblock %} | |
| {% block hero %} | |
| <circle cx="-40" cy="200" r="120" fill="#d9a441"/><circle cx="-40" cy="200" r="150" fill="#d9a441" opacity=".25"/> | |
| <path d="M0 340Q240 360 480 300" stroke="#f0ead9" stroke-opacity=".5" stroke-width="2" stroke-dasharray="3 9" fill="none"/> | |
| <circle cx="150" cy="120" r="22" fill="#b9ad90"/><circle cx="220" cy="270" r="34" fill="#c8745f"/><circle cx="300" cy="150" r="42" fill="#7fa3b8"/><circle cx="305" cy="145" r="42" fill="none" stroke="#f0ead9" stroke-opacity=".0"/> | |
| <g transform="translate(400 250)"><ellipse rx="70" ry="18" fill="none" stroke="#e6d3a1" stroke-width="7" transform="rotate(-18)"/><circle r="40" fill="#d9a441"/><path d="M-72 10Q0 34 72 -6" stroke="#e6d3a1" stroke-width="7" fill="none" transform="rotate(-18)"/></g> | |
| <circle cx="420" cy="80" r="26" fill="#8fb0a0"/> | |
| {% endblock %} | |
| {% block css %} | |
| .ig h1{font-size:70px} | |
| .sp{display:flex;gap:18px;flex:none;align-items:stretch} | |
| .sp .pl{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px} | |
| .sp .og{height:140px;display:flex;align-items:flex-end;margin-bottom:-34px;z-index:1} | |
| .sp .orb{position:relative;display:grid;place-items:center;border-radius:50%;font-family:var(--fh);font-weight:700;font-size:42px;color:#1a2230;background:radial-gradient(circle at 32% 28%,#fff9,var(--c) 62%);box-shadow:inset -14px -12px 0 rgba(0,0,0,.2)} | |
| .sp .card{width:100%;padding:48px 18px 20px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);flex:1} | |
| .sp b{display:block;font-family:var(--fh);font-weight:700;font-size:31px;margin-bottom:8px;line-height:1.1} | |
| .sp p{font-size:22px;line-height:1.34;color:var(--mute)} | |
| .sm{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;row-gap:22px;flex:none} | |
| .sm .stop{position:relative;padding-top:44px} | |
| .sm .stop:before{content:"";position:absolute;left:0;right:-24px;top:14px;height:8px;border-radius:4px;background:var(--c);opacity:.85} | |
| .sm .stop:nth-child(4n):before{right:0} | |
| .sm .stop:after{content:"";position:absolute;left:6px;top:7px;width:22px;height:22px;border-radius:50%;background:#f0ead9;border:6px solid var(--c);box-sizing:border-box;width:22px;height:22px} | |
| .sm small{display:block;font-family:var(--fm);font-size:19px;letter-spacing:.1em;color:var(--c);margin-bottom:3px} | |
| .sm b{display:block;font-family:var(--fh);font-weight:700;font-size:31px;margin-bottom:5px} | |
| .sm p{font-size:22px;line-height:1.32;color:var(--mute)} | |
| {% endblock %} | |
| {% block body %}{% set n = c["items"]|length %}{% set sizes = [124, 100, 138, 92, 116] %} | |
| <section><div class="lab">{{ c.items_label }}</div> | |
| <div class="sp"> | |
| {% for e in c["items"] %}{% set d = sizes[loop.index0] %} | |
| <div class="pl" style="--c:{{ cycle[loop.index0 % cycle|length] }}"><div class="og"><div class="orb" style="width:{{ d }}px;height:{{ d }}px">{{ loop.index }}</div></div><div class="card"><b>{{ e.name }}</b><p>{{ e.text }}</p></div></div> | |
| {% endfor %} | |
| </div></section> | |
| <section><div class="lab">{{ c.steps_label }}</div> | |
| <div class="sm"> | |
| {% for e in c.steps %}<div class="stop" style="--c:{{ cycle[loop.index0 % cycle|length] }}"><small>Stop {{ loop.index }}</small><b>{{ e.name }}</b><p>{{ e.text }}</p></div>{% endfor %} | |
| </div></section> | |
| {% endblock %} | |