The codebase that powers boop.cat
boop.cat
cool list
+36
-46
+36
-46
client/src/styles.css
+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 {