The codebase that powers boop.cat boop.cat
11
fork

Configure Feed

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

cool list

+36 -46
+36 -46
client/src/styles.css
··· 434 434 .repoGrid { 435 435 display: flex; 436 436 flex-direction: column; 437 - gap: 12px; 437 + gap: 10px; 438 438 margin-top: 16px; 439 439 max-height: 600px; 440 440 overflow-y: auto; ··· 465 465 flex-direction: row; 466 466 align-items: center; 467 467 width: 100%; 468 - padding: 16px; 469 - gap: 16px; 470 - background: rgba(255, 255, 255, 0.65); 471 - border: 1px solid rgba(255, 255, 255, 0.8); 472 - border-radius: 18px; 468 + padding: 14px 16px; 469 + gap: 14px; 470 + background: var(--card-bg-solid); 471 + border: 2px solid var(--card-text); 472 + border-radius: 14px; 473 473 text-align: left; 474 474 cursor: pointer; 475 - transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); 475 + transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s; 476 476 position: relative; 477 - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); 477 + box-shadow: 3px 3px 0 var(--card-text); 478 478 animation: repoItemIn 0.3s ease-out backwards; 479 479 } 480 480 ··· 502 502 } 503 503 504 504 .repoItem:hover { 505 - background: rgba(255, 255, 255, 0.95); 506 - transform: scale(1.005); 507 - box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08); 508 - border-color: rgba(255, 255, 255, 1); 505 + border-color: var(--accent); 506 + box-shadow: 4px 4px 0 var(--accent); 509 507 z-index: 2; 510 508 } 511 509 512 510 [data-theme='dark'] .repoItem { 513 - background: rgba(15, 23, 42, 0.6); 514 - border-color: rgba(255, 255, 255, 0.06); 515 - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 511 + background: var(--card-bg-solid); 512 + box-shadow: 3px 3px 0 var(--accent); 516 513 } 517 514 518 515 [data-theme='dark'] .repoItem:hover { 519 - background: rgba(30, 41, 59, 1); 520 - border-color: rgba(244, 162, 149, 0.3); 521 - box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.4); 516 + border-color: var(--accent); 517 + box-shadow: 4px 4px 0 var(--accent); 522 518 } 523 519 524 520 .repoItemIcon { 525 521 display: flex; 526 522 align-items: center; 527 523 justify-content: center; 528 - width: 42px; 529 - height: 42px; 530 - background: white; 531 - border-radius: 12px; 532 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 533 - border: 1px solid rgba(0, 0, 0, 0.04); 534 - color: #171717; 524 + width: 40px; 525 + height: 40px; 526 + background: var(--code-bg); 527 + border-radius: 10px; 528 + border: 2px solid var(--card-text); 529 + color: var(--card-text); 535 530 flex-shrink: 0; 536 531 } 537 532 538 533 [data-theme='dark'] .repoItemIcon { 539 - background: #1e293b; 540 - border-color: rgba(255, 255, 255, 0.1); 541 - color: #e2e8f0; 542 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 534 + background: var(--sidebar-bg); 535 + border-color: var(--accent); 536 + color: var(--accent); 543 537 } 544 538 545 539 .repoItemContent { ··· 586 580 } 587 581 588 582 .repoItemPrivate { 589 - background: rgba(245, 158, 11, 0.1); 583 + background: rgba(245, 158, 11, 0.12); 590 584 color: #b45309; 591 - padding: 2px 8px; 592 - border-radius: 99px; 585 + padding: 3px 8px; 586 + border-radius: 8px; 593 587 font-size: 11px; 594 - font-weight: 600; 588 + font-weight: 700; 595 589 display: inline-flex; 596 590 align-items: center; 597 591 gap: 4px; ··· 628 622 display: inline-block; 629 623 } 630 624 631 - [data-theme='dark'] .repoItem:hover { 632 - background: rgba(12, 18, 32, 0.9); 633 - border-color: var(--accent); 634 - } 635 - 636 625 .repoArrow { 637 - color: var(--muted); 638 - opacity: 0.5; 626 + color: var(--card-text); 627 + opacity: 0.4; 639 628 margin-left: 8px; 629 + transition: opacity 0.15s; 640 630 } 641 631 642 - [data-theme='dark'] .repoArrow { 643 - color: #fbbf24; 644 - opacity: 0.8; 632 + .repoItem:hover .repoArrow { 633 + opacity: 1; 634 + color: var(--accent); 645 635 } 646 636 647 - [data-theme='dark'] .repoItemPrivate { 648 - background: rgba(255, 255, 255, 0.1); 649 - color: var(--card-text-light); 637 + [data-theme='dark'] .repoArrow { 638 + color: var(--accent); 639 + opacity: 0.5; 650 640 } 651 641 652 642 .searchIcon {