Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/quarterback/dev-site. dev-site-five-kappa.vercel.app
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286/* ────────────────────────────────────────────────────────── workshop.css — ronbronson.dev front page, ".dev as proof of work, the workshop" (design canvas, November 2026). Stands alone: the home page loads only this sheet. Project pages keep slabs.css.
Two colourways, picked with the swatches in the top bar: Snow (default) the faces.css pigment set: Snow ground, Shadow Grey ink, Mint Leaf toward grey for soft text, Coral Glow toward grey for underlines and years. Coffee the palette.js dark set: Dark Coffee ground, Light Apricot ink, Camel soft text (4.81 on coffee), Burnt Tangerine for underlines and years (3.20, large text and fills only). The choice is kept in localStorage under "rb-theme"; the inline script in index.html applies it before first paint.
Type: PP Neue Montreal (display), Hanken Grotesk (text), IBM Plex Mono (commands), all self-hosted in assets/fonts/gallery/. ────────────────────────────────────────────────────────── */@font-face { font-family: "PP Neue Montreal"; src: url("fonts/gallery/PPNeueMontreal-Extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }@font-face { font-family: "PP Neue Montreal"; src: url("fonts/gallery/PPNeueMontreal-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }@font-face { font-family: "Hanken Grotesk"; src: url("fonts/gallery/hanken-grotesk-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }@font-face { font-family: "IBM Plex Mono"; src: url("fonts/gallery/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }@font-face { font-family: "IBM Plex Mono"; src: url("fonts/gallery/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer/switzer-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }@font-face { font-family: "Switzer"; src: url("fonts/switzer/switzer-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }@font-face { font-family: "Switzer"; src: url("fonts/switzer/switzer-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }@font-face { font-family: "Switzer"; src: url("fonts/switzer/switzer-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --bg: #fffbfa; --ink: #252323; --soft: #0f7f6c; --accent: #cd795b; --shot: #eef9fc; --gut: 56px; /* Type scale: one size per level. h1 is the hero only; h2 for every section heading; h3 for every project, event and tool title. */ --h2: clamp(36px, 4vw, 56px); --h3: clamp(22px, 1.8vw, 26px); --body: 18px; --display: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif; --text: "Switzer", "Hanken Grotesk", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: light;}:root[data-theme="coffee"] { --bg: #432818; --ink: #ffe6a7; --soft: #bb9457; --accent: #ef271b; --shot: #5a3b22; color-scheme: dark;}
*, *::before, *::after { box-sizing: border-box; }html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 88px; }body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 20px; line-height: 1.5; transition: background .2s, color .2s; }img { display: block; max-width: 100%; }a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }h1, h2, h3 { margin: 0; font-family: var(--display); }.w-wrap { max-width: 1440px; margin: 0 auto; }.g { padding-left: var(--gut); padding-right: var(--gut); }
/* Top bar */.top { position: sticky; top: 0; z-index: 5; background: var(--bg); transition: background .2s; }.top__in { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 22px; padding-bottom: 22px; }.top__name { font-family: var(--display); font-weight: 800; font-size: 22px; text-decoration: none; white-space: nowrap; }.top nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 26px; align-items: center; font-weight: 600; font-size: 17px; }.top nav a { text-decoration: none; }.top nav a:hover { text-decoration: underline; }.sw { display: flex; gap: 8px; margin-left: 8px; }.sw button { width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid var(--ink); position: relative; }.sw button::after { content: ""; position: absolute; inset: -10px; } /* 44px touch target */.sw .sw--snow { background: #fffbfa; box-shadow: inset 0 0 0 5px #54defd; }.sw .sw--coffee { background: #432818; box-shadow: inset 0 0 0 5px #ef271b; }.sw button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Hero */.hero { padding-top: clamp(32px, 4vw, 56px); padding-bottom: 24px; }.hero h1 { font-weight: 800; font-size: clamp(56px, 7.2vw, 112px); line-height: .88; letter-spacing: -.04em; }.hero__lede { margin: 24px 0 0; max-width: 30em; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -.01em; }
/* Sections */.sec { padding-top: 72px; }.sec > h2 { font-weight: 800; font-size: var(--h2); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 8px; }.sec__st { margin: 0 0 40px; max-width: 40em; font-size: 21px; color: var(--soft); }
/* Recent projects: alternating screenshot rows */.feat { list-style: none; margin: 0; padding: 0; }.feat li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; padding: 36px 0; align-items: center; }.feat li:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }.feat li:nth-child(even) .feat__shot { order: 2; }.feat__shot { display: block; }.feat img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--shot); transition: transform .25s; }.feat li:hover img { transform: translateY(-6px) rotate(-.6deg); }.feat h3 { font-weight: 800; font-size: var(--h3); line-height: 1.1; letter-spacing: -.015em; margin-bottom: 10px; }.feat h3 a { text-decoration: none; }.feat h3 a:hover { text-decoration: underline; }.feat p { margin: 0 0 10px; font-size: var(--body); line-height: 1.5; }.feat__t { font-size: 15px; color: var(--soft); }
/* Other projects: two text columns */.bench { columns: 2; column-gap: 72px; margin-top: 28px; }.bench div { break-inside: avoid; padding: 0 0 30px; }.bench h3 { font-weight: 800; font-size: var(--h3); line-height: 1.1; letter-spacing: -.015em; margin-bottom: 6px; }.bench p { margin: 0; font-size: var(--body); line-height: 1.5; }.bench__more { margin: 8px 0 0; font-size: 18px; }
/* In real life */.irl { margin: 28px 0 48px; }.irl img { width: 100%; height: auto; aspect-ratio: 7 / 5; max-height: 720px; object-fit: cover; }
/* Photo band between the hero and Recent projects */.band { margin: 16px 0 0; }.band img { width: 100%; height: auto; aspect-ratio: 2400 / 1290; max-height: 640px; object-fit: cover; }.rooms { list-style: none; margin: 0; padding: 0; }.rooms li { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; padding: 18px 0; align-items: baseline; }.rooms__y { font-family: var(--display); font-weight: 800; font-size: var(--h3); line-height: 1.1; color: var(--accent); }.rooms h3 { font-weight: 800; font-size: var(--h3); line-height: 1.1; letter-spacing: -.015em; }.rooms p { margin: 0; font-size: var(--body); }
/* Tools */.npm { list-style: none; margin: 28px 0 0; padding: 0; }.npm li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 16px 0; align-items: baseline; }.npm code { font-family: var(--mono); font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }.npm code a { text-decoration: none; }.npm code a:hover { text-decoration: underline; }.npm p { margin: 0; font-size: var(--body); }
/* Footer */.foot { margin-top: 104px; padding-top: 56px; padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 72px; }.foot h2 { font-size: var(--h3); margin-bottom: 8px; }.foot p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--soft); }.foot p + p { margin-top: .5em; }.foot__icons { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 4px; }.foot__icons a { display: inline-flex; width: 22px; height: 22px; color: var(--ink); }.foot__icons svg { width: 100%; height: 100%; }.foot__teach { margin-top: 18px !important; }
@media (max-width: 860px) { :root { --gut: 16px; } .feat li, .feat li:nth-child(even), .rooms li, .npm li, .foot { grid-template-columns: 1fr; } .feat li:nth-child(even) .feat__shot { order: 0; } .feat li { gap: 20px; } .bench { columns: 1; } .rooms li { gap: 6px; } .npm li { gap: 6px; }}@media (prefers-reduced-motion: reduce) { body, .top, .feat img { transition: none; } .feat li:hover img { transform: none; }}
/* Preparing leaders: the tabletop and simulation practice, set as a wide lead before the photos and the rooms. */.lead { max-width: 40em; margin-top: 20px; }.lead p { margin: 0 0 16px; font-size: 20px; }
/* Writing: titles only */.wr { list-style: none; margin: 28px 0 0; padding: 0; columns: 2; column-gap: 72px; }.wr li { break-inside: avoid; padding: 0 0 14px; font-size: 20px; font-weight: 600; line-height: 1.3; }@media (max-width: 860px) { .wr { columns: 1; } .wr li { font-size: 19px; } }
/* The ask: one question and the address, before the footer */.ask p { margin: 12px 0 0; font-family: var(--display); font-weight: 800; font-size: var(--h3); line-height: 1.1; }@media (max-width: 860px) { .ask p { overflow-wrap: anywhere; } }
/* Screenshot preview on hover for Other projects (assets/shots.js) */.shot-pop { position: fixed; left: 0; top: 0; z-index: 50; width: 420px; pointer-events: none; opacity: 0; transition: opacity .12s; background: var(--shot); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }.shot-pop.is-on { opacity: 1; }.shot-pop img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
/* ── Long form, 6 November 2026 ("long form themes then projects with images" on the design canvas). Lead photo, a statement and intro, two theme essays, then every project as one list whose screenshot shows on hover or focus. ── */.leadph { margin: 8px 0 0; }.leadph img { width: 100%; height: clamp(200px, 30vh, 340px); object-fit: cover; object-position: 50% 28%; }.hero { padding-top: 40px; padding-bottom: 24px; }.hero__stand { margin: 0; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.08; letter-spacing: -.02em; }.hero__intro { margin-top: 48px; max-width: 34em; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; }.hero__intro p { margin: 0 0 .9em; }
.themes { padding-top: 72px; }.th-a { padding: 0 0 104px; }.th-a h2 { max-width: 20em; font-weight: 800; font-size: var(--h2); line-height: 1; letter-spacing: -.025em; }.th-a__dek { margin: 24px 0 0; max-width: 34em; font-size: clamp(22px, 2vw, 30px); line-height: 1.4; font-weight: 500; }.th-a__body { margin: 48px 0 0; max-width: 40em; }.th-a__body h3 { font-weight: 600; font-size: var(--h3); line-height: 1.15; margin: 40px 0 12px; }.th-a__body h3:first-child { margin-top: 0; }.th-a__body p { margin: 0 0 18px; }/* Drafting slots: dashed boxes until Ron writes the theme. */.slot { display: block; width: fit-content; padding: 10px 14px; border: 2px dashed var(--accent); color: var(--soft); }
.pl { list-style: none; margin: 8px 0 0; padding: 0; }.pl li { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: 8px 48px; padding: 22px 0; align-items: baseline; }.pl h3 { font-weight: 800; font-size: var(--h3); line-height: 1.05; letter-spacing: -.02em; }.pl h3 a { text-decoration: none; }.pl h3 a:hover, .pl h3 a:focus-visible { text-decoration: underline; }.pl p { margin: 0; font-size: var(--body); line-height: 1.55; max-width: 34em; }.pl__t { font-size: 15px; color: var(--soft); }.pl img { position: absolute; z-index: 3; right: 0; top: 50%; width: 440px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--shot); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); opacity: 0; pointer-events: none; transform: translateY(-40%) rotate(-1.5deg) scale(.96); transition: opacity .2s, transform .25s; }.pl li:hover img, .pl li:focus-within img { opacity: 1; transform: translateY(-50%) rotate(-1.5deg) scale(1); }@media (max-width: 860px) { .leadph img { height: 220px; object-position: 52% 25%; } .hero__intro { margin-top: 32px; } .pl li { grid-template-columns: 1fr; } .pl img { display: none; } .th-a { padding-bottom: 72px; }}@media (prefers-reduced-motion: reduce) { .pl img { transition: none; } }
/* Video inside a theme essay */.th-a__media { margin: 48px 0 0; max-width: 880px; }.vidwrap { position: relative; aspect-ratio: 16 / 9; background: var(--shot); }.vidwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }.th-a__media figcaption { margin-top: 10px; font-size: 15px; color: var(--soft); }
/* Talks and conversations: two videos, then the podcast player */.media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 28px; }.media figure { margin: 0; }.media figcaption { margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: var(--h3); line-height: 1.15; }.media figcaption span { display: block; margin-top: 4px; font-family: var(--text); font-weight: 400; font-size: 15px; color: var(--soft); }.ep { display: block; width: 100%; max-width: 660px; height: 175px; margin-top: 40px; border: 0; background: transparent; }@media (max-width: 860px) { .media { grid-template-columns: 1fr; } }.ep + .ep { margin-top: 16px; }
/* ── The fork, 7 November 2026 ── Systems and writing; the other room is projects.html, reached from Projects in the nav. */.sys { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 72px; padding: 56px 0 0; }.sys h3 { font-weight: 800; font-size: var(--h3); line-height: 1.05; letter-spacing: -.02em; }.sys h3 a { text-decoration: none; }.sys h3 a:hover { text-decoration: underline; }.sys code { display: block; margin-top: 14px; font-family: var(--mono); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; color: var(--soft); }.sys__idea { margin: 0 0 20px; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45; }.sys__b p { margin: 0 0 16px; font-size: var(--body); }.wlist { list-style: none; margin: 32px 0 0; padding: 0; max-width: 60em; }.wlist li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 0 0 18px; align-items: baseline; }.wlist__d { font-size: 15px; color: var(--soft); }.wlist a { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; text-decoration: none; }.wlist a:hover { text-decoration: underline; }@media (max-width: 860px) { .sys, .wlist li { grid-template-columns: 1fr; gap: 6px; } }
/* Worked example: one long-form account under its section heading */.essay { max-width: 40em; margin-top: 32px; }.essay p { margin: 0 0 18px; font-size: var(--body); line-height: 1.6; }.essay .essay__lede { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.5; }.essay h3 { margin: 40px 0 12px; font-weight: 600; font-size: var(--h3); line-height: 1.15; }
/* Pixel dissolve (assets/dissolve.js): hide the page until the cover is drawn */html.dissolving body { visibility: hidden; }
/* Colophon: facts first, labels bold, the digression set apart below */.foot p b { display: inline-block; min-width: 6.5em; font-weight: 600; color: var(--ink); }.foot p.digression { margin-top: 1.2em; }
/* Hero: headline and the "Currently" line first; the photo is a contained rectangle beside them on wide screens and after them on phones */.hero--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px 56px; align-items: end; }.hero__now { margin: 32px 0 0; max-width: 34em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }.hero__ph { margin: 0; }.hero__ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 28%; }@media (max-width: 860px) { .hero--split { grid-template-columns: minmax(0, 1fr); } .hero__ph { max-width: 420px; } }
/* Podcast players side by side, stacked on phones */.eps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }.eps .ep { margin: 0; max-width: none; }.eps .ep + .ep { margin-top: 0; }@media (max-width: 860px) { .eps { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
/* Pull tab: the Projects room waiting at the right edge (bottom on phones) */@font-face { font-family: "Plex Cond"; src: url("fonts/plex/ibm-plex-sans-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }@font-face { font-family: "Plex Cond"; src: url("fonts/plex/ibm-plex-sans-condensed-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }.pull { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: 12px; overflow: hidden; background: #1f2bff; color: #fff; text-decoration: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: width .15s ease; }.pull:hover, .pull:focus-visible { width: 30px; }.pull:focus-visible { outline: 3px solid #d7ff3d; outline-offset: -3px; }.pull.is-drag { cursor: grabbing; transition: none; }.pull__label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; font-family: "Plex Cond", sans-serif; font-weight: 700; font-size: 15px; opacity: 0; transition: opacity .15s; }.pull:hover .pull__label, .pull:focus-visible .pull__label { opacity: 1; }.pull__room { position: absolute; top: 0; left: 0; width: 100vw; padding: 40px 56px; opacity: 0; transition: opacity .15s; }.pull.is-open .pull__room { opacity: 1; }.pull.is-open .pull__label { opacity: 0; }.pull__h { display: block; margin-top: 64px; font-family: "Plex Cond", sans-serif; font-weight: 700; font-size: clamp(56px, 8vw, 128px); line-height: .86; letter-spacing: -.02em; }.pull__p { display: block; margin-top: 28px; max-width: 30em; font-family: "Plex Cond", sans-serif; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.25; color: #c9ccff; }/* Desktop only: on phones and touch screens the strip is hidden and the nav link to Projects is the way in */@media (max-width: 860px), (hover: none) { .pull { display: none; } }@media (prefers-reduced-motion: reduce) { .pull, .pull__label, .pull__room { transition: none; } }