| 1 | {{define "surface"}}bill-page{{end}} |
| 2 | {{define "title"}}{{say "index.headline"}}{{end}} |
| 3 | |
| 4 | {{/* ── The pills ────────────────────────────────────────────────────────── |
| 5 | Drawn, not typeset: authored SVG in one stroke weight, wobbled so they |
| 6 | read as sharpie on stock rather than as a vector shape. Each path |
| 7 | overshoots its corner slightly, which is what a marker does when the |
| 8 | hand does not stop exactly on the join. |
| 9 | |
| 10 | They are solid where everything else in the system multiplies, and that |
| 11 | is the point of the distinction: a marker drawn ON paper does not |
| 12 | overprint with the ink already printed under it. It is a third pen, not |
| 13 | a third press ink. |
| 14 | |
| 15 | "Fully-pilled" was already the red-pill reference; the pills only make |
| 16 | the copy literal. The middle option is a pill snapped in half rather |
| 17 | than a purple one, because purple says "a blend of both positions" and |
| 18 | a broken pill says "swallowed neither, and took it apart to look |
| 19 | inside" — which is the group this page exists to find. */}} |
| 20 | |
| 21 | {{define "pill-blue"}} |
| 22 | <svg class="pill" viewBox="0 0 140 64" aria-hidden="true" focusable="false"> |
| 23 | <path d="M37 8 C20 8.5 8.5 19 8 31.5 C7.6 44.5 20 55.5 36.5 56 L103 56.4 |
| 24 | C120 56 132 45 131.5 31.6 C131 19 119.5 8.2 103.5 8 Z" |
| 25 | fill="var(--pill-blue)" stroke="var(--pill-blue-line)" stroke-width="5" |
| 26 | stroke-linejoin="round"/> |
| 27 | <path d="M70.5 11 C69.4 24 70.8 40 69.8 53.5" stroke="var(--pill-blue-line)" |
| 28 | stroke-width="4.5" stroke-linecap="round" fill="none"/> |
| 29 | </svg> |
| 30 | {{end}} |
| 31 | |
| 32 | {{define "pill-broken"}} |
| 33 | <svg class="pill" viewBox="0 0 140 64" aria-hidden="true" focusable="false"> |
| 34 | <g transform="rotate(-5 62 32)"> |
| 35 | <path d="M37 8 C20 8.5 8.5 19 8 31.5 C7.6 44.5 20 55.5 36.5 56 L64 56.3 |
| 36 | L57 45 L66 34 L56.5 22 L63.5 8.2 Z" |
| 37 | fill="var(--pill-blue)" stroke="var(--pill-blue-line)" stroke-width="5" |
| 38 | stroke-linejoin="round"/> |
| 39 | </g> |
| 40 | <g transform="rotate(6 96 32)"> |
| 41 | <path d="M79 8.2 L86 22 L76.5 34 L85.5 45 L78.5 56.3 L103 56.4 |
| 42 | C120 56 132 45 131.5 31.6 C131 19 119.5 8.2 103.5 8 Z" |
| 43 | fill="var(--pill-red)" stroke="var(--pill-red-line)" stroke-width="5" |
| 44 | stroke-linejoin="round"/> |
| 45 | </g> |
| 46 | </svg> |
| 47 | {{end}} |
| 48 | |
| 49 | {{define "pill-red"}} |
| 50 | <svg class="pill" viewBox="0 0 140 64" aria-hidden="true" focusable="false"> |
| 51 | <path d="M37 8 C20 8.5 8.5 19 8 31.5 C7.6 44.5 20 55.5 36.5 56 L103 56.4 |
| 52 | C120 56 132 45 131.5 31.6 C131 19 119.5 8.2 103.5 8 Z" |
| 53 | fill="var(--pill-red)" stroke="var(--pill-red-line)" stroke-width="5" |
| 54 | stroke-linejoin="round"/> |
| 55 | <path d="M70.5 11 C69.4 24 70.8 40 69.8 53.5" stroke="var(--pill-red-line)" |
| 56 | stroke-width="4.5" stroke-linecap="round" fill="none"/> |
| 57 | </svg> |
| 58 | {{end}} |
| 59 | |
| 60 | {{define "content"}} |
| 61 | <div class="bill"> |
| 62 | |
| 63 | <div class="bill__top"> |
| 64 | {{/* The second ink crosses the first. The stripe is cyan multiplied into |
| 65 | the yellow stock, which is where the green comes from; where it |
| 66 | passes over the blue letters the ink builds and darkens, and it sits |
| 67 | a couple of pixels off true because a two-colour job never registers |
| 68 | perfectly. The press does this, not a gradient. */}} |
| 69 | <h1 class="bill__shout">{{say "index.headline"}}</h1> |
| 70 | |
| 71 | <div class="bill__body"> |
| 72 | {{range .Lede}}<p>{{.}}</p>{{end}} |
| 73 | </div> |
| 74 | </div> |
| 75 | |
| 76 | {{/* The strip sits at the foot of the sheet, which is where a bill's |
| 77 | tear-offs are, and the imprint shares its head-rule so nothing hangs |
| 78 | below it. Taking a tab IS the primary action — there is no button on |
| 79 | this page, because the sort happens before anyone is asked for an |
| 80 | address. |
| 81 | |
| 82 | Each tab carries the address it leads to and nothing else, because |
| 83 | that is what a tear-off tab is FOR: the thing you walk away holding. |
| 84 | Deliberately not numbered — numbering three positions implies a rank, |
| 85 | and these three are equal by design. */}} |
| 86 | <section class="tear"> |
| 87 | <div class="tear__head"> |
| 88 | <p class="tear__instruction">{{say "tear.instruction"}}</p> |
| 89 | <p class="bill__slug"> |
| 90 | <a class="bill__out" href="https://carlosframework.com" |
| 91 | target="_blank" rel="noopener noreferrer">{{say "index.link"}}</a> |
| 92 | </p> |
| 93 | </div> |
| 94 | <div class="tear__perf"></div> |
| 95 | <div class="tear__tabs"> |
| 96 | {{range .Choices}} |
| 97 | <a class="tab" href="/{{.Slug}}"> |
| 98 | {{if eq .Slug "no-ai"}}{{template "pill-blue"}} |
| 99 | {{else if eq .Slug "all-in"}}{{template "pill-red"}} |
| 100 | {{else}}{{template "pill-broken"}}{{end}} |
| 101 | <span class="tab__word">{{.Label}}</span> |
| 102 | <span class="tab__addr">movement.bdj.oncarlos.com/{{.Slug}}</span> |
| 103 | </a> |
| 104 | {{end}} |
| 105 | </div> |
| 106 | </section> |
| 107 | |
| 108 | </div> |
| 109 | {{end}} |
| 110 | |
amadan