Add dynamic footer badge marquee with admin management.
Store badges in Postgres, expose public/admin APIs, render an infinite footer slider, and ship /admin for paste-embed CRUD. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
co-authored by
Cursor
parent
42ad9c38e3
commit
7d22f722f6
@@ -116,6 +116,68 @@
|
||||
.mobile-sidebar-link-danger:hover::before {
|
||||
@apply bg-red-400;
|
||||
}
|
||||
|
||||
.badge-marquee {
|
||||
@apply relative w-full overflow-hidden;
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 8%,
|
||||
black 92%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.badge-marquee-track {
|
||||
@apply flex w-max items-center gap-10;
|
||||
animation: badge-marquee-scroll var(--badge-marquee-duration, 28s) linear infinite;
|
||||
}
|
||||
|
||||
.badge-marquee:hover .badge-marquee-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.badge-marquee-track {
|
||||
animation: none;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.badge-marquee-item[aria-hidden="true"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-marquee-item {
|
||||
@apply flex shrink-0 items-center justify-center;
|
||||
}
|
||||
|
||||
.badge-marquee-slot {
|
||||
@apply flex h-14 max-h-14 items-center justify-center;
|
||||
}
|
||||
|
||||
.badge-marquee-slot a,
|
||||
.badge-marquee-link {
|
||||
@apply m-0 inline-flex items-center p-0 leading-none no-underline;
|
||||
}
|
||||
|
||||
.badge-marquee-slot img,
|
||||
.badge-marquee-slot iframe,
|
||||
.badge-marquee-slot svg,
|
||||
.badge-marquee-slot object {
|
||||
display: block !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
max-height: 3.5rem !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
max-width: min(280px, 70vw) !important;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mockup-float {
|
||||
@@ -246,3 +308,12 @@
|
||||
transform: scale(0.6) rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes badge-marquee-scroll {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user