| 1 | @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"); |
| 2 | |
| 3 | :root { |
| 4 | --page: #faf8f5; |
| 5 | --surface: #ffffff; |
| 6 | --hover: #f3f0ea; |
| 7 | --ink: #2c2824; |
| 8 | --ink-2: #4a4540; |
| 9 | --muted: #7a746c; |
| 10 | --faint: #a09888; |
| 11 | --accent: #4d8a78; |
| 12 | --accent-subtle: #e8f2ee; |
| 13 | --halo: #d7e2dc; |
| 14 | --line: #d9d3ca; |
| 15 | --line-2: #e8e3db; |
| 16 | --add-bg: rgba(46, 160, 67, 0.09); |
| 17 | --add: #1a7f37; |
| 18 | --del-bg: rgba(248, 81, 73, 0.09); |
| 19 | --del: #cf222e; |
| 20 | --mono: "JetBrains Mono", Menlo, monospace; |
| 21 | } |
| 22 | |
| 23 | * { box-sizing: border-box; } |
| 24 | html { -webkit-text-size-adjust: 100%; } |
| 25 | body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.5 var(--mono); font-feature-settings: "calt" 0; } |
| 26 | a { color: inherit; text-decoration: none; } |
| 27 | a:hover { text-decoration: underline; } |
| 28 | h1, h2 { font-weight: 500; letter-spacing: -0.02em; margin: 0; } |
| 29 | h2 { font-size: 13px; color: var(--muted); margin: 28px 0 8px; } |
| 30 | pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 12px; } |
| 31 | .faint { color: var(--faint); } |
| 32 | .wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; } |
| 33 | main.wrap { padding-top: 24px; padding-bottom: 64px; } |
| 34 | |
| 35 | /* Top bar */ |
| 36 | .top { background: var(--page); border-bottom: 1px solid var(--line-2); } |
| 37 | .top .wrap { height: 56px; display: flex; align-items: center; gap: 18px; } |
| 38 | .brand { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 500; letter-spacing: -0.04em; } |
| 39 | .brand:hover { text-decoration: none; } |
| 40 | .crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; } |
| 41 | .crumbs a:last-child, .crumbs span:last-child { color: var(--ink); } |
| 42 | .sep { color: var(--faint); } |
| 43 | |
| 44 | .head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } |
| 45 | .title { font-size: 22px; } |
| 46 | .tag { padding: 0 6px; font-size: 11px; color: var(--muted); border: 1px solid var(--line); } |
| 47 | .meta { font-size: 12px; color: var(--muted); } |
| 48 | .meta a, .who a { color: var(--ink-2); } |
| 49 | .meta.line { margin: 6px 0 16px; } |
| 50 | .agent { color: var(--accent); } |
| 51 | .prose { white-space: pre-wrap; word-break: break-word; color: var(--ink-2); margin: 8px 0; max-width: 90ch; } |
| 52 | .empty { padding: 18px 14px; color: var(--muted); background: var(--surface); border: 1px solid var(--line-2); } |
| 53 | |
| 54 | /* States */ |
| 55 | .state { font-size: 11px; padding: 0 6px; border: 1px solid currentColor; } |
| 56 | .state.proposed { color: var(--accent); } |
| 57 | .state.idea, .state.draft { color: var(--muted); } |
| 58 | .state.landed { color: #6b4fa0; } |
| 59 | .state.declined, .state.withdrawn { color: #a05050; } |
| 60 | .behind { color: #a05050; } |
| 61 | |
| 62 | /* Signing in and deciding */ |
| 63 | .account { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; } |
| 64 | .account button, .decide button, .say button { font: inherit; font-size: 12px; padding: 4px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } |
| 65 | .account button { padding: 2px 8px; color: var(--muted); } |
| 66 | button:hover { border-color: var(--ink); } |
| 67 | button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } |
| 68 | button.primary:hover { background: #3d7a68; } |
| 69 | .decide { display: flex; gap: 8px; margin: 4px 0 12px; } |
| 70 | .error { border: 1px solid #a05050; color: #a05050; background: #f5e8e8; padding: 8px 12px; margin: 8px 0; font-size: 12px; } |
| 71 | .say { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } |
| 72 | .say textarea { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); resize: vertical; } |
| 73 | .say button { align-self: flex-start; } |
| 74 | |
| 75 | /* Tiles: one hairline between every tile. */ |
| 76 | .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); margin-top: 16px; } |
| 77 | .tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; background: var(--surface); } |
| 78 | .tile:hover { background: var(--hover); text-decoration: none; } |
| 79 | .tile-name { color: var(--accent); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 80 | .tile-desc { font-size: 12px; color: var(--muted); line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } |
| 81 | .tile-meta { display: flex; gap: 10px; font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; } |
| 82 | |
| 83 | /* Project stats */ |
| 84 | .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); margin-top: 12px; } |
| 85 | .stat { display: flex; flex-direction: column; padding: 10px 12px; background: var(--surface); } |
| 86 | a.stat:hover { background: var(--hover); text-decoration: none; } |
| 87 | .stat b { font-weight: 500; font-size: 18px; } |
| 88 | .stat span { font-size: 11px; color: var(--muted); } |
| 89 | .heat { display: grid; grid-template-columns: repeat(84, 1fr); gap: 2px; margin-top: 10px; } |
| 90 | .heat i { aspect-ratio: 1; max-height: 14px; background: var(--line-2); } |
| 91 | .heat .h1 { background: #cfe2da; } |
| 92 | .heat .h2 { background: #9cc4b5; } |
| 93 | .heat .h3 { background: #6fa592; } |
| 94 | .heat .h4 { background: var(--accent); } |
| 95 | |
| 96 | .cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; } |
| 97 | @media (max-width: 900px) { .cols { grid-template-columns: 1fr; } } |
| 98 | |
| 99 | /* Lists */ |
| 100 | .list { background: var(--surface); border: 1px solid var(--line-2); } |
| 101 | .list > * { border-top: 1px solid var(--line-2); } |
| 102 | .list > *:first-child { border-top: 0; } |
| 103 | .list .empty { border: 0; } |
| 104 | .row { display: flex; gap: 12px; padding: 8px 12px; align-items: baseline; } |
| 105 | .row .n { color: var(--faint); min-width: 3.5ch; font-size: 12px; } |
| 106 | .grow { flex: 1; min-width: 0; } |
| 107 | .msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 108 | .tree a { display: flex; gap: 8px; padding: 6px 12px; } |
| 109 | .tree a:hover { background: var(--hover); text-decoration: none; } |
| 110 | .tree .icon { width: 1ch; color: var(--faint); } |
| 111 | .tree .dir { color: var(--accent); } |
| 112 | |
| 113 | /* A change */ |
| 114 | .revs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 16px 0 8px; } |
| 115 | .revs a { padding: 2px 8px; border: 1px solid var(--line); background: var(--surface); } |
| 116 | .revs a.on { border-color: var(--ink); } |
| 117 | .revs .meta { margin-left: 8px; } |
| 118 | .steps { font-size: 12px; color: var(--ink-2); border-left: 2px solid var(--line); padding-left: 10px; margin: 8px 0; } |
| 119 | .evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } |
| 120 | .evidence figure { margin: 0; background: var(--surface); border: 1px solid var(--line-2); padding: 10px; min-width: 0; } |
| 121 | .evidence figcaption { font-size: 12px; margin-bottom: 8px; } |
| 122 | .evidence img { max-width: 100%; display: block; } |
| 123 | .timeline { display: flex; flex-direction: column; gap: 6px; } |
| 124 | .event { font-size: 12px; color: var(--muted); } |
| 125 | .said { background: var(--surface); border: 1px solid var(--line-2); padding: 10px 12px; } |
| 126 | .said .prose { margin: 4px 0 0; color: var(--ink); } |
| 127 | |
| 128 | /* Diffs and files */ |
| 129 | .filelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); margin-bottom: 12px; font-size: 12px; } |
| 130 | .filelist a { display: flex; gap: 8px; padding: 5px 10px; background: var(--surface); min-width: 0; } |
| 131 | .filelist .path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 132 | .status { width: 1ch; } |
| 133 | .status.added { color: var(--add); } |
| 134 | .status.deleted { color: var(--del); } |
| 135 | .status.modified { color: var(--muted); } |
| 136 | .add { color: var(--add); } |
| 137 | .del { color: var(--del); } |
| 138 | .file { background: var(--surface); border: 1px solid var(--line-2); margin-bottom: 12px; } |
| 139 | .file summary { display: flex; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 12px; border-bottom: 1px solid var(--line-2); } |
| 140 | .file summary .path { flex: 1; color: var(--ink); } |
| 141 | table.diff { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.55; } |
| 142 | table.diff td { padding: 0 8px; vertical-align: top; } |
| 143 | table.diff .ln { width: 1%; min-width: 4ch; text-align: right; color: var(--faint); user-select: none; } |
| 144 | table.diff .code { white-space: pre-wrap; word-break: break-all; } |
| 145 | table.diff tr.add { background: var(--add-bg); } |
| 146 | table.diff tr.del { background: var(--del-bg); } |
| 147 | table.diff tr.gap td { height: 10px; background: var(--page); } |
| 148 | table.source { background: var(--surface); border: 1px solid var(--line-2); } |
| 149 | .image { padding: 12px; background: var(--surface); border: 1px solid var(--line-2); } |
| 150 | .image img { max-width: 100%; display: block; } |
| 151 | .path-trail { font-size: 16px; display: flex; gap: 6px; flex-wrap: wrap; } |
| 152 | .path-trail a:last-child { color: var(--ink); font-weight: 500; } |
| 153 | |
| 154 | @media (max-width: 640px) { .wrap { padding: 0 14px; } } |