Monorepo for Aesthetic.Computer
aesthetic.computer
buy.kidlisp.com: show last collected piece as background in Keepers rows
Each collector's row now shows their most recently collected piece's
animated thumbnail as a faded background strip, matching the Shop
card style.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+18
-3
+18
-3
system/public/kidlisp.com/buy.html
+18
-3
system/public/kidlisp.com/buy.html
···
472
472
border-bottom: 1px solid var(--border);
473
473
cursor: pointer;
474
474
transition: background 0.15s;
475
+
background-size: cover;
476
+
background-position: center;
477
+
background-repeat: no-repeat;
478
+
position: relative;
475
479
}
476
-
.album-row:hover {
477
-
background: var(--bg3);
480
+
.album-row::before {
481
+
content: '';
482
+
position: absolute;
483
+
inset: 0;
484
+
background: linear-gradient(90deg, var(--bg) 0%, rgba(18, 16, 26, 0.85) 40%, rgba(18, 16, 26, 0.6) 100%);
485
+
pointer-events: none;
486
+
}
487
+
.album-row > * { position: relative; z-index: 1; }
488
+
.album-row:hover::before {
489
+
background: linear-gradient(90deg, var(--bg3) 0%, rgba(34, 30, 48, 0.85) 40%, rgba(34, 30, 48, 0.5) 100%);
478
490
}
479
491
.album-rank {
480
492
font-size: 18px;
···
963
975
grid.innerHTML = albums.map((album, i) => {
964
976
const name = album.alias || sellerName(album.address);
965
977
const tokens = album.tokens.sort((a, b) => Number(a.tokenId) - Number(b.tokenId));
978
+
const lastToken = tokens[tokens.length - 1];
979
+
const lastThumb = animatedWebpUrl(lastToken?.thumbnailUri);
980
+
const rowBg = lastThumb ? `background-image:url('${lastThumb}')` : '';
966
981
const pct = Math.round((album.tokens.length / maxCount) * 100);
967
982
const medal = i === 0 ? '\uD83E\uDD47' : i === 1 ? '\uD83E\uDD48' : i === 2 ? '\uD83E\uDD49' : `${i + 1}`;
968
983
return `<div class="album-entry">
969
-
<div class="album-row" data-idx="${i}">
984
+
<div class="album-row" data-idx="${i}" style="${rowBg}">
970
985
<div class="album-rank">${medal}</div>
971
986
<div class="album-name">${name}</div>
972
987
<div class="album-bar-wrap">