aesthetic.computer / core
Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

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

menuband landing: drop window chrome for floating glass cards

Remove the faux Tiger window (titlebar, traffic lights, pinstripe, white
plate) and the icon's vibrancy plate + dock reflection. Hero and panels
become independent backdrop-blurred cards on the sky, gaps between them
revealing a now-multicolored music-note drift. Wordmark switches to an
Apple Garamond italic stack (falling back to Hoefler Text on stock macOS).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

prompt.ac/@jeffrey 841523ec 9c4fced5

+74 -183
+74 -183
system/public/menuband/index.html
··· 30 30 31 31 <style> 32 32 /* ──────────────────────────────────────────────────────────────────────── 33 - Spine: Tiger/Leopard Aqua (jellybean buttons, pinstripe, traffic lights). 34 - Flair: Tahoe/Sonoma (vibrancy plate, layered shadows, 35 - SF Rounded display, saturated accent, glassy CTA). 36 - The retro chrome is the canvas; the modern bits float over it. 33 + Tiger Aqua jellybean button + Tahoe-style glass cards floating on a 34 + pastel sky scattered with multi-hued music notes. Apple Garamond 35 + italic for the wordmark, Berkeley Mono for the captions. 37 36 ──────────────────────────────────────────────────────────────────────── */ 38 37 39 38 :root { ··· 48 47 --panel-bg: #ededed; 49 48 --panel-stripe: #e5e5e5; 50 49 --panel-edge: #c4ccd4; 51 - --titlebar-top: #e8e8e8; 52 - --titlebar-bot: #c8c8c8; 53 50 --ink-body: #1d1d1f; /* Apple near-black, warmer than #2b2b2b */ 54 51 --ink-head: #1a1a1a; 55 52 --ink-soft: #5a5f66; ··· 88 85 position: relative; 89 86 } 90 87 91 - /* Subtle musical pattern tiled over the sky — quarter, eighth, beam, 92 - flat. Tinted Aqua-edge so it reads like a watermark. Pans diagonally 93 - over 90s for a slow drift; pointer-events disabled so it can't grab 94 - clicks. */ 88 + /* Musical pattern tiled over the sky — quarter, eighth, beam, flat. 89 + Multi-hued (rainbow nod to the old Apple wordmark) at low opacity so 90 + it reads like confetti behind glass. Pans diagonally over 90s for a 91 + slow drift; pointer-events disabled so it can't grab clicks. */ 95 92 body::before { 96 93 content: ""; 97 94 position: fixed; 98 95 inset: -120px; /* overscan so panning never reveals an edge */ 99 96 pointer-events: none; 100 97 z-index: 0; 101 - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='180' viewBox='0 0 240 180'><g fill='%231f5aa8' opacity='0.10' font-family='Georgia,serif'><text x='10' y='34' font-size='34' transform='rotate(-14 10 34)'>♪</text><text x='80' y='28' font-size='52' transform='rotate(8 80 28)'>♫</text><text x='170' y='44' font-size='22' transform='rotate(-28 170 44)'>♩</text><text x='215' y='80' font-size='40' transform='rotate(18 215 80)'>♬</text><text x='38' y='80' font-size='62' transform='rotate(22 38 80)'>♬</text><text x='118' y='98' font-size='18' transform='rotate(-42 118 98)'>♭</text><text x='195' y='138' font-size='30' transform='rotate(12 195 138)'>♯</text><text x='12' y='148' font-size='28' transform='rotate(-6 12 148)'>♮</text><text x='72' y='162' font-size='44' transform='rotate(28 72 162)'>♩</text><text x='148' y='172' font-size='20' transform='rotate(-18 148 172)'>♪</text><text x='100' y='58' font-size='16' transform='rotate(55 100 58)'>♭</text><text x='160' y='110' font-size='24' transform='rotate(-50 160 110)'>♯</text></g></svg>"); 98 + background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='180' viewBox='0 0 240 180'><g opacity='0.32' font-family='Georgia,serif'><text x='10' y='34' fill='%23ff6b6b' font-size='34' transform='rotate(-14 10 34)'>♪</text><text x='80' y='28' fill='%23ffa53d' font-size='52' transform='rotate(8 80 28)'>♫</text><text x='170' y='44' fill='%23e6c200' font-size='22' transform='rotate(-28 170 44)'>♩</text><text x='215' y='80' fill='%2363c97c' font-size='40' transform='rotate(18 215 80)'>♬</text><text x='38' y='80' fill='%234e9bff' font-size='62' transform='rotate(22 38 80)'>♬</text><text x='118' y='98' fill='%23a674e8' font-size='18' transform='rotate(-42 118 98)'>♭</text><text x='195' y='138' fill='%23ff6b6b' font-size='30' transform='rotate(12 195 138)'>♯</text><text x='12' y='148' fill='%23ffa53d' font-size='28' transform='rotate(-6 12 148)'>♮</text><text x='72' y='162' fill='%2363c97c' font-size='44' transform='rotate(28 72 162)'>♩</text><text x='148' y='172' fill='%234e9bff' font-size='20' transform='rotate(-18 148 172)'>♪</text><text x='100' y='58' fill='%23a674e8' font-size='16' transform='rotate(55 100 58)'>♭</text><text x='160' y='110' fill='%23ff6b6b' font-size='24' transform='rotate(-50 160 110)'>♯</text></g></svg>"); 102 99 background-repeat: repeat; 103 100 animation: drift-music 90s linear infinite; 104 101 } ··· 110 107 /* Anything that should sit ABOVE the music drift. */ 111 108 .window, footer { position: relative; z-index: 1; } 112 109 110 + /* Container is just for centering — no chrome, no white plate. The 111 + hero and panels each become their own floating glass card, with 112 + gaps that let the music notes peek through. */ 113 113 .window { 114 114 max-width: 520px; 115 115 margin: 0 auto; 116 - background: #fff; 117 - border-radius: 8px 8px 6px 6px; 118 - border: 1px solid var(--panel-edge); 119 - box-shadow: 120 - 0 1px 0 rgba(255, 255, 255, 0.65) inset, 121 - var(--shadow-card); 122 - overflow: hidden; 123 - } 124 - 125 - /* Tiger-era titlebar with traffic lights. Pure cosmetic. */ 126 - .titlebar { 127 - height: 22px; 128 - background: linear-gradient(to bottom, var(--titlebar-top), var(--titlebar-bot)); 129 - border-bottom: 1px solid var(--panel-edge); 130 - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; 131 - display: flex; 132 - align-items: center; 133 - padding: 0 9px; 134 - position: relative; 135 - user-select: none; 136 - } 137 - .lights { display: flex; gap: 7px; } 138 - .light { 139 - width: 11px; height: 11px; 140 - border-radius: 50%; 141 - box-shadow: 142 - 0 1px 0 rgba(255, 255, 255, 0.55) inset, 143 - 0 0 0 0.5px rgba(0, 0, 0, 0.25); 144 - } 145 - .light.r { background: radial-gradient(circle at 35% 35%, #ff8a85, #ff5f57); } 146 - .light.y { background: radial-gradient(circle at 35% 35%, #ffd68a, #febc2e); } 147 - .light.g { background: radial-gradient(circle at 35% 35%, #6fe89d, #28c840); } 148 - .titlebar h1 { 149 - margin: 0 0 0 10px; 150 - font-size: 11px; 151 - font-weight: 500; 152 - letter-spacing: 0.02em; 153 - } 154 - .titlebar h1 a, .titlebar h1 a:visited { 155 - color: #4a4a4a; 156 - text-decoration: none; 157 - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); 158 - cursor: inherit; 159 - transition: color 220ms var(--ease-apple); 160 - } 161 - .titlebar h1 a:hover { color: var(--tahoe-blue); } 162 - 163 - /* Pinstripe section — alternating 1px lines, very subtle. */ 164 - .pinstripe { 165 - background: 166 - repeating-linear-gradient( 167 - to bottom, 168 - var(--panel-bg) 0, 169 - var(--panel-bg) 1px, 170 - var(--panel-stripe) 1px, 171 - var(--panel-stripe) 2px 172 - ); 116 + background: none; 117 + border: 0; 118 + box-shadow: none; 119 + overflow: visible; 173 120 } 174 121 175 122 /* ── Hero ─────────────────────────────────────────────────────────────── */ 176 123 177 124 .hero { 178 - padding: 40px 32px 28px; 125 + padding: 36px 32px 28px; 179 126 text-align: center; 180 127 position: relative; 128 + background: rgba(255, 255, 255, 0.5); 129 + backdrop-filter: blur(24px) saturate(180%); 130 + -webkit-backdrop-filter: blur(24px) saturate(180%); 131 + border-radius: 18px; 132 + border: 1px solid rgba(255, 255, 255, 0.7); 133 + box-shadow: 134 + 0 1px 0 rgba(255, 255, 255, 0.85) inset, 135 + 0 12px 32px -14px rgba(15, 30, 60, 0.18); 136 + margin-bottom: 14px; 181 137 } 182 138 183 139 .icon-stage { 184 140 position: relative; 185 141 width: 256px; 186 - height: 320px; /* extra room for the dock reflection */ 187 - margin: 0 auto 8px; 188 - } 189 - 190 - /* Vibrancy plate behind the hero icon — the single highest-leverage 191 - modern touch, per Tahoe's "Liquid Glass" pattern. Sits under the 192 - icon, blurs whatever's behind it (the Aqua sky + music drift). */ 193 - .icon-stage::before { 194 - content: ""; 195 - position: absolute; 196 - inset: 28px 18px 64px 18px; 197 - background: rgba(255, 255, 255, 0.5); 198 - backdrop-filter: blur(40px) saturate(180%); 199 - -webkit-backdrop-filter: blur(40px) saturate(180%); 200 - border-radius: 50%; 201 - border: 1px solid rgba(255, 255, 255, 0.65); 202 - box-shadow: 203 - inset 0 1px 0 rgba(255, 255, 255, 0.8), 204 - inset 0 -1px 0 rgba(30, 60, 110, 0.08), 205 - 0 8px 24px -8px rgba(30, 60, 110, 0.18); 206 - z-index: 0; 207 - } 208 - .icon-stage img.app-icon, 209 - .icon-stage img.reflection { 210 - position: relative; 211 - z-index: 1; 142 + height: 256px; 143 + margin: 0 auto 14px; 212 144 } 213 145 .icon-stage img.app-icon { 214 146 width: 256px; 215 147 height: 256px; 216 148 display: block; 217 149 image-rendering: -webkit-optimize-contrast; 218 - } 219 - .icon-stage img.reflection { 220 - position: absolute; 221 - top: 256px; 222 - left: 0; 223 - width: 256px; 224 - height: 64px; 225 - transform: scaleY(-1); 226 - object-fit: cover; 227 - object-position: top; 228 - opacity: 0.35; 229 - -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0)); 230 - mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0)); 231 - pointer-events: none; 150 + filter: 151 + drop-shadow(0 2px 3px rgba(15, 30, 60, 0.20)) 152 + drop-shadow(0 14px 18px rgba(15, 30, 60, 0.28)); 232 153 } 233 154 155 + /* Apple Garamond italic — the "Think different" / classic-product wordmark 156 + feel. Falls back through ITC Garamond, Hoefler Text, and Garamond on 157 + stock macOS. */ 234 158 h2.app-title { 235 159 margin: 0 0 6px; 236 - font-family: var(--display-stack); 237 - font-size: 38px; 238 - font-weight: 600; 239 - letter-spacing: -0.015em; 160 + font-family: "Apple Garamond", "ITC Garamond Std", "ITC Garamond", 161 + "Garamond Premier Pro", "Hoefler Text", Garamond, 162 + "Times New Roman", serif; 163 + font-style: italic; 164 + font-size: 52px; 165 + font-weight: 400; 166 + letter-spacing: 0.005em; 240 167 color: var(--ink-head); 168 + line-height: 1.05; 241 169 } 242 170 p.tagline { 243 171 margin: 0 auto 22px; ··· 330 258 331 259 /* ── Body sections ────────────────────────────────────────────────────── */ 332 260 333 - .divider { height: 14px; } 334 - 261 + /* Each panel is its own floating glass card. The space between cards 262 + reveals the music-note drift behind. */ 335 263 section.panel { 336 - padding: 22px 32px; 337 - border-top: 1px solid var(--panel-edge); 338 - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; 264 + position: relative; 265 + z-index: 1; 266 + padding: 20px 28px; 267 + margin-bottom: 10px; 268 + background: rgba(255, 255, 255, 0.5); 269 + backdrop-filter: blur(24px) saturate(180%); 270 + -webkit-backdrop-filter: blur(24px) saturate(180%); 271 + border-radius: 14px; 272 + border: 1px solid rgba(255, 255, 255, 0.7); 273 + box-shadow: 274 + 0 1px 0 rgba(255, 255, 255, 0.85) inset, 275 + 0 8px 24px -14px rgba(15, 30, 60, 0.14); 339 276 } 340 - section.panel:first-of-type { border-top: 0; } 277 + section.panel:last-of-type { margin-bottom: 0; } 341 278 342 279 section.panel h3 { 343 280 margin: 0 0 8px; ··· 403 340 404 341 /* Testimonial — quote bubble feel, Tahoe-tinted accent stripe. */ 405 342 section.panel.testimonial { 406 - background: linear-gradient(to bottom, rgba(10, 132, 255, 0.04), rgba(10, 132, 255, 0.015)); 343 + background: 344 + linear-gradient(to bottom, rgba(10, 132, 255, 0.10), rgba(10, 132, 255, 0.04)), 345 + rgba(255, 255, 255, 0.5); 407 346 } 408 347 section.panel.testimonial blockquote { 409 348 margin: 4px 0 10px; ··· 485 424 /* Narrow viewports — tighten paddings, smaller hero. */ 486 425 @media (max-width: 520px) { 487 426 body { padding: 16px 8px 48px; } 488 - .hero { padding: 28px 18px 22px; } 489 - .icon-stage { width: 192px; height: 240px; } 490 - .icon-stage::before { inset: 12px 12px 64px 12px; } 427 + .hero { padding: 24px 18px 20px; border-radius: 14px; } 428 + .icon-stage { width: 192px; height: 192px; } 491 429 .icon-stage img.app-icon { width: 192px; height: 192px; } 492 - .icon-stage img.reflection { top: 192px; width: 192px; height: 48px; } 493 - h2.app-title { font-size: 30px; } 494 - section.panel { padding: 18px 18px; } 430 + h2.app-title { font-size: 40px; } 431 + section.panel { padding: 16px 18px; border-radius: 12px; } 495 432 } 496 433 497 434 /* Honor reduced-motion preference — kill the music drift. */ 498 435 @media (prefers-reduced-motion: reduce) { 499 436 body::before { animation: none; } 500 437 .footer-mark { animation: none; } 501 - .aqua, a, .titlebar h1 a { transition-duration: 1ms; } 438 + .aqua, a { transition-duration: 1ms; } 502 439 } 503 440 504 441 /* ── Dark mode ────────────────────────────────────────────────────────── */ ··· 515 452 --panel-bg: #1c1c1e; 516 453 --panel-stripe: #232325; 517 454 --panel-edge: #2c2c2e; 518 - --titlebar-top: #2c2c2e; 519 - --titlebar-bot: #1f1f21; 520 455 --ink-body: #ebebf0; 521 456 --ink-head: #ffffff; 522 457 --ink-soft: #98989d; ··· 528 463 body { 529 464 color: var(--ink-body); 530 465 } 531 - /* Re-tint the music-drift glyphs so they still read on the dark sky. */ 466 + /* Music-drift glyphs keep their multi-hued fills on the dark sky; 467 + opacity stays modest so the page doesn't get loud at night. */ 532 468 body::before { 533 - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='180' viewBox='0 0 240 180'><g fill='%2379b1ff' opacity='0.10' font-family='Georgia,serif'><text x='10' y='34' font-size='34' transform='rotate(-14 10 34)'>♪</text><text x='80' y='28' font-size='52' transform='rotate(8 80 28)'>♫</text><text x='170' y='44' font-size='22' transform='rotate(-28 170 44)'>♩</text><text x='215' y='80' font-size='40' transform='rotate(18 215 80)'>♬</text><text x='38' y='80' font-size='62' transform='rotate(22 38 80)'>♬</text><text x='118' y='98' font-size='18' transform='rotate(-42 118 98)'>♭</text><text x='195' y='138' font-size='30' transform='rotate(12 195 138)'>♯</text><text x='12' y='148' font-size='28' transform='rotate(-6 12 148)'>♮</text><text x='72' y='162' font-size='44' transform='rotate(28 72 162)'>♩</text><text x='148' y='172' font-size='20' transform='rotate(-18 148 172)'>♪</text><text x='100' y='58' font-size='16' transform='rotate(55 100 58)'>♭</text><text x='160' y='110' font-size='24' transform='rotate(-50 160 110)'>♯</text></g></svg>"); 469 + background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='180' viewBox='0 0 240 180'><g opacity='0.28' font-family='Georgia,serif'><text x='10' y='34' fill='%23ff8a8a' font-size='34' transform='rotate(-14 10 34)'>♪</text><text x='80' y='28' fill='%23ffb964' font-size='52' transform='rotate(8 80 28)'>♫</text><text x='170' y='44' fill='%23ffd757' font-size='22' transform='rotate(-28 170 44)'>♩</text><text x='215' y='80' fill='%2387dd9c' font-size='40' transform='rotate(18 215 80)'>♬</text><text x='38' y='80' fill='%2379b1ff' font-size='62' transform='rotate(22 38 80)'>♬</text><text x='118' y='98' fill='%23bf95ee' font-size='18' transform='rotate(-42 118 98)'>♭</text><text x='195' y='138' fill='%23ff8a8a' font-size='30' transform='rotate(12 195 138)'>♯</text><text x='12' y='148' fill='%23ffb964' font-size='28' transform='rotate(-6 12 148)'>♮</text><text x='72' y='162' fill='%2387dd9c' font-size='44' transform='rotate(28 72 162)'>♩</text><text x='148' y='172' fill='%2379b1ff' font-size='20' transform='rotate(-18 148 172)'>♪</text><text x='100' y='58' fill='%23bf95ee' font-size='16' transform='rotate(55 100 58)'>♭</text><text x='160' y='110' fill='%23ff8a8a' font-size='24' transform='rotate(-50 160 110)'>♯</text></g></svg>"); 534 470 } 535 - .window { 536 - background: #1c1c1e; 471 + .hero, section.panel { 472 + background: rgba(28, 28, 30, 0.55); 473 + border-color: rgba(255, 255, 255, 0.08); 537 474 box-shadow: 538 475 0 1px 0 rgba(255, 255, 255, 0.06) inset, 539 - var(--shadow-card); 540 - } 541 - .titlebar { 542 - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; 543 - } 544 - .titlebar h1 a, .titlebar h1 a:visited { 545 - color: #d0d0d2; 546 - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); 547 - } 548 - .light { 549 - box-shadow: 550 - 0 1px 0 rgba(255, 255, 255, 0.25) inset, 551 - 0 0 0 0.5px rgba(0, 0, 0, 0.5); 552 - } 553 - .icon-stage::before { 554 - background: rgba(40, 50, 70, 0.45); 555 - border: 1px solid rgba(255, 255, 255, 0.08); 556 - box-shadow: 557 - inset 0 1px 0 rgba(255, 255, 255, 0.12), 558 - inset 0 -1px 0 rgba(0, 0, 0, 0.25), 559 - 0 8px 24px -8px rgba(0, 0, 0, 0.5); 560 - } 561 - section.panel { 562 - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; 563 - } 564 - .aqua.alt { 565 - color: #f5f5f7; 566 - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); 567 - background: linear-gradient(to bottom, #4a4a4d 0%, #2c2c2e 100%); 568 - border-color: #1a1a1c; 569 - box-shadow: 570 - 0 1px 0 rgba(255, 255, 255, 0.18) inset, 571 - 0 0 0 0.5px rgba(255, 255, 255, 0.12) inset, 572 - 0 8px 20px -8px rgba(0, 0, 0, 0.55), 573 - 0 1px 2px rgba(0, 0, 0, 0.4); 574 - } 575 - .aqua.alt::after { 576 - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)); 476 + 0 12px 32px -14px rgba(0, 0, 0, 0.55); 577 477 } 578 478 code { 579 479 background: #2c2c2e; ··· 581 481 color: var(--ink-body); 582 482 } 583 483 section.panel.testimonial { 584 - background: linear-gradient(to bottom, rgba(74, 147, 255, 0.07), rgba(74, 147, 255, 0.02)); 484 + background: 485 + linear-gradient(to bottom, rgba(74, 147, 255, 0.14), rgba(74, 147, 255, 0.05)), 486 + rgba(28, 28, 30, 0.55); 585 487 } 586 488 .badge { 587 489 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset; ··· 592 494 <body> 593 495 594 496 <article class="window" aria-label="Menu Band"> 595 - <header class="titlebar" aria-hidden="true"> 596 - <div class="lights"> 597 - <div class="light r"></div> 598 - <div class="light y"></div> 599 - <div class="light g"></div> 600 - </div> 601 - </header> 602 - 603 497 <div class="hero"> 604 498 <div class="icon-stage"> 605 499 <img class="app-icon" src="/menuband/icon.png" alt="Menu Band app icon"> 606 - <img class="reflection" src="/menuband/icon.png" alt="" aria-hidden="true"> 607 500 </div> 608 501 <h2 class="app-title">Menu Band</h2> 609 502 <p class="tagline">Taking macOS instruments out of the Garage and putting them back in the menu, where they belong.</p> ··· 616 509 </div> 617 510 <p class="aux"><a href="https://tangled.org/@aesthetic.computer/core/tree/main/slab/menuband">view source</a> · by <a href="https://aesthetic.computer">aesthetic.computer</a></p> 618 511 </div> 619 - 620 - <div class="pinstripe divider"></div> 621 512 622 513 <section class="panel"> 623 514 <p>A tiny piano lives in the right side of your menu bar. Click the keys, type letters, or pipe notes to your DAW over MIDI — Menu Band publishes a virtual MIDI source named <code>Menu Band</code> that any DAW can pick as input. When nothing's listening, a built-in General MIDI synth covers hundreds of patches.</p>