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: thinner window, wackier note pattern, GarageBand-dig tagline

- New tagline carries the dig at GarageBand
- Merge 'What it does' + 'About' into a single plain section (no h3)
- Demote 'View source' from a button to a small caption beneath Download
- Narrow .window + footer max-width from 720px → 520px
- Rebalance the vibrancy plate inset (28/18/64/18) so it sits at the icon's
bottom edge instead of floating above it
- 12-glyph note pattern with varied sizes + rotations, both color schemes
- Drop unused .aqua.alt CSS now that the only consumer is gone

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

prompt.ac/@jeffrey 84180b2d 21c34f5d

+21 -40
+21 -40
system/public/menuband/index.html
··· 98 98 inset: -120px; /* overscan so panning never reveals an edge */ 99 99 pointer-events: none; 100 100 z-index: 0; 101 - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150'><g fill='%231f5aa8' opacity='0.085' font-family='Georgia,serif'><text x='15' y='38' font-size='30'>♪</text><text x='100' y='32' font-size='34'>♫</text><text x='55' y='90' font-size='28'>♩</text><text x='140' y='105' font-size='32'>♬</text><text x='20' y='130' font-size='22'>♭</text><text x='160' y='55' font-size='20'>♯</text></g></svg>"); 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>"); 102 102 background-repeat: repeat; 103 103 animation: drift-music 90s linear infinite; 104 104 } ··· 111 111 .window, footer { position: relative; z-index: 1; } 112 112 113 113 .window { 114 - max-width: 720px; 114 + max-width: 520px; 115 115 margin: 0 auto; 116 116 background: #fff; 117 117 border-radius: 8px 8px 6px 6px; ··· 193 193 .icon-stage::before { 194 194 content: ""; 195 195 position: absolute; 196 - inset: 18px 18px 80px 18px; 196 + inset: 28px 18px 64px 18px; 197 197 background: rgba(255, 255, 255, 0.5); 198 198 backdrop-filter: blur(40px) saturate(180%); 199 199 -webkit-backdrop-filter: blur(40px) saturate(180%); ··· 259 259 margin-top: 4px; 260 260 } 261 261 262 + /* Demoted caption beneath the download button — links read as plain 263 + text, not as buttons. */ 264 + p.aux { 265 + margin: 14px auto 0; 266 + font-family: "Berkeley Mono Variable", "SF Mono", Menlo, monospace; 267 + font-size: 11px; 268 + letter-spacing: 0.04em; 269 + color: var(--ink-soft); 270 + text-align: center; 271 + } 272 + p.aux a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: rgba(90, 95, 102, 0.35); text-underline-offset: 2px; } 273 + p.aux a:hover { color: var(--tahoe-blue); text-decoration-color: currentColor; } 274 + 262 275 .aqua { 263 276 display: inline-flex; 264 277 align-items: center; ··· 315 328 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); 316 329 } 317 330 318 - /* Secondary (white gel). */ 319 - .aqua.alt { 320 - color: #1a1a1a; 321 - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); 322 - background: linear-gradient(to bottom, #ffffff 0%, #d8dde3 100%); 323 - border-color: #a8b0b8; 324 - box-shadow: 325 - 0 1px 0 rgba(255, 255, 255, 0.95) inset, 326 - 0 0 0 0.5px rgba(255, 255, 255, 0.65) inset, 327 - 0 8px 20px -8px rgba(20, 30, 50, 0.18), 328 - 0 1px 2px rgba(20, 30, 50, 0.10); 329 - } 330 - .aqua.alt::after { 331 - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); 332 - } 333 - .aqua.alt:hover { 334 - box-shadow: 335 - 0 1px 0 rgba(255, 255, 255, 0.95) inset, 336 - 0 0 0 0.5px rgba(255, 255, 255, 0.65) inset, 337 - 0 12px 28px -8px rgba(20, 30, 50, 0.25), 338 - 0 2px 4px rgba(20, 30, 50, 0.13); 339 - } 340 - 341 331 /* ── Body sections ────────────────────────────────────────────────────── */ 342 332 343 333 .divider { height: 14px; } ··· 445 435 446 436 footer { 447 437 margin: 28px auto 0; 448 - max-width: 720px; 438 + max-width: 520px; 449 439 text-align: center; 450 440 padding: 24px 16px 12px; 451 441 } ··· 540 530 } 541 531 /* Re-tint the music-drift glyphs so they still read on the dark sky. */ 542 532 body::before { 543 - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150'><g fill='%2379b1ff' opacity='0.08' font-family='Georgia,serif'><text x='15' y='38' font-size='30'>♪</text><text x='100' y='32' font-size='34'>♫</text><text x='55' y='90' font-size='28'>♩</text><text x='140' y='105' font-size='32'>♬</text><text x='20' y='130' font-size='22'>♭</text><text x='160' y='55' font-size='20'>♯</text></g></svg>"); 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>"); 544 534 } 545 535 .window { 546 536 background: #1c1c1e; ··· 616 606 <img class="reflection" src="/menuband/icon.png" alt="" aria-hidden="true"> 617 607 </div> 618 608 <h2 class="app-title">Menu Band</h2> 619 - <p class="tagline">Built-in macOS instruments, in the menu bar.</p> 609 + <p class="tagline">Taking macOS instruments out of the Garage and putting them back in the menu, where they belong.</p> 620 610 621 611 <div class="button-row"> 622 612 <a class="aqua" href="https://assets.aesthetic.computer/menuband/Menu-Band-0.3.dmg" download> 623 613 Download 624 614 <small>0.3 · Apple Silicon · 1.2 MB</small> 625 615 </a> 626 - <a class="aqua alt" href="https://tangled.org/@aesthetic.computer/core/tree/main/slab/menuband"> 627 - View source 628 - </a> 629 616 </div> 617 + <p class="aux">free + open source · <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> 630 618 </div> 631 619 632 620 <div class="pinstripe divider"></div> 633 621 634 622 <section class="panel"> 635 - <h3>What it does</h3> 636 - <p>A tiny piano in your menu bar. Click keys, type letters, or send to your DAW over MIDI.</p> 637 - <p>Publishes a virtual MIDI source named <code>Menu Band</code>. Built-in General MIDI synth when no DAW is listening.</p> 638 - </section> 639 - 640 - <section class="panel"> 641 - <h3>About</h3> 642 - <p>Free and open source. By <a href="https://aesthetic.computer">aesthetic.computer</a>.</p> 623 + <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> 643 624 </section> 644 625 645 626 <section class="panel testimonial">