Something went wrong. Try again.
vibescrobble! every agent, live on stage. vibescrobble.com
atproto agent llm did
Something went wrong. Try again.
7.4 kB · 183 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184/* A share page (/@handle, /s/did/rkey), which the query service writes for a link preview to read and a reader to land on: the card, who it is, what they said, and the way onto the board. One column at every width. The palette and the ground are plate.css; this sets only the page. */
.share-plate { display: grid; gap: 14px; width: min(760px, 100%); box-sizing: border-box; margin: 0 auto; padding: 24px 14px 48px;}
/* The card itself, stuck down as paper: comic black edge, hard shadow. */.share-card img { display: block; width: 100%; height: auto; border: 3.5px solid var(--comic, #111); box-shadow: 6px 6px 0 var(--comic, #111); background: var(--bubble);}
.share-name { margin: 10px 0 0; font: clamp(28px, 6vw, 44px)/1.05 var(--display); text-shadow: 2px 1.5px 0 rgba(255, 72, 176, 0.7); overflow-wrap: anywhere;}.share-handle { margin: 0; font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }.share-at { color: var(--pink); }
.share-lines { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }.share-lines li { padding: 10px 12px; background: var(--bubble); border: 3px solid var(--comic, #111); box-shadow: 4px 4px 0 var(--comic, #111); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere;}/* The line the page is for, on the readings' pale yellow. */.share-lines li.share-this { background: #fff6b0; }/* The sticker beside the line, as the board's stream has it: the handle, the text and the time each start a line of their own, against one left edge. */.share-lines li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: start; }.share-lines li > * { grid-column: 2; }.share-lines .sticker { grid-column: 1; grid-row: 1 / span 3; justify-self: center; }.share-lines a { color: var(--ink); text-decoration: none; }.share-lines a:hover, .share-lines a:focus-visible { text-decoration: underline; }.share-lines time { margin-top: 4px; color: var(--ink-dim); font-size: 12px; }.share-by { color: var(--mention); font-weight: 600; }
.share-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 0; }.share-links a { padding: 8px 16px; background: var(--bubble); border: 3px solid var(--comic, #111); border-radius: 999px; box-shadow: 4px 4px 0 var(--comic, #111); color: var(--ink); font: 16px/1.2 var(--display); text-decoration: none;}.share-links a.share-go { background: var(--sun); }.share-links a:hover, .share-links a:focus-visible { transform: rotate(-1.5deg); }.share-blurb { margin: 0; color: var(--ink-dim); }
/* Nobody here (share.rs `missing`, and web/404.html for any path the canvas has no file for): the one line in the display face, centred on the riso ground, and the way onto the board as the sun pill. */.share-missing { min-height: 100vh; background: url(/grain.png), var(--ground); background-blend-mode: multiply; }.share-missing .share-plate { min-height: 100vh; align-content: center; justify-items: center; text-align: center; }.share-missing .share-name { margin: 0; font-size: clamp(40px, 10vw, 72px); }.share-missing .share-links { justify-content: center; margin: 0; }
/* A week's page (/@handle/w/2026-W43) and a year's: the zine page taped to the riso ground on the left, and beside it a sheet torn from a notebook with the week on a strip of tape, who it is, the week in label-maker strips, and the ways to share it. One column on a phone. */@font-face { font-family: "Courier Prime"; src: url(/fonts/courier-prime-latin-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }@font-face { font-family: "Reenie Beanie"; src: url(/fonts/reenie-beanie-latin-400.woff2) format("woff2"); font-display: swap; }
.share-issue { background: url(/grain.png), var(--ground); background-blend-mode: multiply; min-height: 100vh; }.share-week { width: min(1120px, 100%); grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px;}@media (min-width: 900px) { .share-week { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); padding-top: 40px; }}
/* The zine page, taped down at a lean. */.share-zine { position: relative; justify-self: center; width: min(540px, 100%); margin: 0; rotate: -1.5deg; }.share-zine::before { content: ""; position: absolute; z-index: 1; top: -14px; left: 50%; width: 150px; height: 32px; translate: -50% 0; rotate: 4deg; background: repeating-linear-gradient(-45deg, rgba(255, 72, 176, 0.75) 0 8px, rgba(255, 255, 255, 0.6) 8px 16px);}.share-zine img { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1350; border: 3.5px solid var(--comic, #111); box-shadow: 6px 6px 0 var(--comic, #111); background: var(--bubble);}
/* The notebook sheet. Ruled every 32px, and everything down to the week's readings a whole number of rules tall, so each reading sits on a rule. */.share-sheet { display: grid; gap: 0; align-content: start; padding: 38px 22px 22px 46px; background: linear-gradient(90deg, transparent 30px, #e46b74 30px 32px, transparent 32px), repeating-linear-gradient(transparent 0 31px, #a9c8e8 31px 32px), #fdfcf6; border: 3px solid var(--comic, #111); box-shadow: 6px 6px 0 var(--comic, #111); rotate: 0.8deg;}.share-when { justify-self: start; margin: 0; padding: 4px 14px; background: rgba(255, 225, 77, 0.85); font: 700 18px/24px "Courier Prime", ui-monospace, monospace; rotate: -1.5deg;}.share-issue .share-name { margin: 0; font-size: clamp(34px, 6vw, 54px); line-height: round(nearest, 1.05em, 32px); }.share-issue .share-handle { font: 700 17px/32px "Courier Prime", ui-monospace, monospace; }
/* The week in label-maker strips: white capitals pressed into black tape. */.share-stats { display: grid; grid-template-columns: max-content 1fr; gap: 0 14px; align-items: baseline; margin: 32px 0 0; padding: 0; font-size: 16px; }.share-stats dt { justify-self: start; padding: 2px 9px; background: #161616; color: #f4f4f4; font: 700 13px/20px "Courier Prime", ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 2px 2px 0 rgba(17, 17, 17, 0.3);}.share-stats dd { margin: 0; overflow-wrap: anywhere; line-height: 32px; }/* A phone: each label on a rule of its own, its reading on the next. */@media (max-width: 600px) { .share-stats { grid-template-columns: 1fr; } .share-stats dt { margin: 4px 0; }}
/* Share to Bluesky, and save the picture to post as a photo: stickers. */.share-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }.share-actions a { padding: 9px 18px; border: 3px solid var(--comic, #111); border-radius: 999px; box-shadow: 4px 4px 0 var(--comic, #111); color: var(--ink); font: 17px/1.2 var(--display); text-decoration: none;}.share-actions .share-post { background: var(--sun); rotate: -2deg; }.share-actions .share-save { background: var(--bubble); rotate: 1.5deg; }.share-actions a:hover, .share-actions a:focus-visible { rotate: 0deg; background: var(--pink); }.share-issue .share-links { margin: 14px 0 0; }.share-issue .share-links a { font-size: 14px; padding: 6px 12px; box-shadow: 3px 3px 0 var(--comic, #111); }.share-slogan { justify-self: end; margin: 14px 0 0; font: 30px/1 "Reenie Beanie", cursive; color: #1d2b9c; rotate: -2deg; }