Fix pause/play audio muting + tidy share page UX

- Fix SynthesisEngine to not cleanup layers on stop, preventing
  audio from going silent after pause/resume
- Remove "Reimagined as classic game-console music" line
- Remove procedural playback meta block
- Move "Generate your own" CTA inside player card
- Update footer with Birdmania credit and Twitter link

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
b1rdmania
2025-12-29 11:00:27 +00:00
parent 028310ec28
commit 9d38a9a83a
2 changed files with 45 additions and 52 deletions
+9 -35
View File
@@ -126,12 +126,6 @@
color: var(--gb-light);
}
/* Transform description */
.transform-line {
margin: 0 0 calc(var(--spacing-unit) * 3) 0;
color: var(--gb-light);
font-size: 8px;
}
/* Buttons */
button {
@@ -272,29 +266,20 @@
width: 0%;
}
/* Meta block */
.meta-block {
/* CTA link (inside card) */
.cta-link-inline {
margin-top: calc(var(--spacing-unit) * 2);
padding-top: calc(var(--spacing-unit) * 2);
border-top: 2px solid var(--gb-darkest);
font-size: 8px;
color: var(--gb-light);
line-height: 2.2;
}
/* CTA link */
.cta-link {
display: block;
margin-top: calc(var(--spacing-unit) * 3);
text-align: center;
}
.cta-link a {
.cta-link-inline a {
display: inline-block;
color: var(--gb-lightest);
text-decoration: none;
font-size: 10px;
padding: 12px 16px;
padding: 12px 20px;
border: var(--pixel-border) solid var(--gb-light);
background: var(--gb-dark);
box-shadow:
@@ -302,7 +287,7 @@
inset 4px 4px 0 var(--gb-light);
}
.cta-link a:hover {
.cta-link-inline a:hover {
background: var(--gb-light);
color: var(--gb-darkest);
box-shadow:
@@ -335,11 +320,6 @@
<h2 id="songTitle" class="song-title">Loading...</h2>
<div id="songArtist" class="song-artist"></div>
<!-- Transformation Description -->
<p id="transformLine" class="transform-line">
Reimagined as classic game-console music
</p>
<!-- Play/Pause Control -->
<div class="play-container">
<button id="playToggleBtn" class="primary" disabled>
@@ -359,20 +339,14 @@
</div>
</div>
<!-- Metadata -->
<div class="meta-block" id="metaBlock">
Procedural playback from MIDI structure.<br />
Rendered using the Wario Synthesis Engine.
<!-- CTA -->
<div class="cta-link-inline">
<a id="generateOwn" href="/">Generate your own</a>
</div>
</div>
<!-- CTA -->
<div class="cta-link">
<a id="generateOwn" href="/">Generate your own</a>
</div>
<div class="footer">
<a href="/">WARIO SYNTH</a> — Turn any song into retro game console music
Wario's Synthesis Engine — created by <a href="https://x.com/b1rdmania" target="_blank" rel="noopener">Birdmania</a>
</div>
</div>