Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

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

buy: cosmetic refresh and responsive typography scaling

+74 -13
+74 -13
system/public/kidlisp.com/buy.html
··· 30 30 --bg: #12101a; 31 31 --bg2: #1a1726; 32 32 --bg3: #221e30; 33 + --bg-grad-1: rgba(205, 92, 155, 0.16); 34 + --bg-grad-2: rgba(112, 214, 255, 0.12); 33 35 --text: #e8e0f0; 34 36 --text2: #9088a0; 35 37 --border: #2e2840; ··· 55 57 --bg: #faf8ff; 56 58 --bg2: #f0ecf8; 57 59 --bg3: white; 60 + --bg-grad-1: rgba(205, 92, 155, 0.12); 61 + --bg-grad-2: rgba(112, 214, 255, 0.1); 58 62 --text: #1a1528; 59 63 --text2: #6a5f80; 60 64 --border: #ddd4ee; ··· 67 71 68 72 body { 69 73 font-family: var(--font-fun); 70 - background: var(--bg); 74 + background: 75 + radial-gradient(1100px 620px at 8% -12%, var(--bg-grad-1), transparent 70%), 76 + radial-gradient(900px 560px at 92% -18%, var(--bg-grad-2), transparent 72%), 77 + var(--bg); 71 78 color: var(--text); 72 79 min-height: 100vh; 73 80 -webkit-font-smoothing: antialiased; 81 + background-attachment: fixed; 74 82 } 75 83 76 84 /* ── Header ── */ ··· 85 93 top: 0; 86 94 z-index: 100; 87 95 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); 96 + backdrop-filter: blur(8px); 88 97 } 89 98 90 99 .logo { ··· 122 131 background: linear-gradient(135deg, rgba(78, 205, 196, 0.15), rgba(205, 92, 155, 0.15)); 123 132 border: 1px solid var(--neon-cyan); 124 133 color: var(--neon-cyan); 125 - padding: 6px 14px; 134 + padding: 8px 14px; 126 135 border-radius: var(--radius); 127 136 font-family: var(--font-fun); 128 137 font-size: 12px; ··· 137 146 .grid { 138 147 display: flex; 139 148 flex-direction: column; 140 - gap: 10px; 141 - padding: 16px; 142 - max-width: 640px; 149 + gap: 12px; 150 + padding: 18px 16px 14px; 151 + max-width: 760px; 143 152 margin: 0 auto; 144 153 } 145 154 .grid.sold-grid { ··· 154 163 .card { 155 164 position: relative; 156 165 border: 1px solid var(--border); 157 - border-radius: var(--radius); 166 + border-radius: 14px; 158 167 overflow: hidden; 159 168 cursor: pointer; 160 169 transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; ··· 162 171 display: flex; 163 172 flex-direction: row; 164 173 align-items: center; 165 - min-height: 100px; 174 + min-height: 112px; 166 175 background-size: cover; 167 176 background-position: center; 168 177 background-color: var(--bg3); ··· 189 198 .card-body { 190 199 position: relative; 191 200 z-index: 2; 192 - padding: 14px 18px; 201 + padding: 15px 18px; 193 202 display: flex; 194 203 flex-direction: column; 195 204 justify-content: center; ··· 199 208 } 200 209 201 210 .card-code { 202 - font-size: 18px; 211 + font-size: 20px; 203 212 font-weight: 700; 204 - font-family: var(--font-mono); 213 + font-family: var(--font-display); 214 + letter-spacing: 0.02em; 205 215 color: #fff; 206 216 text-shadow: 0 1px 4px rgba(0,0,0,0.6); 207 217 } 208 218 209 219 .card-price { 210 - font-size: 16px; 220 + font-size: 17px; 211 221 font-weight: 700; 212 222 color: var(--gold); 213 223 text-shadow: 0 1px 4px rgba(0,0,0,0.5); ··· 427 437 .tab { 428 438 width: 100%; 429 439 min-width: 0; 430 - padding: 18px 12px; 440 + padding: 16px 12px; 431 441 font-family: var(--font-fun); 432 442 font-size: 20px; 433 443 font-weight: 700; ··· 460 470 border-bottom-color: var(--gold); 461 471 box-shadow: inset 0 -1px 0 rgba(255, 230, 109, 0.5); 462 472 } 473 + 474 + .shop-intro { 475 + max-width: 760px; 476 + margin: 12px auto 0; 477 + padding: 10px 16px; 478 + font-family: var(--font-mono); 479 + font-size: 11px; 480 + letter-spacing: 0.03em; 481 + text-transform: uppercase; 482 + color: var(--text2); 483 + border-left: 2px solid var(--accent); 484 + background: rgba(255, 255, 255, 0.03); 485 + } 486 + @media (prefers-color-scheme: light) { 487 + .shop-intro { 488 + background: rgba(255, 255, 255, 0.6); 489 + } 490 + } 463 491 /* ── Albums ── */ 464 492 .albums-grid { 465 493 display: flex; ··· 565 593 .card-buy-btn { 566 594 position: relative; 567 595 z-index: 2; 568 - background: var(--gold); 596 + background: linear-gradient(180deg, #fff3ac 0%, var(--gold) 100%); 569 597 color: #1a1528; 570 598 border: none; 571 599 padding: 12px 20px; ··· 580 608 white-space: nowrap; 581 609 align-self: center; 582 610 flex-shrink: 0; 611 + box-shadow: 0 2px 8px rgba(255, 230, 109, 0.38); 583 612 } 584 613 .card-buy-btn:hover { opacity: 0.85; transform: scale(1.03); } 585 614 .card-buy-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } 586 615 616 + /* ── Larger screens: scale typography up ── */ 617 + @media (min-width: 900px) { 618 + .logo { font-size: 24px; } 619 + .tab { font-size: 24px; padding: 20px 14px; } 620 + .shop-intro { font-size: 12px; padding: 12px 18px; } 621 + .grid { max-width: 820px; } 622 + .card { min-height: 124px; } 623 + .card-body { padding: 18px 22px; } 624 + .card-code { font-size: 24px; } 625 + .card-price { font-size: 19px; } 626 + .card-seller { font-size: 11px; } 627 + .card-buy-btn { font-size: 15px; padding: 14px 24px; } 628 + .loading { font-size: 16px; } 629 + .modal-title { font-size: 18px; } 630 + .modal-price { font-size: 21px; } 631 + .buy-btn { font-size: 18px; padding: 15px 34px; } 632 + } 633 + 634 + @media (min-width: 1300px) { 635 + .logo { font-size: 27px; } 636 + .tab { font-size: 27px; padding: 22px 16px; } 637 + .shop-intro { font-size: 13px; } 638 + .grid { max-width: 940px; padding-top: 22px; } 639 + .card { min-height: 136px; } 640 + .card-code { font-size: 28px; } 641 + .card-price { font-size: 21px; } 642 + .card-seller { font-size: 12px; } 643 + .card-buy-btn { font-size: 16px; padding: 16px 26px; } 644 + } 645 + 587 646 /* ── Footer ── */ 588 647 footer { 589 648 text-align: center; ··· 646 705 <button class="tab active" data-tab="fresh">Shop</button> 647 706 <button class="tab" data-tab="albums">Buyers</button> 648 707 </div> 708 + 709 + <div class="shop-intro">Fresh keeps are listed below. Buyers shows who is currently collecting.</div> 649 710 650 711 <div class="grid" id="grid"> 651 712 <div class="loading">Loading listings…</div>