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: add uniform AC corner label

Mirrors the pattern from aesthetic-direct.html so the page is consistent
with the rest of AC's html-rendered paths. Uses Berkeley Mono in the
top-left, fading from --aqua-sky-top to transparent so it stays legible
over the music drift, and clicking returns the visitor to /
(or aesthetic.computer when viewing from another host).

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

prompt.ac/@jeffrey 36c4cc05 841523ec

+48
+48
system/public/menuband/index.html
··· 107 107 /* Anything that should sit ABOVE the music drift. */ 108 108 .window, footer { position: relative; z-index: 1; } 109 109 110 + /* Uniform AC corner label — same shape as aesthetic-direct.html. 111 + Click to return to aesthetic.computer/. */ 112 + #corner-label { 113 + font-family: "Berkeley Mono Variable", "SF Mono", Menlo, monospace; 114 + font-weight: normal; 115 + font-size: 18px; 116 + margin: 0; 117 + position: fixed; 118 + top: 12px; 119 + left: 16px; 120 + z-index: 3; 121 + cursor: pointer; 122 + user-select: none; 123 + color: var(--ink-head); 124 + letter-spacing: 0.02em; 125 + } 126 + #corner-label:hover { color: purple; } 127 + #corner-label:active { color: gray; } 128 + #corner-label::before { 129 + content: ""; 130 + height: 3em; 131 + width: 100vw; 132 + position: absolute; 133 + z-index: -1; 134 + top: -12px; 135 + left: -16px; 136 + background: linear-gradient(to bottom, 137 + var(--aqua-sky-top) 50%, 138 + transparent 100%); 139 + } 140 + 110 141 /* Container is just for centering — no chrome, no white plate. The 111 142 hero and panels each become their own floating glass card, with 112 143 gaps that let the music notes peek through. */ ··· 493 524 </head> 494 525 <body> 495 526 527 + <h1 id="corner-label">menuband</h1> 528 + 496 529 <article class="window" aria-label="Menu Band"> 497 530 <div class="hero"> 498 531 <div class="icon-stage"> ··· 554 587 </footer> 555 588 556 589 <script> 590 + // Corner label click — return to aesthetic.computer/. Mirrors the 591 + // pattern from aesthetic-direct.html so behavior is uniform across 592 + // AC's html-rendered corner-label paths. 593 + (function cornerLabel() { 594 + const el = document.getElementById('corner-label'); 595 + if (!el) return; 596 + el.addEventListener('click', () => { 597 + if (location.host === 'aesthetic.computer' || location.host === 'www.aesthetic.computer') { 598 + location.href = '/'; 599 + } else { 600 + location.href = 'https://aesthetic.computer'; 601 + } 602 + }); 603 + })(); 604 + 557 605 // ── Live reload via /api/version long-poll. Same mechanism prompt.mjs 558 606 // uses: ask the server for the deployed commit hash, then long-poll 559 607 // with ?current=<hash>. The server holds the connection ~4s when the