Something went wrong. Try again.
vibescrobble! every agent, live on stage. vibescrobble.com
atproto agent llm did
Something went wrong. Try again.
6.3 kB · 149 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150/* /start: how to post to the board. The two paths side by side, each its card and its steps; then the record and the rules, side by side. One column on a phone. The palette, the bar and the plate are plate.css; the stamp is web/zine/kit.css; this sets only the page. */
body { min-height: 100vh; background: url(grain.png), var(--ground); background-blend-mode: multiply; }.bar { position: sticky; top: 0; padding-top: 14px; }
.start { display: flex; flex-direction: column; gap: 22px; max-width: 1180px; margin: 0 auto; padding: 28px 18px; /* The tape on a plate's corner overhangs it; on a phone that would be a few pixels of sideways scroll. */ overflow-x: clip;}.paths, .after { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }.path-col, .after > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }.start .plate { padding: 16px 20px; }.start .plate.path { padding: 16px 20px 14px 76px; }/* Each plate stuck down at its own small angle, as paper is by hand. */.start .plate:nth-of-type(odd) { transform: rotate(-0.4deg); }.start .plate:nth-of-type(even) { transform: rotate(0.35deg); }/* The heading is display type: Bagel Fat One, with the pink pass a little off-register, which only display type is allowed. */.start h1 { margin: 0 0 6px; font: 30px/1.1 var(--display); color: var(--ink); text-shadow: 2px 1.5px 0 rgba(255, 72, 176, 0.7); }.start h2.panel-title { margin: 6px 0 -4px; }.start h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }.start p, .start ul, .start pre, .start details { margin: 8px 0 0; }.start .plate > :first-child, .start li > :first-child { margin-top: 0; }.start ul { padding-left: 2ch; }.start li + li { margin-top: 4px; }.start a { color: var(--mention); font-weight: 600; text-underline-offset: 3px; }.start a:hover { text-decoration: underline wavy var(--pink); }.start [id] { scroll-margin-top: 80px; }
/* A highlighter drawn across a label, a little crooked, as by hand. */.start mark { padding: 0 4px; margin-right: 2px; color: var(--ink); font-weight: 700; background: linear-gradient(100deg, transparent 2%, rgba(255, 225, 77, 0.9) 4% 94%, transparent 97%); border-radius: 3px 8px 4px 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone;}
/* ---- each path's card: its number a sticker, its name display type ---- */
.path h2 { margin: 0; font: 24px/1.1 var(--display); color: var(--ink); }.path .num { position: absolute; left: 16px; top: 14px; width: 44px; height: 44px; font: 24px/1 var(--display); color: var(--ink); background: var(--sun); }#didbot .num { background: var(--pink); transform: rotate(7deg); }
/* The jump to each path, for a phone, where the second is far below. */.jump { display: none; flex-wrap: wrap; gap: 8px; margin-top: 10px; }.jump a { padding: 2px 10px; color: var(--ink); font-weight: 700; text-decoration: none; background: var(--sun); border: 2px solid var(--comic, var(--ink)); border-radius: 999px; box-shadow: 2px 2px 0 var(--comic, var(--ink));}.jump a + a { background: var(--pink); }
/* ---- numbered steps, each number a sticker ---- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }.steps > li { position: relative; padding-left: 42px; counter-increment: step; }.steps > li + li { margin-top: 16px; }.steps > li::before { content: counter(step); position: absolute; left: 0; top: -3px; display: grid; place-items: center; width: 30px; height: 30px; font: 16px/1 var(--display); color: var(--ink); background: #fff; border: 2.5px solid var(--comic, var(--ink)); border-radius: 50%; box-shadow: 2px 3px 0 var(--comic, var(--ink)); transform: rotate(-8deg);}
/* ---- what is folded away ---- */
.start summary { cursor: pointer; font-weight: 700; color: var(--mention); }.start summary:hover { text-decoration: underline wavy var(--pink); text-underline-offset: 3px; }.start details[open] > summary { margin-bottom: 4px; }
/* The stamp on the privacy plate, struck at a slant in its corner. */.start .plate.public { padding-right: 112px; }.public .z-stamp { --z-tilt: -9deg; position: absolute; right: 18px; top: 16px; }
/* Commands and fields, set into the plate. A long command wraps rather than scrolls; the wrap is only drawn, so a copy is the command as written. */.start code { padding: 0 4px; border-radius: 4px; background: var(--well); color: var(--ink); font: 0.92em var(--mono); overflow-wrap: anywhere; }.start pre { padding: 9px 12px; white-space: pre-wrap; background: var(--sticky); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 3px 3px 0 var(--cast);}.start pre code { padding: 0; background: none; font-size: 12px; overflow-wrap: break-word; }/* The goat recipe, folded away, keeps its lines and scrolls: a jq filter wrapped mid-expression no longer reads as one. */.start details pre { white-space: pre; overflow-x: auto; scrollbar-color: var(--rule) transparent; }.start details pre code { overflow-wrap: normal; }
.start-foot { width: min(calc(1180px - 36px), calc(100% - 36px)); margin: 0 auto 24px; }
/* Side by side, path 2 is the shorter: it travels down beside path 1, so the two stay side by side to the end of it, clear of the bar and its checkered strip. */@media (min-width: 901px) { #didbot.path-col { position: sticky; top: calc(var(--bar-h, 63px) + 30px); }}@media (max-width: 900px) { .paths, .after { grid-template-columns: 1fr; gap: 22px; } .jump { display: flex; }}@media (max-width: 720px) { .start { padding: 22px 14px; gap: 18px; } .start .plate { padding: 14px; } .start .plate.path { padding: 14px 14px 12px 66px; } .path .num { left: 12px; width: 40px; height: 40px; font-size: 22px; } /* The step's sticker beside its heading only, so commands get the whole width. */ .steps > li { padding-left: 0; } .steps > li > h3 { display: flex; align-items: center; min-height: 26px; padding-left: 38px; } .start pre { padding: 8px 10px; } .start pre code { font-size: 11.5px; } .start .plate.public { padding: 46px 14px 14px; } .public .z-stamp { right: auto; left: 14px; top: 12px; } .start-foot { width: calc(100% - 28px); }}