Something went wrong. Try again.
vibescrobble! every agent, live on stage. vibescrobble.com
atproto agent llm did
Something went wrong. Try again.
13 kB · 302 lines
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303/* One week's zine, opened large over the board (web/issue.js): the sheet is a sheet (cards.css), wider, and the page on it is the share image's (crates/vibescrobble-query/src/zine.rs) set as live HTML, two columns where there is room and one on a phone. Running text, numbers and names stay in Inter or the typewriter on solid paper; the hands write a few words each. Needs zine/tokens.css and zine.css for the hands and faces. */
.issue-sheet { width: min(1000px, calc(100vw - 24px)); padding: 22px 22px 18px; }.issue-sheet::backdrop { background: rgba(var(--ink-rgb), 0.55); }.issue-head { display: flex; align-items: center; gap: 8px; }.issue-head h2 { margin: 0 auto 0 0; font-size: 16px; }.issue-head .card-close { position: static; flex: none; }.issue-step { min-width: 34px; padding: 4px 8px; font: 700 15px/1 var(--text); color: var(--ink); background: var(--bubble); border: 2.5px solid var(--comic, var(--ink)); border-radius: 999px; box-shadow: 2px 2px 0 var(--comic, var(--ink)); cursor: pointer;}.issue-step:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
/* ---- the page: photocopied stock, its pieces glued on ---- */
.issue-zine { position: relative; margin-top: 14px; }.issue-loading { padding: 80px 0; text-align: center; font: 40px/1 var(--z-hand-pen); color: var(--z-pencil); }.issue-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "mast mast" "polaroid mood" "scrap rhythm" "dymos note" "cast cast"; gap: 18px 28px; padding: 26px 30px 30px; background: #fbfaf4; box-shadow: inset 0 0 40px rgba(21, 21, 21, 0.16), 0 0 0 1px rgba(31, 29, 58, 0.1), 6px 8px 0 var(--z-shadow);}.issue-mast { grid-area: mast; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }.issue-polaroid { grid-area: polaroid; }.issue-scrap { grid-area: scrap; }.issue-dymos { grid-area: dymos; }.issue-mood { grid-area: mood; }.issue-rhythm { grid-area: rhythm; }.issue-note { grid-area: note; }.issue-cast { grid-area: cast; }
/* Printed once as the sheet opens: each piece settles onto the page in turn, and is still after. */.issue-piece { position: relative; transform: rotate(var(--settle-tilt, 0deg)) translateY(-10px) scale(1.03); opacity: 0; }.issue-sheet.settled .issue-piece { transform: none; opacity: 1; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2), opacity 0.25s ease-out; transition-delay: calc(var(--settle-i, 0) * 60ms);}@media (prefers-reduced-motion: reduce) { .issue-piece, .issue-sheet.settled .issue-piece { transform: none; opacity: 1; transition: none; }}
/* The masthead: letters cut from different papers. */.issue-ransom { display: inline-flex; align-items: center; gap: 3px; }.issue-gap { width: 0.35em; }.issue-letter { display: inline-grid; place-items: center; min-width: 0.8em; height: 1.15em; padding: 0 0.08em; font-size: 66px; line-height: 1; rotate: var(--tilt, 0deg); box-shadow: 2px 3px 0 rgba(21, 21, 21, 0.25);}.issue-mood .issue-letter, .issue-rhythm .issue-letter { font-size: 28px; }.issue-letter-0 { font-family: var(--display); background: var(--comic); color: var(--bubble); }.issue-letter-1 { font-family: "Bowlby One SC", var(--display); background: var(--sun); color: var(--ink); }.issue-letter-2 { font-family: var(--mod); background: #fff; color: var(--ink); }.issue-letter-3 { font-family: var(--z-typed); font-weight: 700; background: var(--pink); color: var(--ink); }.issue-letter-4 { font-family: var(--z-hand-marker); background: #e9e2d0; color: var(--ink); }.issue-letter-5 { font-family: var(--display); background: var(--blue); color: var(--bubble); }.issue-letter-6 { font-family: var(--mod); background: var(--bubble); color: var(--ink); }.issue-line { flex-basis: 100%; order: 3; margin: 0; font: 700 16px/1.3 var(--z-typed); color: var(--ink); }.issue-title { font: 36px/1 var(--z-hand-marker); color: var(--z-marker); rotate: -5deg; }.issue-stamp { padding: 3px 10px 2px; font: 700 18px/1.2 var(--z-typed); letter-spacing: 0.12em; text-transform: uppercase; color: var(--z-stamp); border: 3px double currentColor; rotate: 5deg;}
/* The Polaroid, its picture in one riso ink. */.issue-polaroid { justify-self: center; width: min(300px, 100%); margin: 10px 0 0; padding: 12px 12px 0; background: var(--z-polaroid); box-shadow: 0 1px 0 rgba(31, 29, 58, 0.12), 5px 7px 0 var(--z-shadow); rotate: -3deg;}.issue-photo { position: relative; display: block; aspect-ratio: 1; background: #9fd3ff; overflow: hidden; isolation: isolate; }.issue-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.7) brightness(0.9); mix-blend-mode: multiply; }.issue-photo::after { content: ""; position: absolute; inset: 0; background: var(--blue); mix-blend-mode: screen; }.issue-washi { position: absolute; top: -12px; left: 30%; width: 40%; height: 26px; rotate: -7deg; opacity: 0.88; background: repeating-linear-gradient(135deg, #ff48b0 0 7px, #ffd1e8 7px 14px); z-index: 1;}.issue-pen { font-family: var(--z-hand-pen); color: var(--z-pen); -webkit-text-stroke: 0.4px currentColor; line-height: 1; }.issue-polaroid figcaption { padding: 6px 4px 10px; font-size: 34px; text-align: center; overflow-wrap: anywhere; }
/* The count on a torn pink scrap. */.issue-scrap { align-self: start; padding: 18px 26px 22px; background: var(--pink); clip-path: polygon(0 6%, 9% 0, 22% 4%, 40% 1%, 58% 5%, 77% 0, 100% 4%, 98% 50%, 100% 96%, 82% 100%, 60% 95%, 38% 100%, 15% 96%, 0 100%, 2% 50%); rotate: -2deg;}.issue-scrap b { display: block; font: 88px/0.95 var(--display); color: var(--ink); text-shadow: 3px 3px 0 var(--bubble); font-variant-numeric: tabular-nums; }.issue-scrap > span { font: 700 20px/1.3 var(--z-typed); color: var(--ink); }.issue-up { position: absolute; right: 22px; bottom: 6px; font-size: 34px; rotate: -6deg; }
/* The label maker's strips; a repository's is a link. */.issue-dymos { display: flex; flex-wrap: wrap; align-content: start; gap: 8px; }.issue-dymo { display: inline-block; padding: 6px 10px 5px; font: 700 15px/1 var(--z-typed); letter-spacing: 0.12em; color: #f4f4f4; background: #161616; border-radius: 3px; box-shadow: 2px 2px 0 rgba(21, 21, 21, 0.3); text-decoration: none;}.issue-dymo:nth-child(3n) { background: #c4122f; }.issue-dymo:nth-child(4n) { background: #1d4fa3; }a.issue-dymo:hover, a.issue-dymo:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
/* The mood: die-cut emoji, each a button that keeps the stream to it. */.issue-pile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }.issue-sticker { position: relative; padding: 0 14px 4px 0; font-size: calc(48px * var(--size, 1)); background: none; border: 0; cursor: pointer; rotate: var(--tilt, 0deg);}.issue-sticker .issue-emoji { display: block; line-height: 1; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(3px 4px 0 rgba(31, 29, 58, 0.35));}.issue-count { position: absolute; right: 0; bottom: 0; padding: 0 4px; font: 700 13px/1.4 var(--z-typed); color: var(--ink); background: #fbfaf4;}.issue-sticker:hover .issue-emoji, .issue-sticker:focus-visible .issue-emoji { transform: scale(1.08); }.issue-quiet { margin: 12px 0 0; font-size: 34px; rotate: -3deg; }
/* The rhythm: hours on graph paper, then a bar a day. */.issue-hours { display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 3px; height: 110px; margin-top: 12px; padding: 10px 12px 0; background: linear-gradient(rgba(0, 120, 191, 0.25) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(0, 120, 191, 0.25) 1px, transparent 1px) 0 0 / 16px 16px, #f6fbff; border-bottom: 3px solid var(--z-marker);}.issue-hour { display: block; height: calc(100% * var(--v, 0)); min-height: 2px; background: var(--z-marker); border-radius: 2px 2px 0 0; }.issue-hour.on { background: var(--pink); outline: 2.5px solid var(--z-pen); outline-offset: 3px; border-radius: 40%; }.issue-axis { display: flex; justify-content: space-between; padding: 4px 12px 0; font: 700 13px/1 var(--z-typed); color: var(--ink); }.issue-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 74px; margin-top: 14px; }.issue-day { display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; padding: 0; background: none; border: 0; cursor: help;}.issue-day-bar { width: 70%; height: calc(4px + 46px * var(--v, 0)); background: var(--blue); border: 2px solid var(--comic, var(--ink)); }.issue-day-name { font: 13px/1.6 var(--mod); color: var(--ink); }.issue-day:hover .issue-day-bar, .issue-day:focus-visible .issue-day-bar { background: var(--pink); }.issue-peak { position: absolute; right: 6px; top: 0; font-size: 32px; rotate: -5deg; }
/* The long one, on a notebook scrap. */.issue-marker { margin: 0 0 6px; font: 400 30px/1 var(--z-hand-marker); color: var(--z-marker); }.issue-note > p { margin: 0; }.issue-note .issue-who, .issue-note .issue-quote { padding: 4px 14px 4px 54px; background: linear-gradient(90deg, transparent 40px, var(--z-margin) 40px 42px, transparent 42px), repeating-linear-gradient(transparent 0 31px, var(--z-ruled) 31px 32px), var(--z-notebook);}.issue-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 700 18px/32px var(--text); color: var(--ink); }.issue-who .issue-emoji { font-size: 22px; }.issue-typed { font: 700 14px/1.4 var(--z-typed); color: var(--z-pencil); }.issue-quote { font: 400 17px/32px var(--text); color: var(--ink); box-shadow: 3px 4px 0 var(--z-shadow); }
/* The tracks: the cast, xeroxed, each a way to its card. */.issue-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }.issue-track { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "no photo" "name name" "count count"; gap: 4px 6px; width: 100%; padding: 6px; text-align: left; color: var(--ink); background: #fff; border: 2px solid #222; cursor: pointer;}.issue-track:hover, .issue-track:focus-visible { background: #fff6b0; box-shadow: 3px 3px 0 var(--comic, var(--ink)); }.issue-track-no { grid-area: no; font: 700 14px/1 var(--z-typed); color: var(--z-marker); }.issue-xerox { grid-area: photo; display: grid; place-items: center; height: 64px; background: #fff; overflow: hidden; }.issue-xerox img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.8) brightness(1.1); mix-blend-mode: multiply; }.issue-xerox .issue-emoji { font-size: 40px; }.issue-track-name { grid-area: name; font: 700 14px/1.2 var(--text); overflow-wrap: anywhere; }.issue-track .issue-typed { grid-area: count; }.issue-more { align-self: center; font-size: 36px; }
/* The tip a hovered piece shows: a little comic card over it. */.issue-tip { position: absolute; left: var(--tip-x, 0); top: var(--tip-y, 0); z-index: 3; display: grid; gap: 2px; max-width: 240px; padding: 6px 10px; translate: -50% calc(-100% - 8px); font: 13px/1.35 var(--text); color: var(--ink); background: var(--bubble); border: 2.5px solid var(--comic, var(--ink)); box-shadow: 3px 3px 0 var(--comic, var(--ink)); pointer-events: none;}.issue-tip[hidden] { display: none; }.issue-status { min-height: 1.4em; margin: 10px 0 0; font: 600 13px/1.4 var(--text); color: var(--ink-dim); }.issue-actions { display: flex; flex-wrap: wrap; gap: 8px; }.issue-action { padding: 6px 12px; font: 700 14px/1 var(--text); color: var(--ink); text-decoration: none; background: var(--bubble); border: 2.5px solid var(--comic, var(--ink)); border-radius: 999px; box-shadow: 2px 2px 0 var(--comic, var(--ink)); cursor: pointer;}.issue-actions .card-link { background: var(--sun); }
/* A phone: one column, the masthead smaller. */@media (max-width: 760px) { .issue-sheet { padding: 18px 12px 14px; } .issue-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mast" "polaroid" "scrap" "dymos" "mood" "rhythm" "note" "cast"; padding: 18px 16px 22px; } .issue-letter { font-size: 44px; } .issue-scrap b { font-size: 68px; } .issue-polaroid { width: min(240px, 80%); }}