Migration
This is my new public git source viewer. Source coming soon. Please contact with concerns/bugs.
Contact me
static/style.css
3a50036d96eb14462e96598fd169d1c79264ac4b
· 12.6 KB · 348 lines
raw
| 1 | /* gsg — monospace-first UI. Every value on these pages is an identifier, |
| 2 | hash, path or count, so the interface type is the same face as the code; |
| 3 | the sans face appears only inside rendered README prose. Palette is a cool |
| 4 | slate ramp with one indigo accent and a six-colour lane ramp that the |
| 5 | commit graph and its branch chips share. */ |
| 6 | |
| 7 | :root { |
| 8 | --bg: #FAFAFC; |
| 9 | --surface: #FFFFFF; |
| 10 | --line: #E3E5EE; |
| 11 | --line-soft: #EDEEF5; |
| 12 | --fg: #14161D; |
| 13 | --fg-soft: #4A5063; |
| 14 | --dim: #858BA0; |
| 15 | --accent: #5B4BE0; |
| 16 | --accent-bg: #EEEBFE; |
| 17 | --add: #1E874B; |
| 18 | --add-bg: #E9F6EE; |
| 19 | --del: #C4314B; |
| 20 | --del-bg: #FCECEF; |
| 21 | |
| 22 | --lane-0: #5B4BE0; |
| 23 | --lane-1: #109C8D; |
| 24 | --lane-2: #C97A0E; |
| 25 | --lane-3: #D2447A; |
| 26 | --lane-4: #2A7CD6; |
| 27 | --lane-5: #6C9B1E; |
| 28 | |
| 29 | --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", |
| 30 | Menlo, Consolas, "Liberation Mono", monospace; |
| 31 | --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; |
| 32 | |
| 33 | --r: 6px; |
| 34 | --pad: clamp(1rem, 4vw, 2rem); |
| 35 | } |
| 36 | |
| 37 | @media (prefers-color-scheme: dark) { |
| 38 | :root { |
| 39 | --bg: #0E1016; |
| 40 | --surface: #151823; |
| 41 | --line: #242838; |
| 42 | --line-soft: #1C2030; |
| 43 | --fg: #E4E7F0; |
| 44 | --fg-soft: #A8AEC2; |
| 45 | --dim: #6E7590; |
| 46 | --accent: #9C8BFF; |
| 47 | --accent-bg: #211D3D; |
| 48 | --add: #4BC585; |
| 49 | --add-bg: #12251A; |
| 50 | --del: #FF7A90; |
| 51 | --del-bg: #2A1419; |
| 52 | |
| 53 | --lane-0: #9C8BFF; |
| 54 | --lane-1: #34C6B4; |
| 55 | --lane-2: #E5A544; |
| 56 | --lane-3: #F2678E; |
| 57 | --lane-4: #58A6F0; |
| 58 | --lane-5: #9BD45F; |
| 59 | } |
| 60 | } |
| 61 | |
| 62 | *, *::before, *::after { box-sizing: border-box; } |
| 63 | |
| 64 | html { -webkit-text-size-adjust: 100%; } |
| 65 | |
| 66 | body { |
| 67 | margin: 0; |
| 68 | background: var(--bg); |
| 69 | color: var(--fg); |
| 70 | font-family: var(--mono); |
| 71 | font-size: 13.5px; |
| 72 | line-height: 1.6; |
| 73 | font-variant-ligatures: none; |
| 74 | -webkit-font-smoothing: antialiased; |
| 75 | } |
| 76 | |
| 77 | .wrap { max-width: 74rem; margin: 0 auto; padding-inline: var(--pad); } |
| 78 | |
| 79 | a { color: var(--accent); text-decoration: none; } |
| 80 | a:hover { text-decoration: underline; text-underline-offset: 2px; } |
| 81 | :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } |
| 82 | .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } |
| 83 | |
| 84 | /* ---------------------------------------------------------------- topbar */ |
| 85 | |
| 86 | .topbar { |
| 87 | position: sticky; top: 0; z-index: 10; |
| 88 | background: color-mix(in srgb, var(--bg) 88%, transparent); |
| 89 | backdrop-filter: blur(10px); |
| 90 | border-bottom: 1px solid var(--line); |
| 91 | } |
| 92 | .bar { |
| 93 | display: flex; align-items: center; gap: .65rem; |
| 94 | height: 3.1rem; flex-wrap: wrap; |
| 95 | } |
| 96 | .brand { color: var(--fg); font-weight: 600; letter-spacing: -.01em; } |
| 97 | .brand:hover { color: var(--accent); text-decoration: none; } |
| 98 | .slash { color: var(--dim); } |
| 99 | .repo { color: var(--fg); font-weight: 600; } |
| 100 | |
| 101 | .tabs { display: flex; gap: .15rem; margin-left: .6rem; } |
| 102 | .tabs a { |
| 103 | color: var(--fg-soft); padding: .2rem .55rem; border-radius: var(--r); |
| 104 | font-size: .8125rem; letter-spacing: .02em; |
| 105 | } |
| 106 | .tabs a:hover { background: var(--line-soft); color: var(--fg); text-decoration: none; } |
| 107 | |
| 108 | .refpick { margin-left: auto; } |
| 109 | .refpick select { |
| 110 | font: inherit; font-size: .8125rem; |
| 111 | color: var(--fg-soft); background: var(--surface); |
| 112 | border: 1px solid var(--line); border-radius: var(--r); |
| 113 | padding: .2rem 1.4rem .2rem .5rem; cursor: pointer; |
| 114 | appearance: none; |
| 115 | background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), |
| 116 | linear-gradient(135deg, var(--dim) 50%, transparent 50%); |
| 117 | background-position: right .62rem center, right .42rem center; |
| 118 | background-size: 4px 4px, 4px 4px; |
| 119 | background-repeat: no-repeat; |
| 120 | } |
| 121 | .refpick select:hover { border-color: var(--accent); color: var(--fg); } |
| 122 | |
| 123 | /* ------------------------------------------------------------- page head */ |
| 124 | |
| 125 | main.wrap { padding-block: 2.25rem 5rem; } |
| 126 | |
| 127 | .page-head { margin-bottom: 1.6rem; } |
| 128 | .page-head h1 { |
| 129 | margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; |
| 130 | line-height: 1.3; |
| 131 | } |
| 132 | .page-head h1.subject { font-weight: 500; } |
| 133 | .sub { margin: .3rem 0 0; color: var(--dim); font-size: .8125rem; } |
| 134 | .sub code { color: var(--fg-soft); } |
| 135 | .dots { color: var(--dim); padding: 0 .3rem; } |
| 136 | |
| 137 | h2 { |
| 138 | margin: 2.5rem 0 .7rem; |
| 139 | font-size: .75rem; font-weight: 600; |
| 140 | text-transform: uppercase; letter-spacing: .1em; |
| 141 | color: var(--dim); |
| 142 | display: flex; align-items: baseline; gap: .75rem; |
| 143 | } |
| 144 | h2 .more { font-size: .6875rem; letter-spacing: .06em; margin-left: auto; } |
| 145 | section:first-of-type h2 { margin-top: 1.75rem; } |
| 146 | |
| 147 | .crumbs { display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; |
| 148 | font-size: 1.0625rem; font-weight: 500; } |
| 149 | .crumbs .here { color: var(--fg); } |
| 150 | |
| 151 | /* ------------------------------------------------------------------ facts */ |
| 152 | |
| 153 | .facts { |
| 154 | display: grid; grid-template-columns: max-content 1fr; |
| 155 | gap: .1rem 1.5rem; margin: 0; |
| 156 | padding: .85rem 1rem; |
| 157 | background: var(--surface); |
| 158 | border: 1px solid var(--line); border-radius: var(--r); |
| 159 | } |
| 160 | .facts dt { color: var(--dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; } |
| 161 | .facts dd { margin: 0; color: var(--fg-soft); } |
| 162 | .facts dd code { color: var(--fg); } |
| 163 | .full-sha { word-break: break-all; } |
| 164 | .clone { user-select: all; } |
| 165 | |
| 166 | /* ----------------------------------------------------------- latest commit */ |
| 167 | |
| 168 | .latest { |
| 169 | display: grid; |
| 170 | grid-template-columns: max-content 1fr max-content; |
| 171 | align-items: baseline; gap: .85rem; |
| 172 | margin-top: .9rem; padding: .6rem .85rem; |
| 173 | background: var(--surface); |
| 174 | border: 1px solid var(--line); border-radius: var(--r); |
| 175 | color: var(--fg); |
| 176 | } |
| 177 | .latest:hover { border-color: var(--accent); text-decoration: none; } |
| 178 | .latest-sha { color: var(--accent); font-size: .8125rem; } |
| 179 | .latest-subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 180 | .latest-meta { color: var(--dim); font-size: .75rem; white-space: nowrap; } |
| 181 | |
| 182 | .readme { margin-top: 1.75rem; } |
| 183 | |
| 184 | /* ---------------------------------------------------------------- tables */ |
| 185 | |
| 186 | .listing { |
| 187 | width: 100%; border-collapse: collapse; |
| 188 | background: var(--surface); |
| 189 | border: 1px solid var(--line); border-radius: var(--r); |
| 190 | overflow: hidden; |
| 191 | } |
| 192 | .listing td { |
| 193 | padding: .42rem .75rem; |
| 194 | border-top: 1px solid var(--line-soft); |
| 195 | vertical-align: baseline; |
| 196 | } |
| 197 | .listing tr:first-child td { border-top: 0; } |
| 198 | .listing tr:hover td { background: var(--line-soft); } |
| 199 | .listing .name { width: 100%; } |
| 200 | .listing .name a { color: var(--fg); } |
| 201 | .listing .name a:hover { color: var(--accent); } |
| 202 | .listing .desc, .listing .who { color: var(--dim); white-space: nowrap; } |
| 203 | .listing .when, .listing .num, .listing .churn, .listing .act { |
| 204 | color: var(--dim); white-space: nowrap; text-align: right; font-size: .8125rem; |
| 205 | } |
| 206 | .listing .sha a { color: var(--accent); } |
| 207 | .listing .icon { padding-right: 0; width: 1.4rem; } |
| 208 | .glyph { color: var(--dim); font-size: .75rem; } |
| 209 | .glyph.dir { color: var(--accent); } |
| 210 | .muted { color: var(--dim); } |
| 211 | .empty { color: var(--dim); text-align: center; padding: 1.6rem !important; } |
| 212 | |
| 213 | .ghost { |
| 214 | color: var(--dim); font-size: .75rem; |
| 215 | border: 1px solid var(--line); border-radius: 4px; |
| 216 | padding: .05rem .38rem; |
| 217 | } |
| 218 | .ghost:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; } |
| 219 | |
| 220 | .churn .add { color: var(--add); } |
| 221 | .churn .del { color: var(--del); margin-left: .5rem; } |
| 222 | |
| 223 | .chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; } |
| 224 | .chip { |
| 225 | font-size: .75rem; padding: .1rem .45rem; |
| 226 | border: 1px solid var(--line); border-radius: 4px; |
| 227 | color: var(--fg-soft); background: var(--surface); |
| 228 | } |
| 229 | .chip b { color: var(--dim); font-weight: 400; } |
| 230 | .chip-branch { color: var(--accent); background: var(--accent-bg); border-color: transparent; margin-right: .35rem; } |
| 231 | .chip-tag { color: var(--lane-2); border-color: currentColor; margin-right: .35rem; } |
| 232 | |
| 233 | /* ----------------------------------------------------------------- graph */ |
| 234 | /* The signature: lane geometry comes from the module, colour from here. */ |
| 235 | |
| 236 | table.graph { width: 100%; border-collapse: collapse; } |
| 237 | table.graph td { padding: 0 .75rem; height: 30px; white-space: nowrap; vertical-align: middle; } |
| 238 | table.graph tr:hover { background: var(--line-soft); } |
| 239 | table.graph .rail { padding: 0; width: 1px; } |
| 240 | .rail-svg { display: block; } |
| 241 | table.graph .msg { width: 100%; white-space: normal; } |
| 242 | table.graph .msg a { color: var(--fg); } |
| 243 | table.graph .msg a:hover { color: var(--accent); } |
| 244 | table.graph .who, table.graph .when { color: var(--dim); font-size: .8125rem; text-align: right; } |
| 245 | |
| 246 | /* ------------------------------------------------------------ source/diff */ |
| 247 | |
| 248 | .source, .patch { |
| 249 | margin-top: 1rem; |
| 250 | background: var(--surface); |
| 251 | border: 1px solid var(--line); border-radius: var(--r); |
| 252 | overflow-x: auto; |
| 253 | } |
| 254 | .source table { border-collapse: collapse; width: 100%; } |
| 255 | .source td { padding: 0; vertical-align: top; } |
| 256 | .source .ln { |
| 257 | width: 1%; padding: 0 .9rem 0 .8rem; text-align: right; |
| 258 | color: var(--dim); user-select: none; |
| 259 | position: sticky; left: 0; background: var(--surface); |
| 260 | border-right: 1px solid var(--line-soft); |
| 261 | } |
| 262 | .source .ln a { color: inherit; } |
| 263 | .source .lc { padding-left: .9rem; white-space: pre; font-size: .8125rem; line-height: 1.55; } |
| 264 | .source tr:target .lc, .source tr:target .ln { background: var(--accent-bg); } |
| 265 | |
| 266 | /* Diffs mark the gutter rather than flooding the row: the signal stays |
| 267 | readable when a hunk is mostly additions. */ |
| 268 | .patch { font-size: .8125rem; line-height: 1.55; } |
| 269 | .pl { white-space: pre; padding: 0 .9rem 0 .65rem; border-left: 3px solid transparent; } |
| 270 | .pl.meta { color: var(--dim); } |
| 271 | .pl.hunk { color: var(--accent); background: var(--accent-bg); border-left-color: var(--accent); } |
| 272 | .pl.add { color: var(--add); background: var(--add-bg); border-left-color: var(--add); } |
| 273 | .pl.del { color: var(--del); background: var(--del-bg); border-left-color: var(--del); } |
| 274 | |
| 275 | .message { |
| 276 | margin: 1rem 0 0; padding: .85rem 1rem; |
| 277 | background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); |
| 278 | white-space: pre-wrap; color: var(--fg-soft); font-size: .8125rem; |
| 279 | } |
| 280 | .notice { |
| 281 | padding: .6rem .85rem; border-radius: var(--r); |
| 282 | background: var(--accent-bg); color: var(--fg-soft); font-size: .8125rem; |
| 283 | } |
| 284 | |
| 285 | /* ----------------------------------------------------------------- prose */ |
| 286 | /* The only place the sans face appears. */ |
| 287 | |
| 288 | .prose-wrap { margin-top: 2.5rem; } |
| 289 | .prose { |
| 290 | font-family: var(--sans); font-size: .9375rem; line-height: 1.7; |
| 291 | color: var(--fg-soft); |
| 292 | padding: 1.25rem 1.5rem; |
| 293 | background: var(--surface); |
| 294 | border: 1px solid var(--line); border-radius: var(--r); |
| 295 | } |
| 296 | .prose h1, .prose h2, .prose h3 { |
| 297 | font-family: var(--sans); color: var(--fg); |
| 298 | text-transform: none; letter-spacing: -.01em; display: block; |
| 299 | } |
| 300 | .prose h1 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; } |
| 301 | .prose h2 { font-size: 1.0625rem; margin: 1.5rem 0 .5rem; } |
| 302 | .prose :first-child { margin-top: 0; } |
| 303 | .prose h3 { font-size: .9375rem; margin: 1.25rem 0 .4rem; } |
| 304 | .prose p, .prose ul, .prose ol, .prose blockquote, .prose table { margin: 0 0 1rem; } |
| 305 | .prose ul, .prose ol { padding-left: 1.35rem; } |
| 306 | .prose li { margin-bottom: .2rem; } |
| 307 | .prose img { max-width: 100%; height: auto; border-radius: 4px; } |
| 308 | .prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0; } |
| 309 | .prose blockquote { |
| 310 | padding: .1rem 0 .1rem 1rem; border-left: 2px solid var(--line); |
| 311 | color: var(--dim); |
| 312 | } |
| 313 | .prose table { border-collapse: collapse; font-size: .875rem; } |
| 314 | .prose th, .prose td { padding: .35rem .8rem; border: 1px solid var(--line); text-align: left; } |
| 315 | .prose th { background: var(--bg); font-weight: 600; color: var(--fg); } |
| 316 | .prose code, .prose pre { font-family: var(--mono); font-size: .8125rem; } |
| 317 | .prose :not(pre) > code { |
| 318 | padding: .1rem .3rem; background: var(--bg); |
| 319 | border: 1px solid var(--line-soft); border-radius: 3px; |
| 320 | } |
| 321 | .prose pre { padding: .8rem; background: var(--bg); border: 1px solid var(--line-soft); |
| 322 | border-radius: 4px; overflow-x: auto; line-height: 1.5; } |
| 323 | .prose pre code { padding: 0; background: none; border: 0; } |
| 324 | |
| 325 | /* ---------------------------------------------------------------- footer */ |
| 326 | |
| 327 | footer { |
| 328 | padding-block: 1.25rem; margin-top: 3rem; |
| 329 | border-top: 1px solid var(--line); |
| 330 | color: var(--dim); font-size: .75rem; |
| 331 | display: flex; gap: .5rem; |
| 332 | } |
| 333 | footer .sep { color: var(--line); } |
| 334 | |
| 335 | /* ----------------------------------------------------------- small screens */ |
| 336 | |
| 337 | @media (max-width: 46rem) { |
| 338 | .listing .who, .listing .desc, table.graph .who { display: none; } |
| 339 | .latest { grid-template-columns: max-content 1fr; } |
| 340 | .latest-meta { grid-column: 1 / -1; } |
| 341 | .bar { height: auto; padding-block: .6rem; } |
| 342 | .refpick { margin-left: 0; width: 100%; } |
| 343 | .refpick select { width: 100%; } |
| 344 | } |
| 345 | |
| 346 | @media (prefers-reduced-motion: reduce) { |
| 347 | *, *::before, *::after { animation: none !important; transition: none !important; } |
| 348 | } |