Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Projects live: fixes from walking them end to end | 1 | @import "tailwindcss" source("."); |
| 2 | @import "@g1t/theme/tokens.css"; | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 3 | @import "@g1t/theme/fonts.css"; |
| Projects live: fixes from walking them end to end | 4 | |
| 5 | /* Tailwind's names for the shared g1t tokens. */ | |
| 6 | @theme { | |
| 7 | --font-sans: var(--g1t-font-sans); | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 8 | --font-display: var(--g1t-font-display); |
| Projects live: fixes from walking them end to end | 9 | --font-mono: var(--g1t-font-mono); |
| 10 | ||
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 11 | /* Hanken and Bricolage want less tightening than a text face set close. */ |
| 12 | --tracking-tight: -0.012em; | |
| 13 | ||
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 14 | /* |
| 15 | * Every colour is a pair: light-dark() picks the light palette or the | |
| 16 | * dark one by the element's color-scheme, which follows the Appearance | |
| 17 | * setting (lib/theme.ts, set on <html> below). Something drawn dark on | |
| 18 | * purpose in either theme, such as a product screenshot, sets | |
| 19 | * `scheme-dark` and its tokens stay dark. | |
| 20 | */ | |
| 21 | --color-bg: light-dark(var(--g1t-light-bg), var(--g1t-bg)); | |
| The left-hand navigation takes less room and reads at a glance. The dock becomes a rail: a 56-pixel column of icons with the g1t mark on top, the current app marked by a filled square, hover hints naming each with its shortcut, the apps you pinned in a scrolling band, and Apps, People, Workspace and your account at the foot. Each mode's sidebar sits flush against it, 240 pixels wide, opening on Search or jump to and listing its groups under small labels in 36-pixel rows; Ctrl B hides it and the page grows into the room. Every mode's list is built on the shadcn Sidebar now in the kit, so Workspace, Code, People, Notifications, account settings, Chat, Artifacts and Agents all share one frame; the phone keeps its bottom bar and drawer. The workspaces guide describes the rail, the sidebar and the page. | 22 | /* |
| 23 | * The app's frame (components/shell.tsx, components/ui/sidebar.tsx): | |
| The page sits flat against the sidebar. On a computer it fills the rest of the window with no inset, no rounded corners and no frame around it, and its top bar always draws the line under itself, so a page's own header, a conversation's or a project's, sits beneath it as its own band instead of merging with it; the scroll watcher that used to decide when the line appeared is gone. A phone keeps its rounded panel above the bottom bar. The workspaces guide says so. | 24 | * the page sits flat against the sidebar, a hairline between; the sidebar |
| 25 | * is the shell's surface, and the rail, the narrow column of icons at | |
| The left-hand navigation takes less room and reads at a glance. The dock becomes a rail: a 56-pixel column of icons with the g1t mark on top, the current app marked by a filled square, hover hints naming each with its shortcut, the apps you pinned in a scrolling band, and Apps, People, Workspace and your account at the foot. Each mode's sidebar sits flush against it, 240 pixels wide, opening on Search or jump to and listing its groups under small labels in 36-pixel rows; Ctrl B hides it and the page grows into the room. Every mode's list is built on the shadcn Sidebar now in the kit, so Workspace, Code, People, Notifications, account settings, Chat, Artifacts and Agents all share one frame; the phone keeps its bottom bar and drawer. The workspaces guide describes the rail, the sidebar and the page. | 26 | * the window's edge, is a step apart: white in the light theme, near |
| 27 | * black in the dark one. The current row or icon is a muted fill. | |
| 28 | */ | |
| 29 | --color-shell: light-dark(#efefed, #0b0b0d); | |
| 30 | --color-sidebar: var(--color-shell); | |
| 31 | --color-sidebar-accent: light-dark(#e1e1de, #1c1c20); | |
| 32 | --color-sidebar-border: light-dark(#e0e0dd, #1d1d22); | |
| 33 | --color-rail: light-dark(#ffffff, #050507); | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 34 | --color-surface: light-dark(var(--g1t-light-surface), var(--g1t-surface)); |
| 35 | --color-raised: light-dark(var(--g1t-light-raised), var(--g1t-raised)); | |
| 36 | --color-line: light-dark(var(--g1t-light-line), var(--g1t-line)); | |
| 37 | --color-line-strong: light-dark(var(--g1t-light-line-strong), var(--g1t-line-strong)); | |
| Projects live: fixes from walking them end to end | 38 | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 39 | --color-fg: light-dark(var(--g1t-light-fg), var(--g1t-fg)); |
| 40 | --color-fg-soft: light-dark(var(--g1t-light-fg-soft), var(--g1t-fg-soft)); | |
| 41 | /* A primary button's hover: brighter than fg on dark, softer on light. */ | |
| 42 | --color-fg-hover: light-dark(#3a3a41, #ffffff); | |
| 43 | --color-muted: light-dark(var(--g1t-light-muted), var(--g1t-muted)); | |
| 44 | --color-faint: light-dark(var(--g1t-light-faint), var(--g1t-faint)); | |
| Projects live: fixes from walking them end to end | 45 | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 46 | --color-accent: light-dark(var(--g1t-light-accent), var(--g1t-accent)); |
| 47 | --color-accent-hover: light-dark(var(--g1t-light-accent-hover), var(--g1t-accent-hover)); | |
| 48 | --color-accent-dim: light-dark(var(--g1t-light-accent-dim), var(--g1t-accent-dim)); | |
| 49 | --color-accent-low: light-dark(var(--g1t-light-accent-low), var(--g1t-accent-low)); | |
| 50 | /* The accent at its palest on dark, a middle lavender on light: the headline's gradient. */ | |
| 51 | --color-accent-high: light-dark(#8b76e0, #d9d1ff); | |
| Projects live: fixes from walking them end to end | 52 | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 53 | --color-success: light-dark(var(--g1t-light-success), var(--g1t-success)); |
| 54 | --color-success-dim: light-dark(var(--g1t-light-success-dim), var(--g1t-success-dim)); | |
| 55 | --color-success-low: light-dark(var(--g1t-light-success-low), var(--g1t-success-low)); | |
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 56 | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 57 | --color-info: light-dark(var(--g1t-light-info), var(--g1t-info)); |
| 58 | --color-merged: light-dark(var(--g1t-light-merged), var(--g1t-merged)); | |
| 59 | --color-warn: light-dark(var(--g1t-light-warn), var(--g1t-warn)); | |
| 60 | --color-danger: light-dark(var(--g1t-light-danger), var(--g1t-danger)); | |
| Projects live: fixes from walking them end to end | 61 | |
| 62 | --animate-fade-up: fade-up 0.6s ease-out both; | |
| 63 | --animate-dash: dash 1.2s linear infinite; | |
| Agents have faces, and are never mistaken for people. Every agent wears a little bot face drawn from a look it owns, shape, colour, eyes, mouth, antenna, accessory and pattern, chosen in its builder and on its Profile tab with a live preview, Shuffle and a way back to the face its seed gives it; the face blinks on its own time, breathes, narrows its eyes while the agent works, shuts them asleep and bounces when it finishes, all of it still for anyone who asked for less motion. Wherever an agent shows, in chat, in a list, on a mention, on a review or a commit, its avatar carries an agent marker, and the people reading it are told so. In Chat, direct messages are two lists: People, and Agents, which also holds the agents you haven't talked to yet; a conversation with both a person and an agent in it is marked in the list, named in the conversation's header, spelled out by the composer and explained once the first time it opens. Agents keep their look in the agents service, which every service passes along. The chat and agents guides say so, and CONTRIBUTING makes the shared avatar the only way to draw an agent. | 64 | /* A template's creature, on hover: a small, quick wiggle (components/agent-avatar.tsx). */ |
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 65 | --animate-wiggle: wiggle 0.45s ease-in-out; |
| Workspace names and icons, and a component kit for every control | 66 | |
| 67 | /* Menus, popovers and dialogs (components/ui): in quickly, out quicker. */ | |
| 68 | --animate-pop-in: pop-in 0.16s cubic-bezier(0.16, 1, 0.3, 1); | |
| 69 | --animate-pop-out: pop-out 0.1s ease-in forwards; | |
| 70 | --animate-fade-in: fade-in 0.16s ease-out; | |
| 71 | --animate-fade-out: fade-out 0.12s ease-in forwards; | |
| 72 | --animate-dialog-in: dialog-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); | |
| 73 | --animate-dialog-out: dialog-out 0.12s ease-in forwards; | |
| Inbox: a bell in the top bar opens it beside the page, and /inbox holds it all | 74 | /* Sheets (components/ui/sheet.tsx) slide in from their edge. */ |
| 75 | --animate-sheet-in-right: sheet-in-right 0.24s cubic-bezier(0.16, 1, 0.3, 1); | |
| 76 | --animate-sheet-out-right: sheet-out-right 0.16s ease-in forwards; | |
| 77 | --animate-sheet-in-left: sheet-in-left 0.24s cubic-bezier(0.16, 1, 0.3, 1); | |
| 78 | --animate-sheet-out-left: sheet-out-left 0.16s ease-in forwards; | |
| 79 | } | |
| 80 | ||
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 81 | @keyframes sheet-in-bottom { |
| 82 | from { | |
| 83 | transform: translateY(100%); | |
| 84 | } | |
| 85 | } | |
| 86 | ||
| Inbox: a bell in the top bar opens it beside the page, and /inbox holds it all | 87 | @keyframes sheet-in-right { |
| 88 | from { | |
| 89 | transform: translateX(100%); | |
| 90 | } | |
| 91 | } | |
| 92 | ||
| 93 | @keyframes sheet-out-right { | |
| 94 | to { | |
| 95 | transform: translateX(100%); | |
| 96 | } | |
| 97 | } | |
| 98 | ||
| 99 | @keyframes sheet-in-left { | |
| 100 | from { | |
| 101 | transform: translateX(-100%); | |
| 102 | } | |
| 103 | } | |
| 104 | ||
| 105 | @keyframes sheet-out-left { | |
| 106 | to { | |
| 107 | transform: translateX(-100%); | |
| 108 | } | |
| Workspace names and icons, and a component kit for every control | 109 | } |
| 110 | ||
| 111 | @keyframes pop-in { | |
| 112 | from { | |
| 113 | opacity: 0; | |
| 114 | transform: scale(0.96) translateY(-2px); | |
| 115 | } | |
| 116 | } | |
| 117 | ||
| 118 | @keyframes pop-out { | |
| 119 | to { | |
| 120 | opacity: 0; | |
| 121 | transform: scale(0.96); | |
| 122 | } | |
| 123 | } | |
| 124 | ||
| 125 | @keyframes fade-in { | |
| 126 | from { | |
| 127 | opacity: 0; | |
| 128 | } | |
| 129 | } | |
| 130 | ||
| 131 | @keyframes fade-out { | |
| 132 | to { | |
| 133 | opacity: 0; | |
| 134 | } | |
| 135 | } | |
| 136 | ||
| 137 | @keyframes dialog-in { | |
| 138 | from { | |
| 139 | opacity: 0; | |
| 140 | transform: translateY(6px) scale(0.97); | |
| 141 | } | |
| 142 | } | |
| 143 | ||
| 144 | @keyframes dialog-out { | |
| 145 | to { | |
| 146 | opacity: 0; | |
| 147 | transform: translateY(6px) scale(0.97); | |
| 148 | } | |
| Projects live: fixes from walking them end to end | 149 | } |
| 150 | ||
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 151 | /* Never from nothing: the first paint already shows the words. */ |
| Projects live: fixes from walking them end to end | 152 | @keyframes fade-up { |
| 153 | from { | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 154 | opacity: 0.4; |
| Projects live: fixes from walking them end to end | 155 | transform: translateY(8px); |
| 156 | } | |
| 157 | } | |
| 158 | ||
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 159 | @keyframes wiggle { |
| 160 | 25% { | |
| 161 | transform: rotate(-8deg); | |
| 162 | } | |
| 163 | 60% { | |
| 164 | transform: rotate(6deg); | |
| 165 | } | |
| 166 | } | |
| 167 | ||
| Projects live: fixes from walking them end to end | 168 | @keyframes dash { |
| 169 | to { | |
| 170 | stroke-dashoffset: -16; | |
| 171 | } | |
| 172 | } | |
| 173 | ||
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 174 | /* |
| Agents have faces, and are never mistaken for people. Every agent wears a little bot face drawn from a look it owns, shape, colour, eyes, mouth, antenna, accessory and pattern, chosen in its builder and on its Profile tab with a live preview, Shuffle and a way back to the face its seed gives it; the face blinks on its own time, breathes, narrows its eyes while the agent works, shuts them asleep and bounces when it finishes, all of it still for anyone who asked for less motion. Wherever an agent shows, in chat, in a list, on a mention, on a review or a commit, its avatar carries an agent marker, and the people reading it are told so. In Chat, direct messages are two lists: People, and Agents, which also holds the agents you haven't talked to yet; a conversation with both a person and an agent in it is marked in the list, named in the conversation's header, spelled out by the composer and explained once the first time it opens. Agents keep their look in the agents service, which every service passes along. The chat and agents guides say so, and CONTRIBUTING makes the shared avatar the only way to draw an agent. | 175 | * An agent's face (components/agent-face.tsx). Its colours are the face's |
| 176 | * own body colour (set on the element, a light-dark() pair) and these: the | |
| 177 | * ink of its eyes and mouth, a second ink for what sits outside the head, | |
| 178 | * the rim around its head, a highlight, the glow of a visor or a working | |
| 179 | * face, and two accents for a bow and a spark. It moves with transforms and opacity only: a blink and a breath | |
| 180 | * on its own beat (the delays are set per face from its seed), a pulse | |
| 181 | * while it works, a bounce when it is happy, a z when it sleeps. The | |
| 182 | * reduced-motion rule below stops every one of them, and the state's | |
| 183 | * still pose (narrowed or closed eyes) is a plain transform, so it holds. | |
| 184 | */ | |
| 185 | .agent-face { | |
| 186 | --face-ink: #1b1b22; | |
| 187 | /* What sits outside the head (antenna, hat, headphones, a z) reads on the page, not the body. */ | |
| 188 | --face-ink-out: light-dark(#1b1b22, #e9e9ee); | |
| 189 | --face-rim: color-mix(in oklab, var(--face-body), #000 24%); | |
| 190 | --face-light: #ffffff; | |
| 191 | --face-glow: light-dark(#0d7a52, #86efc4); | |
| 192 | --face-ribbon: light-dark(#6b52c8, #b6a8ff); | |
| 193 | --face-spark: light-dark(#d4a90f, #f2dc72); | |
| 194 | display: inline-block; | |
| 195 | vertical-align: middle; | |
| 196 | } | |
| 197 | .agent-face .face-bob, | |
| 198 | .agent-face .face-eyes, | |
| 199 | .agent-face .face-pupils, | |
| 200 | .agent-face .face-glow, | |
| 201 | .agent-face .face-bulb, | |
| 202 | .agent-face .face-spark, | |
| 203 | .agent-face .face-z { | |
| 204 | transform-box: fill-box; | |
| 205 | transform-origin: center; | |
| 206 | } | |
| 207 | .agent-face .face-bob { | |
| 208 | animation: face-bob 4.2s ease-in-out infinite; | |
| 209 | animation-delay: var(--face-bob-delay, 0s); | |
| 210 | } | |
| 211 | .agent-face .face-eyes { | |
| 212 | animation: face-blink var(--face-blink-period, 5s) ease-in-out infinite; | |
| 213 | animation-delay: var(--face-blink-delay, 0s); | |
| 214 | } | |
| 215 | .agent-face .face-pupils { | |
| 216 | transition: transform 0.25s ease-out; | |
| 217 | } | |
| 218 | /* A glance toward the pointer, on hover only. */ | |
| 219 | .agent-face:hover .face-pupils, | |
| 220 | a:hover > .agent-face .face-pupils, | |
| 221 | button:hover > .agent-face .face-pupils { | |
| 222 | transform: translateX(2.5px); | |
| 223 | } | |
| 224 | .agent-face .face-glow { | |
| 225 | opacity: 0; | |
| 226 | } | |
| 227 | .agent-face .face-spark { | |
| 228 | animation: face-twinkle 2.8s ease-in-out infinite; | |
| 229 | animation-delay: var(--face-bob-delay, 0s); | |
| 230 | } | |
| 231 | /* Working: eyes narrowed, no blink, a soft pulse around the head and in the bulb. */ | |
| 232 | .agent-face[data-state="working"] .face-eyes { | |
| 233 | animation: none; | |
| 234 | transform: scaleY(0.55); | |
| 235 | } | |
| 236 | .agent-face[data-state="working"] .face-glow { | |
| 237 | animation: face-pulse 1.6s ease-in-out infinite; | |
| 238 | } | |
| 239 | .agent-face[data-state="working"] .face-bulb { | |
| 240 | animation: face-bulb 1.6s ease-in-out infinite; | |
| 241 | } | |
| 242 | /* Asleep: eyes shut, a slower breath, a z drifting up. */ | |
| 243 | .agent-face[data-state="asleep"] .face-eyes { | |
| 244 | animation: none; | |
| 245 | transform: scaleY(0.1); | |
| 246 | } | |
| 247 | .agent-face[data-state="asleep"] .face-bob { | |
| 248 | animation-duration: 6s; | |
| 249 | } | |
| 250 | .agent-face[data-state="asleep"] .face-z { | |
| 251 | animation: face-zz 2.6s ease-in-out infinite; | |
| 252 | } | |
| 253 | .agent-face[data-state="asleep"] .face-z-2 { | |
| 254 | animation-delay: 1.3s; | |
| 255 | } | |
| 256 | /* Happy: a bounce, twice, then still. */ | |
| 257 | .agent-face[data-state="happy"] .face-bob { | |
| 258 | animation: face-happy 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 2; | |
| 259 | } | |
| 260 | @keyframes face-blink { | |
| 261 | 0%, | |
| 262 | 91%, | |
| 263 | 100% { | |
| 264 | transform: scaleY(1); | |
| 265 | } | |
| 266 | 94%, | |
| 267 | 96% { | |
| 268 | transform: scaleY(0.08); | |
| 269 | } | |
| 270 | } | |
| 271 | @keyframes face-bob { | |
| 272 | 0%, | |
| 273 | 100% { | |
| 274 | transform: translateY(0); | |
| 275 | } | |
| 276 | 50% { | |
| 277 | transform: translateY(-1.6px); | |
| 278 | } | |
| 279 | } | |
| 280 | @keyframes face-pulse { | |
| 281 | 0%, | |
| 282 | 100% { | |
| 283 | opacity: 0.15; | |
| 284 | } | |
| 285 | 50% { | |
| 286 | opacity: 0.55; | |
| 287 | } | |
| 288 | } | |
| 289 | @keyframes face-bulb { | |
| 290 | 0%, | |
| 291 | 100% { | |
| 292 | opacity: 0.6; | |
| 293 | transform: scale(1); | |
| 294 | } | |
| 295 | 50% { | |
| 296 | opacity: 1; | |
| 297 | transform: scale(1.15); | |
| 298 | } | |
| 299 | } | |
| 300 | @keyframes face-twinkle { | |
| 301 | 0%, | |
| 302 | 100% { | |
| 303 | opacity: 0.75; | |
| 304 | transform: scale(0.9) rotate(0deg); | |
| 305 | } | |
| 306 | 50% { | |
| 307 | opacity: 1; | |
| 308 | transform: scale(1.1) rotate(20deg); | |
| 309 | } | |
| 310 | } | |
| 311 | @keyframes face-zz { | |
| 312 | 0% { | |
| 313 | opacity: 0; | |
| 314 | transform: translate(0, 4px); | |
| 315 | } | |
| 316 | 30% { | |
| 317 | opacity: 1; | |
| 318 | } | |
| 319 | 100% { | |
| 320 | opacity: 0; | |
| 321 | transform: translate(5px, -9px); | |
| 322 | } | |
| 323 | } | |
| 324 | @keyframes face-happy { | |
| 325 | 0%, | |
| 326 | 100% { | |
| 327 | transform: translateY(0) scale(1); | |
| 328 | } | |
| 329 | 40% { | |
| 330 | transform: translateY(-6px) scale(1.06); | |
| 331 | } | |
| 332 | } | |
| 333 | ||
| 334 | /* | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 335 | * Appearance (lib/theme.ts): with no choice, or Auto, the page follows |
| 336 | * the system; a choice of Light or Dark is data-theme on <html>. | |
| 337 | */ | |
| Projects live: fixes from walking them end to end | 338 | html { |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 339 | color-scheme: light dark; |
| Projects live: fixes from walking them end to end | 340 | scroll-behavior: smooth; |
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 341 | /* A tap shows the control's own active state, not the browser's grey flash. */ |
| 342 | -webkit-tap-highlight-color: transparent; | |
| 343 | /* Phones: no text inflation on rotation. */ | |
| 344 | -webkit-text-size-adjust: 100%; | |
| 345 | text-size-adjust: 100%; | |
| Projects live: fixes from walking them end to end | 346 | } |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 347 | html[data-theme="light"] { |
| 348 | color-scheme: light; | |
| 349 | } | |
| 350 | html[data-theme="dark"] { | |
| 351 | color-scheme: dark; | |
| 352 | } | |
| Projects live: fixes from walking them end to end | 353 | |
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 354 | /* |
| g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them. | 355 | * The app's frame (components/shell.tsx), set on <body data-frame="app">: |
| The page sits flat against the sidebar. On a computer it fills the rest of the window with no inset, no rounded corners and no frame around it, and its top bar always draws the line under itself, so a page's own header, a conversation's or a project's, sits beneath it as its own band instead of merging with it; the scroll watcher that used to decide when the line appeared is gone. A phone keeps its rounded panel above the bottom bar. The workspaces guide says so. | 356 | * the page fills the window beside the rail and the sidebar; on a phone |
| 357 | * it is a rounded panel inset above the bottom bar. What sticks to the top | |
| 358 | * or the bottom of a page reads these: | |
| 359 | * --frame-top the gap above the page (none on a computer) | |
| 360 | * --topbar-h that gap plus the top bar: where sticky things sit | |
| 361 | * --tabbar-h what the bottom takes: on a phone, the gap under the panel and the bar | |
| 362 | * --page-h the height left for a page that fills the window (Chat) | |
| g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them. | 363 | * The public frame keeps a plain header 3.5rem tall and nothing at the bottom. |
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 364 | */ |
| 365 | :root { | |
| g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them. | 366 | --frame-top: 0px; |
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 367 | --tabbar-h: 0px; |
| Phones reach every page: each mode's menu from the top bar or by tapping the tab you're on, Docs first in the avatar sheet, a project's pages as a swipeable strip; dialogs as bottom sheets above the keyboard, safe areas, menus kept on screen, 40px targets, touch-visible controls, save bars above the tab bar | 368 | --topbar-h: 3.5rem; |
| g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them. | 369 | --page-h: calc(100dvh - var(--topbar-h) - var(--tabbar-h)); |
| 370 | } | |
| 371 | body[data-frame="app"] { | |
| 372 | --topbar-h: calc(var(--frame-top) + 3.5rem); | |
| 373 | --page-h: calc(100dvh - var(--topbar-h) - var(--tabbar-h)); | |
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 374 | } |
| 375 | @media (max-width: 767px) { | |
| g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them. | 376 | body[data-frame="app"] { |
| 377 | --frame-top: max(0.375rem, env(safe-area-inset-top)); | |
| 378 | /* The bottom bar: 64px tall, 8px off the edge, 6px under the panel. */ | |
| 379 | --tabbar-h: calc(4.875rem + env(safe-area-inset-bottom)); | |
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 380 | } |
| 381 | } | |
| 382 | ||
| g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them. | 383 | /* |
| 384 | * Phones: a field under 16px makes iOS zoom the page when it is focused, so | |
| 385 | * every field is at least that; and nothing scrolls the page sideways. | |
| 386 | */ | |
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 387 | @media (max-width: 767px) { |
| 388 | input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), | |
| 389 | textarea, | |
| 390 | select { | |
| 391 | font-size: max(16px, 1em) !important; | |
| 392 | } | |
| 393 | body { | |
| 394 | overflow-x: clip; | |
| 395 | } | |
| 396 | } | |
| 397 | ||
| Projects live: fixes from walking them end to end | 398 | body { |
| 399 | @apply bg-bg font-sans text-fg antialiased; | |
| 400 | } | |
| g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them. | 401 | body[data-frame="app"] { |
| 402 | @apply bg-shell; | |
| 403 | } | |
| Projects live: fixes from walking them end to end | 404 | |
| 405 | ::selection { | |
| 406 | background: color-mix(in srgb, var(--color-accent) 35%, transparent); | |
| 407 | } | |
| 408 | ||
| 409 | /* In the base layer, so a component can opt out with a utility. */ | |
| 410 | @layer base { | |
| 411 | :focus-visible { | |
| 412 | outline: 2px solid var(--color-accent); | |
| 413 | outline-offset: 2px; | |
| 414 | } | |
| 415 | ||
| 416 | /* | |
| 417 | * A grid's items may shrink below their content. Without this, one long | |
| 418 | * line that does not wrap (a command, a commit hash, an address) widens | |
| 419 | * the whole column, and on a phone the page scrolls sideways. | |
| 420 | */ | |
| 421 | .grid > * { | |
| 422 | min-width: 0; | |
| 423 | } | |
| 424 | ||
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 425 | /* |
| 426 | * Headlines are set in Bricolage Grotesque, its optical size following | |
| 427 | * the font size; small section labels that happen to be headings stay in | |
| 428 | * the text face. A utility on the element still wins. | |
| 429 | */ | |
| 430 | :where(h1, h2), | |
| 431 | :where(h3):is(.text-xl, .text-2xl, .text-3xl, .text-4xl) { | |
| 432 | font-family: var(--font-display); | |
| 433 | font-optical-sizing: auto; | |
| 434 | } | |
| 435 | :where(h2):is(.text-xs, .text-sm, .text-base) { | |
| 436 | font-family: var(--font-sans); | |
| 437 | } | |
| 438 | ||
| Projects live: fixes from walking them end to end | 439 | /* Checkboxes, radios and ranges in g1t's own colour, not the browser's. */ |
| 440 | :root { | |
| 441 | accent-color: var(--color-accent); | |
| 442 | } | |
| The top of every page is one surface: the breadcrumb, search, spend, Ask g1t, bell and + share one height, corners and spacing, Ask g1t is a plain tinted button with the g1t mark drawn on whole pixels, a page's own header sits directly under the bar at the same left edge, and every section, conversations and open artifacts included, draws the same rounded panel. Tables written in chat render as tables, and the site's file, checkbox, radio, number and date controls are the design system's. Button, Separator, Breadcrumb, Table and FileDrop join the shared components; the chat guide says how tables work. | 443 | |
| 444 | /* | |
| 445 | * Number fields have no spin buttons: the arrow keys still step them, and | |
| 446 | * their digits line up in columns. | |
| 447 | */ | |
| 448 | input[type="number"] { | |
| 449 | -moz-appearance: textfield; | |
| 450 | appearance: textfield; | |
| 451 | font-variant-numeric: tabular-nums; | |
| 452 | } | |
| 453 | input[type="number"]::-webkit-inner-spin-button, | |
| 454 | input[type="number"]::-webkit-outer-spin-button { | |
| 455 | -webkit-appearance: none; | |
| 456 | appearance: none; | |
| 457 | margin: 0; | |
| 458 | } | |
| 459 | ||
| 460 | /* | |
| 461 | * Date and time fields: the picker's icon is drawn by the browser in the | |
| 462 | * page's color-scheme (set on <html> above), so it is right in both | |
| 463 | * themes; it sits quiet until hovered. The part being edited is marked | |
| 464 | * in the accent, not the system's blue. | |
| 465 | */ | |
| 466 | input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) { | |
| 467 | font-variant-numeric: tabular-nums; | |
| 468 | } | |
| 469 | ::-webkit-calendar-picker-indicator { | |
| 470 | cursor: pointer; | |
| 471 | border-radius: 0.25rem; | |
| 472 | opacity: 0.55; | |
| 473 | transition: opacity 150ms; | |
| 474 | } | |
| 475 | ::-webkit-calendar-picker-indicator:hover, | |
| 476 | ::-webkit-calendar-picker-indicator:focus-visible { | |
| 477 | opacity: 1; | |
| 478 | } | |
| 479 | ::-webkit-datetime-edit-fields-wrapper { | |
| 480 | padding: 0; | |
| 481 | } | |
| 482 | ::-webkit-datetime-edit-text { | |
| 483 | color: var(--color-faint); | |
| 484 | } | |
| 485 | ::-webkit-datetime-edit-year-field:focus, | |
| 486 | ::-webkit-datetime-edit-month-field:focus, | |
| 487 | ::-webkit-datetime-edit-day-field:focus, | |
| 488 | ::-webkit-datetime-edit-hour-field:focus, | |
| 489 | ::-webkit-datetime-edit-minute-field:focus, | |
| 490 | ::-webkit-datetime-edit-second-field:focus, | |
| 491 | ::-webkit-datetime-edit-millisecond-field:focus, | |
| 492 | ::-webkit-datetime-edit-meridiem-field:focus { | |
| 493 | border-radius: 0.1875rem; | |
| 494 | background-color: color-mix(in srgb, var(--color-accent) 25%, transparent); | |
| 495 | color: var(--color-fg); | |
| 496 | } | |
| 497 | ||
| 498 | /* A colour field is a rounded swatch with a hairline, not a grey button. */ | |
| 499 | input[type="color"] { | |
| 500 | -webkit-appearance: none; | |
| 501 | appearance: none; | |
| 502 | cursor: pointer; | |
| 503 | padding: 0.1875rem; | |
| 504 | border: 1px solid var(--color-line); | |
| 505 | border-radius: 0.375rem; | |
| 506 | background-color: var(--color-bg); | |
| 507 | } | |
| 508 | input[type="color"]:hover { | |
| 509 | border-color: var(--color-line-strong); | |
| 510 | } | |
| 511 | input[type="color"]::-webkit-color-swatch-wrapper { | |
| 512 | padding: 0; | |
| 513 | } | |
| 514 | input[type="color"]::-webkit-color-swatch { | |
| 515 | border: none; | |
| 516 | border-radius: 0.25rem; | |
| 517 | } | |
| 518 | input[type="color"]::-moz-color-swatch { | |
| 519 | border: none; | |
| 520 | border-radius: 0.25rem; | |
| 521 | } | |
| 522 | ||
| 523 | /* A search field's clear button is the browser's own: g1t's fields don't show it. */ | |
| 524 | input[type="search"]::-webkit-search-cancel-button, | |
| 525 | input[type="search"]::-webkit-search-decoration { | |
| 526 | -webkit-appearance: none; | |
| 527 | appearance: none; | |
| 528 | } | |
| 529 | ||
| 530 | /* | |
| 531 | * A <summary> that keeps the browser's disclosure triangle has it quiet, | |
| 532 | * in the faint text colour; one that draws its own hides it with list-none. | |
| 533 | */ | |
| 534 | summary { | |
| 535 | cursor: pointer; | |
| 536 | } | |
| 537 | summary::marker { | |
| 538 | color: var(--color-faint); | |
| 539 | } | |
| 540 | summary::-webkit-details-marker { | |
| 541 | color: var(--color-faint); | |
| 542 | } | |
| Projects live: fixes from walking them end to end | 543 | } |
| 544 | ||
| 545 | @media (prefers-reduced-motion: reduce) { | |
| 546 | *, | |
| 547 | *::before, | |
| 548 | *::after { | |
| 549 | animation: none !important; | |
| 550 | scroll-behavior: auto !important; | |
| 551 | } | |
| 552 | } | |
| 553 | ||
| 554 | /* Rendered markdown: READMEs, briefs and docs. */ | |
| 555 | .prose > :first-child { | |
| 556 | margin-top: 0; | |
| 557 | padding-top: 0; | |
| 558 | } | |
| 559 | .prose { | |
| 560 | @apply leading-7 text-fg; | |
| 561 | } | |
| 562 | .prose > * + * { | |
| 563 | @apply mt-4; | |
| 564 | } | |
| 565 | .prose h1 { | |
| 566 | @apply mt-0 text-3xl font-semibold tracking-tight; | |
| 567 | } | |
| 568 | .prose h2 { | |
| 569 | @apply mt-10 border-b border-line pb-2 text-xl font-semibold tracking-tight; | |
| 570 | } | |
| 571 | .prose h3 { | |
| 572 | @apply mt-8 text-base font-semibold; | |
| 573 | } | |
| 574 | .prose p, | |
| 575 | .prose li { | |
| 576 | @apply text-[0.9375rem] text-fg/90; | |
| 577 | } | |
| 578 | .prose a { | |
| 579 | @apply text-accent underline decoration-accent/40 underline-offset-4 hover:decoration-accent; | |
| 580 | } | |
| 581 | .prose ul { | |
| 582 | @apply list-disc space-y-1.5 pl-6; | |
| 583 | } | |
| 584 | .prose ol { | |
| 585 | @apply list-decimal space-y-1.5 pl-6; | |
| 586 | } | |
| 587 | .prose code { | |
| 588 | @apply rounded bg-raised px-1.5 py-0.5 font-mono text-[0.85em]; | |
| 589 | } | |
| 590 | .prose pre { | |
| 591 | @apply overflow-x-auto rounded-lg border border-line bg-surface p-4 font-mono text-sm leading-6; | |
| 592 | } | |
| 593 | .prose pre code { | |
| 594 | @apply bg-transparent p-0; | |
| 595 | } | |
| 596 | .prose blockquote { | |
| 597 | @apply border-l-2 border-line-strong pl-4 text-muted; | |
| 598 | } | |
| 599 | .prose table { | |
| 600 | @apply w-full border-collapse text-sm; | |
| 601 | } | |
| 602 | .prose th { | |
| 603 | @apply border-b border-line-strong px-3 py-2 text-left font-medium text-muted; | |
| 604 | } | |
| 605 | .prose td { | |
| 606 | @apply border-b border-line px-3 py-2 align-top; | |
| 607 | } | |
| 608 | .prose hr { | |
| 609 | @apply border-line; | |
| 610 | } | |
| 611 | .prose h4 { | |
| 612 | @apply mt-6 text-sm font-semibold; | |
| 613 | } | |
| 614 | .prose li.task-list-item { | |
| 615 | @apply list-none; | |
| 616 | } | |
| 617 | .prose ul.contains-task-list { | |
| 618 | @apply pl-1; | |
| 619 | } | |
| 620 | .prose kbd { | |
| 621 | @apply rounded border border-line-strong bg-raised px-1.5 py-px font-mono text-[0.8em] shadow-[inset_0_-1px_0_var(--color-line-strong)]; | |
| 622 | } | |
| 623 | .prose del { | |
| 624 | @apply text-muted; | |
| 625 | } | |
| 626 | .prose details { | |
| 627 | @apply rounded-lg border border-line px-4 py-2; | |
| 628 | } | |
| 629 | .prose summary { | |
| 630 | @apply cursor-pointer font-medium; | |
| 631 | } | |
| 632 | .prose img { | |
| 633 | @apply inline max-w-full; | |
| 634 | } | |
| 635 | .prose section[data-footnotes] { | |
| 636 | @apply mt-10 border-t border-line pt-4 text-sm text-muted; | |
| 637 | } | |
| 638 | .prose a[data-footnote-ref] { | |
| 639 | @apply no-underline; | |
| 640 | } | |
| 641 | ||
| 642 | /* Syntax-highlighted code from Shiki. */ | |
| 643 | .shiki { | |
| 644 | @apply bg-transparent! font-mono text-sm leading-6; | |
| 645 | } | |
| 646 | .shiki code { | |
| 647 | counter-reset: line; | |
| 648 | display: block; | |
| 649 | } | |
| 650 | .shiki .line::before { | |
| 651 | counter-increment: line; | |
| 652 | content: counter(line); | |
| 653 | @apply mr-5 inline-block w-10 text-right text-faint select-none; | |
| 654 | } | |
| 655 | ||
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 656 | /* |
| 657 | * Artwork (components/art.tsx). Every piece loops on its drawing's | |
| 658 | * `--dur` and starts at its own `--delay`, so the parts of one drawing | |
| 659 | * stay in step. Only transforms, opacity and stroke offsets move. The | |
| 660 | * resting style of each class is the finished picture: that is what | |
| 661 | * prefers-reduced-motion shows, since the rule above stops every | |
| 662 | * animation. | |
| 663 | */ | |
| Projects live: fixes from walking them end to end | 664 | .art-flow { |
| 665 | animation: dash 1.6s linear infinite; | |
| 666 | } | |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 667 | |
| 668 | /* Something travelling along a track (pathLength 100). Unseen at rest. */ | |
| 669 | .art-packet { | |
| 670 | opacity: 0; | |
| 671 | stroke-dasharray: 4 200; | |
| 672 | stroke-dashoffset: 4; | |
| 673 | animation: art-travel var(--dur, 3s) cubic-bezier(0.45, 0, 0.35, 1) infinite; | |
| 674 | animation-delay: var(--delay, 0s); | |
| 675 | } | |
| 676 | @keyframes art-travel { | |
| 677 | 0% { | |
| 678 | stroke-dashoffset: 4; | |
| 679 | opacity: 0; | |
| 680 | } | |
| 681 | 3% { | |
| 682 | opacity: 1; | |
| 683 | } | |
| 684 | 32% { | |
| 685 | opacity: 1; | |
| 686 | } | |
| 687 | 36%, | |
| 688 | 100% { | |
| 689 | stroke-dashoffset: -100; | |
| 690 | opacity: 0; | |
| 691 | } | |
| 692 | } | |
| 693 | ||
| 694 | /* A face that lights up for most of the loop. Lit at rest. */ | |
| 695 | .art-lit { | |
| 696 | opacity: 0.85; | |
| 697 | animation: art-lit var(--dur, 8s) ease-in-out infinite both; | |
| 698 | animation-delay: var(--delay, 0s); | |
| 699 | } | |
| 700 | @keyframes art-lit { | |
| 701 | 0%, | |
| 702 | 4% { | |
| 703 | opacity: 0; | |
| 704 | } | |
| 705 | 12%, | |
| 706 | 70% { | |
| 707 | opacity: 0.9; | |
| 708 | } | |
| 709 | 88%, | |
| 710 | 100% { | |
| 711 | opacity: 0; | |
| 712 | } | |
| 713 | } | |
| 714 | ||
| 715 | /* A short flash, as a check runs over a layer. Unseen at rest. */ | |
| 716 | .art-scan { | |
| 717 | opacity: 0; | |
| 718 | animation: art-scan var(--dur, 8s) ease-out infinite both; | |
| 719 | animation-delay: var(--delay, 0s); | |
| 720 | } | |
| 721 | @keyframes art-scan { | |
| 722 | 0% { | |
| 723 | opacity: 0; | |
| 724 | } | |
| 725 | 4% { | |
| 726 | opacity: 1; | |
| 727 | } | |
| 728 | 16%, | |
| 729 | 100% { | |
| 730 | opacity: 0; | |
| 731 | } | |
| 732 | } | |
| 733 | ||
| 734 | /* A line that draws itself, then fades. Drawn at rest. */ | |
| 735 | .art-draw { | |
| 736 | stroke-dasharray: 100; | |
| 737 | stroke-dashoffset: 0; | |
| 738 | animation: art-draw var(--dur, 8s) ease-in-out infinite both; | |
| 739 | animation-delay: var(--delay, 0s); | |
| 740 | } | |
| 741 | @keyframes art-draw { | |
| 742 | 0% { | |
| 743 | stroke-dashoffset: 100; | |
| 744 | opacity: 1; | |
| 745 | } | |
| 746 | 14%, | |
| 747 | 70% { | |
| 748 | stroke-dashoffset: 0; | |
| 749 | opacity: 1; | |
| 750 | } | |
| 751 | 88%, | |
| 752 | 100% { | |
| 753 | stroke-dashoffset: 0; | |
| 754 | opacity: 0; | |
| 755 | } | |
| 756 | } | |
| 757 | ||
| 758 | /* Something that appears, stays, and goes. Shown at rest. */ | |
| 759 | .art-pop { | |
| 760 | animation: art-pop var(--dur, 8s) ease-out infinite both; | |
| 761 | animation-delay: var(--delay, 0s); | |
| 762 | } | |
| 763 | @keyframes art-pop { | |
| 764 | 0% { | |
| 765 | opacity: 0; | |
| 766 | transform: translateY(4px); | |
| 767 | } | |
| 768 | 6%, | |
| 769 | 72% { | |
| 770 | opacity: 1; | |
| 771 | transform: none; | |
| 772 | } | |
| 773 | 86%, | |
| 774 | 100% { | |
| 775 | opacity: 0; | |
| 776 | transform: none; | |
| 777 | } | |
| 778 | } | |
| 779 | ||
| 780 | /* A layer dropping onto a stack. In place at rest. */ | |
| 781 | .art-drop { | |
| 782 | animation: art-drop var(--dur, 7s) cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite both; | |
| 783 | animation-delay: var(--delay, 0s); | |
| 784 | } | |
| 785 | @keyframes art-drop { | |
| 786 | 0% { | |
| 787 | opacity: 0; | |
| 788 | transform: translateY(-26px); | |
| 789 | } | |
| 790 | 8%, | |
| 791 | 74% { | |
| 792 | opacity: 1; | |
| 793 | transform: none; | |
| 794 | } | |
| 795 | 88%, | |
| 796 | 100% { | |
| 797 | opacity: 0; | |
| 798 | transform: none; | |
| 799 | } | |
| 800 | } | |
| 801 | ||
| 802 | /* The layer that fails: drops, shakes, and is sent back. */ | |
| 803 | .art-eject { | |
| 804 | animation: art-eject var(--dur, 7s) ease-in-out infinite both; | |
| 805 | animation-delay: var(--delay, 0s); | |
| 806 | } | |
| 807 | @keyframes art-eject { | |
| 808 | 0% { | |
| 809 | opacity: 0; | |
| 810 | transform: translateY(-26px); | |
| 811 | } | |
| 812 | 8%, | |
| 813 | 30% { | |
| 814 | opacity: 1; | |
| 815 | transform: none; | |
| 816 | } | |
| 817 | 33% { | |
| 818 | transform: translateX(-3px); | |
| 819 | } | |
| 820 | 36% { | |
| 821 | transform: translateX(3px); | |
| 822 | } | |
| 823 | 39% { | |
| 824 | transform: translateX(-2px); | |
| 825 | } | |
| 826 | 42% { | |
| 827 | opacity: 1; | |
| 828 | transform: none; | |
| 829 | } | |
| 830 | 56%, | |
| 831 | 100% { | |
| 832 | opacity: 0; | |
| 833 | transform: translate(-40px, -22px); | |
| 834 | } | |
| 835 | } | |
| 836 | ||
| 837 | /* A layer rising out of the one below it. In place at rest. */ | |
| 838 | .art-rise { | |
| 839 | animation: art-rise var(--dur, 7s) cubic-bezier(0.2, 0.8, 0.3, 1) infinite both; | |
| 840 | animation-delay: var(--delay, 0s); | |
| 841 | } | |
| 842 | @keyframes art-rise { | |
| 843 | 0% { | |
| 844 | opacity: 0; | |
| 845 | transform: translateY(14px); | |
| 846 | } | |
| 847 | 10%, | |
| 848 | 70% { | |
| 849 | opacity: 1; | |
| 850 | transform: none; | |
| 851 | } | |
| 852 | 86%, | |
| 853 | 100% { | |
| 854 | opacity: 0; | |
| 855 | transform: none; | |
| 856 | } | |
| 857 | } | |
| 858 | ||
| 859 | /* A soft glow breathing around a point. */ | |
| 860 | .art-pulse { | |
| 861 | transform-box: fill-box; | |
| 862 | transform-origin: center; | |
| 863 | animation: art-pulse var(--dur, 4s) ease-in-out infinite; | |
| 864 | animation-delay: var(--delay, 0s); | |
| 865 | } | |
| 866 | @keyframes art-pulse { | |
| 867 | 0%, | |
| 868 | 100% { | |
| 869 | transform: scale(0.8); | |
| 870 | opacity: 1; | |
| 871 | } | |
| 872 | 50% { | |
| 873 | transform: scale(1.5); | |
| 874 | opacity: 0.35; | |
| 875 | } | |
| 876 | } | |
| 877 | ||
| 878 | /* Drawings off-screen hold still (components/art.tsx, Live). */ | |
| 879 | [data-paused] * { | |
| 880 | animation-play-state: paused !important; | |
| 881 | } | |
| 882 | /* | |
| 883 | * Each drawing on its own layer, so a frame of its motion repaints only the | |
| 884 | * drawing, not the page around it or the blurred header passing over it. | |
| 885 | */ | |
| 886 | [data-live] { | |
| 887 | will-change: transform; | |
| 888 | } | |
| 889 | ||
| 890 | /* The landing page's steps, lit in turn along their line. */ | |
| 891 | /* The ring is drawn once and only fades and grows, so the compositor runs it. */ | |
| 892 | .flow-step::after { | |
| 893 | content: ""; | |
| 894 | position: absolute; | |
| 895 | inset: 0; | |
| 896 | border-radius: inherit; | |
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 897 | box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent); |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 898 | opacity: 0; |
| 899 | pointer-events: none; | |
| 900 | animation: flow-step 10s ease-in-out infinite both; | |
| 901 | animation-delay: var(--delay, 0s); | |
| 902 | } | |
| 903 | @keyframes flow-step { | |
| 904 | 0%, | |
| 905 | 100% { | |
| 906 | opacity: 0; | |
| 907 | transform: scale(0.82); | |
| 908 | } | |
| 909 | 6% { | |
| 910 | opacity: 1; | |
| 911 | transform: none; | |
| 912 | } | |
| 913 | 16% { | |
| 914 | opacity: 0; | |
| 915 | transform: none; | |
| 916 | } | |
| 917 | } | |
| 918 | .flow-runner { | |
| 919 | animation: flow-runner 10s cubic-bezier(0.45, 0, 0.35, 1) infinite both; | |
| 920 | } | |
| 921 | @keyframes flow-runner { | |
| 922 | 0% { | |
| 923 | transform: translateX(0); | |
| 924 | opacity: 0; | |
| 925 | } | |
| 926 | 4%, | |
| 927 | 76% { | |
| 928 | opacity: 1; | |
| 929 | } | |
| 930 | 80%, | |
| 931 | 100% { | |
| 932 | transform: translateX(100%); | |
| 933 | opacity: 0; | |
| 934 | } | |
| 935 | } | |
| Projects live: fixes from walking them end to end | 936 | @media (prefers-reduced-motion: reduce) { |
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 937 | .flow-runner { |
| 938 | display: none; | |
| Projects live: fixes from walking them end to end | 939 | } |
| 940 | } | |
| 941 | ||
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 942 | /* The sidebar trading one far-side menu for another, in place. */ |
| 943 | @keyframes g1t-swap { | |
| 944 | from { | |
| 945 | opacity: 0; | |
| 946 | transform: translateX(10px); | |
| 947 | } | |
| 948 | to { | |
| 949 | opacity: 1; | |
| 950 | transform: none; | |
| 951 | } | |
| 952 | } | |
| 953 | ||
| Projects live: fixes from walking them end to end | 954 | /* |
| 955 | * Behind the landing page's opening: the same dark gray, with a faint | |
| 956 | * lavender and peach glow low on the horizon and a few stars. | |
| 957 | */ | |
| 958 | .dusk { | |
| 959 | background: | |
| 960 | radial-gradient(1px 1px at 12% 18%, rgb(255 255 255 / 0.35), transparent), | |
| 961 | radial-gradient(1px 1px at 27% 8%, rgb(255 255 255 / 0.25), transparent), | |
| 962 | radial-gradient(1px 1px at 63% 12%, rgb(255 255 255 / 0.3), transparent), | |
| 963 | radial-gradient(1.5px 1.5px at 90% 9%, rgb(255 255 255 / 0.35), transparent), | |
| 964 | radial-gradient(60% 35% at 50% 100%, rgb(255 189 140 / 0.08), transparent 70%), | |
| 965 | radial-gradient(80% 45% at 50% 100%, rgb(182 168 255 / 0.1), transparent 75%), | |
| 966 | var(--color-bg); | |
| 967 | } | |
| 968 | /* A planet rising behind the horizon, its lit edge catching the glow. */ | |
| 969 | .dusk-planet { | |
| 970 | background: radial-gradient(circle at 70% 30%, rgb(182 168 255 / 0.12), rgb(255 189 140 / 0.04) 45%, transparent 70%); | |
| 971 | box-shadow: inset 14px -8px 50px rgb(255 214 186 / 0.07); | |
| 972 | } | |
| Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002) | 973 | |
| 974 | /* | |
| 975 | * On a phone, every field's text is at least 16px: iOS zooms the page into | |
| 976 | * a field set smaller as soon as it is focused. Unlayered, so it wins over | |
| 977 | * a field's text-sm utility. | |
| 978 | */ | |
| 979 | @media (max-width: 639px) { | |
| 980 | input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), | |
| 981 | textarea, | |
| 982 | select { | |
| 983 | font-size: max(16px, 1em); | |
| 984 | } | |
| 985 | } | |
| Cards you act on in chat; agents comment and review as themselves; names shown cleanly; commits on the calendar | 986 | |
| 987 | /* A card's Markdown preview in chat (components/chat/card.tsx): the same Markdown, smaller and tighter. */ | |
| 988 | .card-md .prose { | |
| 989 | @apply text-[0.8125rem] leading-relaxed; | |
| 990 | } | |
| 991 | .card-md .prose > * + * { | |
| 992 | @apply mt-2; | |
| 993 | } | |
| 994 | .card-md .prose p, | |
| 995 | .card-md .prose li { | |
| 996 | @apply text-[0.8125rem] text-fg/85; | |
| 997 | } | |
| 998 | .card-md .prose h1, | |
| 999 | .card-md .prose h2, | |
| 1000 | .card-md .prose h3, | |
| 1001 | .card-md .prose h4 { | |
| 1002 | @apply mt-3 border-0 pb-0 text-sm font-semibold; | |
| 1003 | } | |
| 1004 | .card-md .prose ul, | |
| 1005 | .card-md .prose ol { | |
| 1006 | @apply space-y-0.5 pl-5; | |
| 1007 | } | |
| 1008 | .card-md .prose pre { | |
| 1009 | @apply p-2.5 text-xs leading-5; | |
| 1010 | } | |
| Docs: a workspace knowledge base people and agents write together | 1011 | |
| 1012 | /* | |
| 1013 | * The Docs page editor (components/docs/editor.tsx) is BlockNote with its | |
| 1014 | * shadcn components. Their classes are generated from the package, and | |
| 1015 | * shadcn's token names map onto g1t's. `accent` and `muted` mean | |
| 1016 | * something else in shadcn (a hover fill, a quiet fill), so inside the | |
| 1017 | * editor they are redefined; g1t's own blocks there use the g1t tokens | |
| 1018 | * directly. | |
| 1019 | */ | |
| 1020 | @source "../../../node_modules/@blocknote/shadcn/dist"; | |
| 1021 | ||
| 1022 | @theme { | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 1023 | --color-background: var(--color-bg); |
| 1024 | --color-foreground: var(--color-fg); | |
| 1025 | --color-popover: var(--color-surface); | |
| 1026 | --color-popover-foreground: var(--color-fg); | |
| 1027 | --color-card: var(--color-surface); | |
| 1028 | --color-card-foreground: var(--color-fg); | |
| 1029 | --color-primary: var(--color-accent); | |
| 1030 | --color-primary-foreground: var(--color-bg); | |
| 1031 | --color-secondary: var(--color-raised); | |
| 1032 | --color-secondary-foreground: var(--color-fg); | |
| 1033 | --color-muted-foreground: var(--color-muted); | |
| 1034 | --color-accent-foreground: var(--color-fg); | |
| 1035 | --color-destructive: var(--color-danger); | |
| 1036 | --color-destructive-foreground: var(--color-bg); | |
| 1037 | --color-border: var(--color-line); | |
| 1038 | --color-input: var(--color-line); | |
| 1039 | --color-ring: var(--color-accent); | |
| Docs: a workspace knowledge base people and agents write together | 1040 | } |
| 1041 | ||
| 1042 | .bn-shadcn { | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 1043 | --color-accent: var(--color-raised); |
| 1044 | --color-muted: var(--color-raised); | |
| Docs: a workspace knowledge base people and agents write together | 1045 | --bn-colors-editor-background: transparent; |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 1046 | --bn-colors-editor-text: var(--color-fg); |
| 1047 | --bn-colors-menu-background: var(--color-surface); | |
| 1048 | --bn-colors-menu-text: var(--color-fg); | |
| 1049 | --bn-colors-hovered-background: var(--color-raised); | |
| 1050 | --bn-colors-side-menu: var(--color-faint); | |
| 1051 | --bn-colors-border: var(--color-line); | |
| Docs: a workspace knowledge base people and agents write together | 1052 | --bn-border-radius: 8px; |
| 1053 | } | |
| 1054 | ||
| 1055 | .g1t-editor .bn-editor { | |
| 1056 | font-family: var(--g1t-font-sans); | |
| 1057 | font-size: 1rem; | |
| 1058 | line-height: 1.65; | |
| 1059 | background: transparent; | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 1060 | color: var(--color-fg); |
| Docs: a workspace knowledge base people and agents write together | 1061 | } |
| 1062 | ||
| 1063 | /* The drag handle and + sit in the margin, so the text lines up with the title. */ | |
| 1064 | @media (min-width: 768px) { | |
| 1065 | .g1t-editor .bn-container { | |
| 1066 | margin-inline: -54px; | |
| 1067 | } | |
| 1068 | } | |
| 1069 | ||
| 1070 | .g1t-editor .bn-block-content[data-content-type="heading"] h1, | |
| 1071 | .g1t-editor .bn-block-content[data-content-type="heading"] h2, | |
| 1072 | .g1t-editor .bn-block-content[data-content-type="heading"] h3 { | |
| 1073 | font-family: var(--g1t-font-display); | |
| 1074 | letter-spacing: -0.012em; | |
| 1075 | } | |
| 1076 | ||
| 1077 | .g1t-editor .bn-inline-content code { | |
| 1078 | font-family: var(--g1t-font-mono); | |
| 1079 | font-size: 0.875em; | |
| 1080 | padding: 0.1em 0.35em; | |
| 1081 | border-radius: 4px; | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 1082 | background: var(--color-raised); |
| Docs: a workspace knowledge base people and agents write together | 1083 | } |
| 1084 | ||
| 1085 | .g1t-editor .bn-block-content[data-content-type="codeBlock"] { | |
| 1086 | border-radius: 10px; | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 1087 | background: var(--color-surface); |
| 1088 | border: 1px solid var(--color-line); | |
| Docs: a workspace knowledge base people and agents write together | 1089 | } |
| 1090 | ||
| 1091 | .g1t-editor .bn-thread-mark { | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 1092 | background: color-mix(in srgb, var(--color-warn) 22%, transparent); |
| 1093 | border-bottom: 2px solid color-mix(in srgb, var(--color-warn) 60%, transparent); | |
| Docs: a workspace knowledge base people and agents write together | 1094 | } |
| 1095 | ||
| 1096 | .g1t-editor a { | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 1097 | color: var(--color-accent); |
| Docs: a workspace knowledge base people and agents write together | 1098 | } |
| 1099 | ||
| 1100 | /* A page read before the editor loads: the same measure as the editor. */ | |
| 1101 | .docs-read .prose { | |
| 1102 | font-size: 1rem; | |
| 1103 | line-height: 1.65; | |
| 1104 | } | |
| 1105 | ||
| Merge main into Artifacts Phase 2 | 1106 | /* The chat composer (components/chat/editor.tsx): formatting as messages show it. */ |
| 1107 | .chat-editor { | |
| 1108 | white-space: pre-wrap; | |
| 1109 | word-break: break-word; | |
| 1110 | min-height: 1.5rem; | |
| 1111 | } | |
| 1112 | .chat-editor p.is-editor-empty:first-child::before { | |
| 1113 | content: attr(data-placeholder); | |
| 1114 | float: left; | |
| 1115 | height: 0; | |
| 1116 | pointer-events: none; | |
| 1117 | color: var(--color-faint); | |
| 1118 | } | |
| 1119 | .chat-editor strong { | |
| 1120 | @apply font-semibold text-fg; | |
| 1121 | } | |
| 1122 | .chat-editor s { | |
| 1123 | @apply text-muted; | |
| 1124 | } | |
| 1125 | .chat-editor a { | |
| 1126 | @apply text-accent underline underline-offset-2; | |
| 1127 | } | |
| 1128 | .chat-editor code { | |
| 1129 | @apply rounded-[4px] border border-line bg-raised px-1 py-px font-mono text-[0.84em] text-fg-soft; | |
| 1130 | } | |
| 1131 | .chat-editor pre { | |
| 1132 | @apply my-1 rounded-md border border-line bg-bg px-3 py-2 font-mono text-[0.8125rem] leading-relaxed text-fg-soft; | |
| 1133 | } | |
| 1134 | .chat-editor pre code { | |
| 1135 | @apply border-0 bg-transparent p-0 text-[1em]; | |
| 1136 | } | |
| 1137 | .chat-editor ul { | |
| 1138 | @apply list-disc pl-5 marker:text-faint; | |
| 1139 | } | |
| 1140 | .chat-editor ol { | |
| 1141 | @apply list-decimal pl-5 marker:text-faint; | |
| 1142 | } | |
| 1143 | .chat-editor li > p { | |
| 1144 | @apply pl-0.5; | |
| 1145 | } | |
| 1146 | .chat-editor blockquote { | |
| 1147 | @apply my-0.5 border-l-2 border-line-strong pl-3 text-muted; | |
| 1148 | } | |
| 1149 |
This file's history is long; its oldest lines are credited to the oldest commit read.