dev vouch dev on at. thats about it atvouch.dev
8
fork

Configure Feed

Select the types of activity you want to include in your feed.

add App.css (i forgot)

Luna a315e895 22b93b25

+891
+891
frontend/src/App.css
··· 1 + @font-face { 2 + font-family: 'DM Sans'; 3 + font-weight: 400; 4 + font-style: normal; 5 + font-display: swap; 6 + src: url('/fonts/DM-Sans-400.ttf') format('truetype'); 7 + } 8 + @font-face { 9 + font-family: 'DM Sans'; 10 + font-weight: 500; 11 + font-style: normal; 12 + font-display: swap; 13 + src: url('/fonts/DM-Sans-500.ttf') format('truetype'); 14 + } 15 + @font-face { 16 + font-family: 'DM Sans'; 17 + font-weight: 700; 18 + font-style: normal; 19 + font-display: swap; 20 + src: url('/fonts/DM-Sans-700.ttf') format('truetype'); 21 + } 22 + @font-face { 23 + font-family: 'JetBrains Mono'; 24 + font-weight: 400; 25 + font-style: normal; 26 + font-display: swap; 27 + src: url('/fonts/JetBrains-Mono-400.ttf') format('truetype'); 28 + } 29 + @font-face { 30 + font-family: 'JetBrains Mono'; 31 + font-weight: 700; 32 + font-style: normal; 33 + font-display: swap; 34 + src: url('/fonts/JetBrains-Mono-700.ttf') format('truetype'); 35 + } 36 + 37 + :root { 38 + --bg: #0c0c0c; 39 + --bg-raised: #141412; 40 + --bg-input: #1a1a17; 41 + --border: #2a2a25; 42 + --border-strong: #3a3a33; 43 + --text: #e8e4de; 44 + --text-dim: #8a867e; 45 + --text-faint: #5a5750; 46 + --accent: #ff4f6d; 47 + --accent-dim: #cc3f57; 48 + --accent-bg: #ff4f6d08; 49 + --error: #ff5f56; 50 + --error-bg: #ff5f5608; 51 + --serif: 'Instrument Serif', Georgia, serif; 52 + --sans: 'DM Sans', system-ui, sans-serif; 53 + --mono: 'JetBrains Mono', 'Courier New', monospace; 54 + } 55 + 56 + * { 57 + box-sizing: border-box; 58 + margin: 0; 59 + padding: 0; 60 + } 61 + 62 + ::selection { 63 + background: var(--accent); 64 + color: var(--bg); 65 + } 66 + 67 + body { 68 + font-family: var(--sans); 69 + font-size: 14px; 70 + background: var(--bg); 71 + color: var(--text); 72 + line-height: 1.65; 73 + -webkit-font-smoothing: antialiased; 74 + } 75 + 76 + /* ── layout ── */ 77 + 78 + .container { 79 + max-width: 1200px; 80 + margin: 0 auto; 81 + padding: 3rem 2rem; 82 + } 83 + 84 + h1 { 85 + font-family: var(--sans); 86 + font-size: 3.5rem; 87 + font-weight: 400; 88 + font-style: normal; 89 + color: var(--text); 90 + letter-spacing: -0.03em; 91 + margin-bottom: 2.5rem; 92 + line-height: 1; 93 + } 94 + 95 + h1::after { 96 + content: ''; 97 + display: block; 98 + width: 100%; 99 + height: 2px; 100 + background: var(--accent); 101 + margin-top: 1rem; 102 + } 103 + 104 + h2 { 105 + font-family: var(--sans); 106 + font-size: 1.5rem; 107 + font-weight: 400; 108 + color: var(--text); 109 + letter-spacing: -0.01em; 110 + margin-bottom: 1rem; 111 + line-height: 1.2; 112 + } 113 + 114 + .intro-block { 115 + display: flex; 116 + gap: 2rem; 117 + margin-bottom: 2rem; 118 + } 119 + 120 + .intro { 121 + color: var(--text); 122 + font-size: 14px; 123 + line-height: 1.7; 124 + flex: 1; 125 + padding-right: 2rem; 126 + border-right: 1px solid var(--border); 127 + } 128 + 129 + .intro-right { 130 + flex: 1; 131 + display: flex; 132 + flex-direction: column; 133 + gap: 1rem; 134 + padding-left: 2rem; 135 + } 136 + 137 + .instructions { 138 + color: var(--text); 139 + font-size: 14px; 140 + text-align: right; 141 + line-height: 1.7; 142 + } 143 + 144 + .instructions p { 145 + margin-bottom: 0.25rem; 146 + } 147 + 148 + .notes { 149 + color: var(--text-dim); 150 + font-size: 12px; 151 + text-align: right; 152 + line-height: 1.7; 153 + border-top: 1px solid var(--border); 154 + padding-top: 1rem; 155 + } 156 + 157 + .notes p { 158 + margin-bottom: 0.25rem; 159 + } 160 + 161 + a { 162 + color: #ef4444; 163 + text-decoration: none; 164 + } 165 + 166 + a:hover { 167 + text-decoration: underline; 168 + } 169 + 170 + a:visited { 171 + color: #b91c1c; 172 + } 173 + 174 + /* ── topbar ── */ 175 + 176 + .topbar { 177 + display: flex; 178 + align-items: center; 179 + justify-content: space-between; 180 + gap: 1rem; 181 + padding: 0.75rem 0; 182 + border-bottom: 2px solid var(--border); 183 + margin-bottom: 2rem; 184 + } 185 + 186 + .topbar span { 187 + font-size: 15px; 188 + color: var(--text-dim); 189 + letter-spacing: 0.02em; 190 + text-transform: uppercase; 191 + } 192 + 193 + .topbar code { 194 + font-family: var(--mono); 195 + font-size: 15px; 196 + color: var(--accent); 197 + text-transform: none; 198 + } 199 + 200 + /* ── two-column layout ── */ 201 + 202 + .layout { 203 + display: flex; 204 + gap: 2rem; 205 + align-items: flex-start; 206 + } 207 + 208 + .sidebar { 209 + width: 260px; 210 + flex-shrink: 0; 211 + border: 1px solid var(--border); 212 + border-top: 3px solid var(--accent); 213 + padding: 1.25rem; 214 + background: var(--bg-raised); 215 + } 216 + 217 + .main-panel { 218 + flex: 1; 219 + min-width: 0; 220 + } 221 + 222 + /* ── sections ── */ 223 + 224 + section { 225 + margin-bottom: 1.5rem; 226 + padding: 1.25rem; 227 + border: 1px solid var(--border); 228 + border-left: 3px solid var(--border-strong); 229 + background: var(--bg-raised); 230 + transition: border-left-color 0.2s ease; 231 + } 232 + 233 + section:hover { 234 + border-left-color: var(--accent); 235 + } 236 + 237 + section:last-child { 238 + margin-bottom: 0; 239 + } 240 + 241 + /* ── text helpers ── */ 242 + 243 + .muted { 244 + color: var(--text-faint); 245 + font-size: 12px; 246 + letter-spacing: 0.03em; 247 + text-transform: uppercase; 248 + } 249 + 250 + /* ── form fields ── */ 251 + 252 + .field { 253 + display: flex; 254 + gap: 0; 255 + } 256 + 257 + input[type="text"] { 258 + flex: 1; 259 + padding: 0.6rem 0.85rem; 260 + border: 1px solid var(--border); 261 + border-right: none; 262 + background: var(--bg-input); 263 + color: var(--text); 264 + font-family: var(--mono); 265 + font-size: 13px; 266 + transition: border-color 0.15s ease; 267 + } 268 + 269 + input[type="text"]::placeholder { 270 + color: var(--text-dim); 271 + font-style: italic; 272 + font-family: var(--sans); 273 + font-size: 13px; 274 + } 275 + 276 + input[type="text"]:focus { 277 + outline: none; 278 + border-color: var(--accent); 279 + background: var(--bg); 280 + } 281 + 282 + input[type="text"].input-invalid { 283 + border-color: var(--error); 284 + background: var(--error-bg); 285 + } 286 + 287 + .field-hint { 288 + color: var(--error); 289 + font-size: 11px; 290 + margin-top: 0.35rem; 291 + letter-spacing: 0.02em; 292 + } 293 + 294 + button { 295 + padding: 0.6rem 1.2rem; 296 + border: 1px solid var(--border); 297 + background: var(--bg-input); 298 + color: var(--text); 299 + cursor: pointer; 300 + font-family: var(--sans); 301 + font-size: 13px; 302 + font-weight: 700; 303 + letter-spacing: 0.06em; 304 + text-transform: uppercase; 305 + white-space: nowrap; 306 + transition: all 0.15s ease; 307 + } 308 + 309 + button:hover:not(:disabled) { 310 + background: var(--accent); 311 + color: var(--bg); 312 + border-color: var(--accent); 313 + } 314 + 315 + button:disabled { 316 + opacity: 0.35; 317 + cursor: not-allowed; 318 + } 319 + 320 + /* ── topbar logout button ── */ 321 + 322 + .topbar button { 323 + font-size: 11px; 324 + padding: 0.4rem 0.8rem; 325 + border-color: var(--border); 326 + } 327 + 328 + /* ── pre / code output ── */ 329 + 330 + pre { 331 + background: var(--bg); 332 + border: 1px solid var(--border); 333 + border-left: 3px solid var(--text-faint); 334 + padding: 0.85rem 1rem; 335 + overflow-x: auto; 336 + font-family: var(--mono); 337 + font-size: 12px; 338 + margin-top: 0.75rem; 339 + white-space: pre-wrap; 340 + word-break: break-all; 341 + line-height: 1.7; 342 + color: var(--text-dim); 343 + } 344 + 345 + /* ── messages ── */ 346 + 347 + .error { 348 + color: var(--error); 349 + background: var(--error-bg); 350 + border: 1px solid var(--error); 351 + border-left: 3px solid var(--error); 352 + padding: 0.6rem 0.85rem; 353 + margin-top: 0.75rem; 354 + font-size: 12px; 355 + } 356 + 357 + .auth-warning { 358 + color: #b5a13b; 359 + background: #b5a13b18; 360 + border: none; 361 + border-left: 3px solid #b5a13b; 362 + padding: 0.6rem 0.85rem; 363 + margin-top: 0.75rem; 364 + font-size: 12px; 365 + line-height: 1.5; 366 + } 367 + 368 + .auth-warning a { 369 + color: #ef4444; 370 + } 371 + 372 + .auth-warning-details { 373 + margin-top: 0.5rem; 374 + margin-bottom: 0; 375 + margin-left: 0; 376 + border: 1px solid #b5a13b44; 377 + background: #131006; 378 + padding: 0.6rem 0.85rem; 379 + border-radius: 4px; 380 + } 381 + 382 + .auth-warning code { 383 + font-size: 11px; 384 + background: #b5a13b15; 385 + padding: 0.1rem 0.3rem; 386 + border-radius: 2px; 387 + } 388 + 389 + .success { 390 + color: #4caf50; 391 + border-color: #4caf50; 392 + border-left: 3px solid #4caf50; 393 + background: #4caf5008; 394 + } 395 + 396 + /* ── login form ── */ 397 + 398 + form { 399 + margin: 0; 400 + } 401 + 402 + /* ── vouch list ── */ 403 + 404 + .vouch-list { 405 + list-style: none; 406 + margin-top: 0.75rem; 407 + max-height: 60vh; 408 + overflow-y: auto; 409 + } 410 + 411 + .vouch-list li { 412 + display: flex; 413 + justify-content: space-between; 414 + align-items: baseline; 415 + padding: 0.5rem 0; 416 + border-bottom: 1px solid var(--border); 417 + gap: 0.75rem; 418 + } 419 + 420 + .vouch-list li:last-child { 421 + border-bottom: none; 422 + } 423 + 424 + 425 + .vouch-handle { 426 + font-size: 15px; 427 + overflow: hidden; 428 + text-overflow: ellipsis; 429 + white-space: nowrap; 430 + flex: 1; 431 + } 432 + 433 + .vouch-date { 434 + color: var(--text-dim); 435 + font-size: 11px; 436 + flex-shrink: 0; 437 + font-variant-numeric: tabular-nums; 438 + } 439 + 440 + .vouch-delete { 441 + background: none; 442 + border: none; 443 + cursor: pointer; 444 + padding: 0 0.25rem; 445 + font-size: 14px; 446 + opacity: 0.5; 447 + flex-shrink: 0; 448 + } 449 + 450 + .vouch-delete:hover { 451 + opacity: 1; 452 + } 453 + 454 + /* ── right sidebar (remote vouches) ── */ 455 + 456 + .sidebar-right { 457 + width: 240px; 458 + flex-shrink: 0; 459 + border: 1px solid var(--border); 460 + border-top: 3px solid var(--text-dim); 461 + padding: 1.25rem; 462 + background: var(--bg-raised); 463 + } 464 + 465 + .vouch-mutual { 466 + color: var(--text-faint); 467 + font-size: 10px; 468 + letter-spacing: 0.06em; 469 + text-transform: uppercase; 470 + flex-shrink: 0; 471 + } 472 + 473 + 474 + /* ── pagination ── */ 475 + 476 + .vouch-count { 477 + font-weight: 400; 478 + font-size: 0.85em; 479 + color: var(--text-dim); 480 + } 481 + 482 + .load-more { 483 + width: 100%; 484 + margin-top: 0.5rem; 485 + font-size: 11px; 486 + padding: 0.4rem 0.8rem; 487 + } 488 + 489 + /* ── footer ── */ 490 + 491 + .footer { 492 + margin-top: 3rem; 493 + padding-top: 1rem; 494 + border-top: 1px solid var(--border); 495 + color: var(--text-dim); 496 + font-size: 12px; 497 + text-align: center; 498 + } 499 + 500 + .design-link { 501 + text-align: center; 502 + margin-top: 3rem; 503 + font-size: 12px; 504 + letter-spacing: 0.03em; 505 + } 506 + 507 + /* ── design decisions ── */ 508 + 509 + .design-decisions { 510 + margin-top: 1rem; 511 + } 512 + 513 + .design-decisions-list { 514 + border: 1px solid var(--border); 515 + border-top: 3px solid var(--accent); 516 + background: var(--bg-raised); 517 + } 518 + 519 + .design-decision-item { 520 + padding: 1rem 1.25rem; 521 + border-bottom: 1px solid var(--border); 522 + } 523 + 524 + .design-decision-item:last-child { 525 + border-bottom: none; 526 + } 527 + 528 + .design-decision-item h3 { 529 + font-family: var(--sans); 530 + font-size: 14px; 531 + font-weight: 700; 532 + color: var(--text); 533 + margin-bottom: 0.35rem; 534 + } 535 + 536 + .design-decision-item p { 537 + font-size: 13px; 538 + line-height: 1.7; 539 + color: var(--text-dim); 540 + } 541 + 542 + /* ── bot repositories ── */ 543 + 544 + .bot-repos-section { 545 + margin-top: 2rem; 546 + border-top: 3px solid var(--accent); 547 + border-left: 1px solid var(--border); 548 + } 549 + 550 + .bot-repos-desc { 551 + color: var(--text-dim); 552 + font-size: 12px; 553 + margin-bottom: 0.75rem; 554 + line-height: 1.5; 555 + } 556 + 557 + .bot-repos-list { 558 + list-style: none; 559 + margin: 0; 560 + padding: 0; 561 + } 562 + 563 + .bot-repo-item { 564 + padding: 0.6rem 0; 565 + border-bottom: 1px solid var(--border); 566 + } 567 + 568 + .bot-repo-item:last-child { 569 + border-bottom: none; 570 + } 571 + 572 + .bot-repo-header { 573 + display: flex; 574 + justify-content: space-between; 575 + align-items: flex-start; 576 + gap: 0.5rem; 577 + } 578 + 579 + .bot-repo-info { 580 + display: flex; 581 + flex-direction: column; 582 + min-width: 0; 583 + flex: 1; 584 + } 585 + 586 + .bot-repo-name { 587 + font-family: var(--mono); 588 + font-size: 13px; 589 + font-weight: 700; 590 + overflow: hidden; 591 + text-overflow: ellipsis; 592 + white-space: nowrap; 593 + display: inline-flex; 594 + align-items: center; 595 + gap: 4px; 596 + } 597 + 598 + .fork-icon { 599 + opacity: 0.6; 600 + flex-shrink: 0; 601 + } 602 + 603 + .bot-repo-desc { 604 + color: var(--text-dim); 605 + font-size: 11px; 606 + line-height: 1.4; 607 + margin-top: 0.15rem; 608 + overflow: hidden; 609 + text-overflow: ellipsis; 610 + white-space: nowrap; 611 + } 612 + 613 + .bot-repo-btn { 614 + font-size: 11px; 615 + padding: 0.3rem 0.7rem; 616 + flex-shrink: 0; 617 + } 618 + 619 + .bot-repo-btn-add:hover:not(:disabled) { 620 + background: #4caf50; 621 + border-color: #4caf50; 622 + color: var(--bg); 623 + } 624 + 625 + .bot-repo-btn-remove:hover:not(:disabled) { 626 + background: var(--error); 627 + border-color: var(--error); 628 + color: var(--bg); 629 + } 630 + 631 + /* ── maintainers ── */ 632 + 633 + .maintainers { 634 + margin-top: 0.4rem; 635 + display: flex; 636 + align-items: flex-start; 637 + gap: 0.4rem; 638 + flex-wrap: wrap; 639 + } 640 + 641 + .maintainers-label { 642 + color: var(--text-faint); 643 + font-size: 11px; 644 + text-transform: uppercase; 645 + letter-spacing: 0.04em; 646 + line-height: 22px; 647 + flex-shrink: 0; 648 + } 649 + 650 + .maintainers-list { 651 + display: flex; 652 + align-items: center; 653 + gap: 0.35rem; 654 + flex-wrap: wrap; 655 + } 656 + 657 + .maintainer-chip { 658 + display: inline-flex; 659 + align-items: center; 660 + gap: 0.25rem; 661 + background: var(--bg); 662 + border: 1px solid var(--border); 663 + padding: 0.15rem 0.4rem; 664 + font-size: 11px; 665 + line-height: 1; 666 + } 667 + 668 + .maintainer-chip a { 669 + font-size: 11px; 670 + } 671 + 672 + .maintainer-avatar { 673 + width: 16px; 674 + height: 16px; 675 + border-radius: 50%; 676 + flex-shrink: 0; 677 + } 678 + 679 + .maintainer-remove { 680 + background: none; 681 + border: none; 682 + color: var(--text-faint); 683 + font-size: 10px; 684 + padding: 0 0.15rem; 685 + cursor: pointer; 686 + line-height: 1; 687 + opacity: 0.5; 688 + } 689 + 690 + .maintainer-remove:hover { 691 + opacity: 1; 692 + color: var(--error); 693 + background: none; 694 + } 695 + 696 + .maintainer-add-btn { 697 + background: none; 698 + border: 1px solid var(--border); 699 + color: var(--text-dim); 700 + font-size: 13px; 701 + width: 22px; 702 + height: 22px; 703 + padding: 0; 704 + display: inline-flex; 705 + align-items: center; 706 + justify-content: center; 707 + cursor: pointer; 708 + line-height: 1; 709 + } 710 + 711 + .maintainer-add-btn:hover:not(:disabled) { 712 + background: var(--accent); 713 + border-color: var(--accent); 714 + color: var(--bg); 715 + } 716 + 717 + .maintainer-input-wrapper { 718 + position: relative; 719 + } 720 + 721 + .maintainer-input { 722 + width: 140px !important; 723 + font-size: 11px !important; 724 + padding: 0.2rem 0.4rem !important; 725 + border: 1px solid var(--border) !important; 726 + border-right: 1px solid var(--border) !important; 727 + background: var(--bg-input); 728 + color: var(--text); 729 + font-family: var(--mono); 730 + } 731 + 732 + .maintainer-input:focus { 733 + border-color: var(--accent) !important; 734 + outline: none; 735 + } 736 + 737 + .maintainer-dropdown { 738 + position: absolute; 739 + top: 100%; 740 + left: 0; 741 + right: 0; 742 + margin: 0; 743 + padding: 0; 744 + list-style: none; 745 + background: var(--bg); 746 + border: 1px solid var(--border); 747 + border-top: none; 748 + z-index: 20; 749 + max-height: 160px; 750 + overflow-y: auto; 751 + min-width: 180px; 752 + } 753 + 754 + .maintainer-dropdown li { 755 + display: flex; 756 + align-items: center; 757 + gap: 0.35rem; 758 + padding: 0.3rem 0.5rem; 759 + cursor: pointer; 760 + font-size: 11px; 761 + } 762 + 763 + .maintainer-dropdown li:hover, 764 + .maintainer-dd-active { 765 + background: var(--border); 766 + } 767 + 768 + .maintainer-dd-avatar { 769 + width: 16px; 770 + height: 16px; 771 + border-radius: 50%; 772 + flex-shrink: 0; 773 + } 774 + 775 + /* ── responsive ── */ 776 + 777 + @media (max-width: 980px) { 778 + .container { 779 + padding: 2rem 1rem; 780 + } 781 + 782 + h1 { 783 + font-size: 2.5rem; 784 + } 785 + 786 + .layout { 787 + flex-direction: column; 788 + } 789 + 790 + .sidebar { 791 + width: 100%; 792 + } 793 + 794 + .sidebar-right { 795 + width: 100%; 796 + } 797 + 798 + .main-panel { 799 + width: 100%; 800 + } 801 + 802 + .intro-block { 803 + flex-direction: column; 804 + } 805 + 806 + .intro { 807 + border-right: none; 808 + border-bottom: 1px solid var(--border); 809 + padding-right: 0; 810 + padding-bottom: 1rem; 811 + } 812 + 813 + .intro-right { 814 + padding-left: 0; 815 + } 816 + 817 + .instructions { 818 + text-align: left; 819 + } 820 + 821 + .design-decisions-list { 822 + width: 100%; 823 + } 824 + } 825 + 826 + /* Typeahead */ 827 + .handle-input-wrapper { 828 + position: relative; 829 + flex: 1; 830 + } 831 + 832 + .handle-input-wrapper input { 833 + width: 100%; 834 + box-sizing: border-box; 835 + } 836 + 837 + .typeahead-dropdown { 838 + position: absolute; 839 + top: 100%; 840 + left: 0; 841 + right: 0; 842 + margin: 0; 843 + padding: 0; 844 + list-style: none; 845 + background: var(--bg); 846 + border: 1px solid var(--border); 847 + border-top: none; 848 + z-index: 10; 849 + max-height: 280px; 850 + overflow-y: auto; 851 + } 852 + 853 + .typeahead-dropdown li { 854 + display: flex; 855 + align-items: center; 856 + gap: 0.5rem; 857 + padding: 0.4rem 0.6rem; 858 + cursor: pointer; 859 + } 860 + 861 + .typeahead-dropdown li.typeahead-active { 862 + background: var(--border); 863 + } 864 + 865 + .typeahead-avatar { 866 + width: 24px; 867 + height: 24px; 868 + border-radius: 50%; 869 + flex-shrink: 0; 870 + } 871 + 872 + .typeahead-info { 873 + display: flex; 874 + flex-direction: column; 875 + min-width: 0; 876 + } 877 + 878 + .typeahead-name { 879 + font-size: 0.85rem; 880 + white-space: nowrap; 881 + overflow: hidden; 882 + text-overflow: ellipsis; 883 + } 884 + 885 + .typeahead-handle { 886 + font-size: 0.75rem; 887 + opacity: 0.6; 888 + white-space: nowrap; 889 + overflow: hidden; 890 + text-overflow: ellipsis; 891 + }