Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix iOS FAQ modal, host font locally, cleanup

Browse Source 
- Fix FAQ modal scrolling/sizing on iOS with max-height and flexbox
- Host Press Start 2P font locally to avoid content blocker issues
- Remove FAQ button from top bar (keep footer button)
- Shorten MIDI selection tips text

🤖 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 13:36:15 +00:00
parent aa5eaa4453
commit 79601a78ba
4 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+19 -16
View File
@@ -23,12 +23,16 @@
<!-- General Meta --> <!-- General Meta -->
<meta name="description" content="WARIO SYNTH - Transform any song into retro Gameboy-style game console music. Search, preview MIDI, and generate chiptune versions."> <meta name="description" content="WARIO SYNTH - Transform any song into retro Gameboy-style game console music. Search, preview MIDI, and generate chiptune versions.">
<!-- Pixel Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style> <style>
/* Local Pixel Font */
@font-face {
font-family: 'Press Start 2P';
src: url('/fonts/PressStart2P.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Design System: Game Boy DMG - Authentic light LCD look */ /* Design System: Game Boy DMG - Authentic light LCD look */
:root { :root {
/* Game Boy palette - light mode (authentic LCD) */ /* Game Boy palette - light mode (authentic LCD) */
@@ -131,11 +135,6 @@
background: #fff; background: #fff;
color: var(--gb-darkest); color: var(--gb-darkest);
} }
.faq-top {
position: absolute;
top: calc(var(--spacing-unit) * 2);
right: calc(var(--spacing-unit) * 2);
}
/* FAQ modal - Game Boy style */ /* FAQ modal - Game Boy style */
.modal-backdrop { .modal-backdrop {
@@ -151,9 +150,13 @@
.modal-backdrop.open { display: flex; } .modal-backdrop.open { display: flex; }
.modal { .modal {
width: min(720px, 100%); width: min(720px, 100%);
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
background: var(--color-surface); background: var(--color-surface);
border: var(--pixel-border) solid var(--gb-dark); border: var(--pixel-border) solid var(--gb-dark);
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
} }
.modal header { .modal header {
display: flex; display: flex;
@@ -162,6 +165,8 @@
padding: 14px 16px; padding: 14px 16px;
border-bottom: 2px solid var(--gb-dark); border-bottom: 2px solid var(--gb-dark);
background: var(--gb-dark); background: var(--gb-dark);
flex-shrink: 0;
flex-wrap: wrap;
} }
.modal header h3 { .modal header h3 {
margin: 0; margin: 0;
@@ -231,6 +236,9 @@
.modal main { .modal main {
padding: 16px; padding: 16px;
background: var(--gb-lightest); background: var(--gb-lightest);
overflow-y: auto;
flex: 1;
-webkit-overflow-scrolling: touch;
} }
.faq-grid { .faq-grid {
display: grid; display: grid;
@@ -1058,7 +1066,6 @@
<body> <body>
<div class="container"> <div class="container">
<div class="hero"> <div class="hero">
<button id="faqBtn" class="faq-link faq-top" type="button">FAQ</button>
<h1>WARIO SYNTH</h1> <h1>WARIO SYNTH</h1>
<p class="tagline"><strong>Turn any song into retro game console music</strong></p> <p class="tagline"><strong>Turn any song into retro game console music</strong></p>
</div> </div>
@@ -1072,11 +1079,7 @@
<div id="resultsSection" class="results-section"> <div id="resultsSection" class="results-section">
<div id="chooseHelper" class="chooser-helper" style="display:none;"> <div id="chooseHelper" class="chooser-helper" style="display:none;">
<h4>Choosing a MIDI source</h4> <p>Pick a source and generate. If it sounds off, try another.</p>
<p>
Different MIDI files capture songs differently. Some will produce better results than others.<br />
Pick a source, generate, and if it sounds off, try another.
</p>
</div> </div>
<div class="results-header"> <div class="results-header">
play.html
+9 -5
View File
@@ -21,12 +21,16 @@
<meta name="twitter:description" content="Tap to play this Gameboy tune" /> <meta name="twitter:description" content="Tap to play this Gameboy tune" />
<meta name="twitter:image" content="https://motif-self.vercel.app/wario-sprite.png" /> <meta name="twitter:image" content="https://motif-self.vercel.app/wario-sprite.png" />
<!-- Pixel Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style> <style>
/* Local Pixel Font */
@font-face {
font-family: 'Press Start 2P';
src: url('/fonts/PressStart2P.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root { :root {
/* Game Boy palette - light mode (authentic LCD) */ /* Game Boy palette - light mode (authentic LCD) */
--gb-lightest: #E0E8C8; /* Screen background */ --gb-lightest: #E0E8C8; /* Screen background */
public/fonts/PressStart2P.woff2
BIN
View File
Binary file not shown.
src/main.ts
-3
View File
@@ -68,7 +68,6 @@ class MotifApp {
private copyToast: HTMLElement | null = null; private copyToast: HTMLElement | null = null;
// FAQ modal // FAQ modal
private faqBtn!: HTMLButtonElement;
private faqBtnFooter: HTMLButtonElement | null = null; private faqBtnFooter: HTMLButtonElement | null = null;
private newSearchBtn: HTMLButtonElement | null = null; private newSearchBtn: HTMLButtonElement | null = null;
private faqBackdrop!: HTMLElement; private faqBackdrop!: HTMLElement;
@@ -151,7 +150,6 @@ class MotifApp {
this.copyToast = document.getElementById('copyToast'); this.copyToast = document.getElementById('copyToast');
// FAQ modal // FAQ modal
this.faqBtn = document.getElementById('faqBtn') as HTMLButtonElement;
this.faqBtnFooter = document.getElementById('faqBtnFooter') as HTMLButtonElement | null; this.faqBtnFooter = document.getElementById('faqBtnFooter') as HTMLButtonElement | null;
this.newSearchBtn = document.getElementById('newSearchBtn') as HTMLButtonElement | null; this.newSearchBtn = document.getElementById('newSearchBtn') as HTMLButtonElement | null;
this.faqBackdrop = document.getElementById('faqModalBackdrop')!; this.faqBackdrop = document.getElementById('faqModalBackdrop')!;
@@ -196,7 +194,6 @@ class MotifApp {
this.enableAudioBtn.addEventListener('touchend', enable, { passive: true }); this.enableAudioBtn.addEventListener('touchend', enable, { passive: true });
// FAQ // FAQ
this.faqBtn.addEventListener('click', () => this.openFaq());
this.faqBtnFooter?.addEventListener('click', () => this.openFaq()); this.faqBtnFooter?.addEventListener('click', () => this.openFaq());
this.newSearchBtn?.addEventListener('click', () => this.resetToNewSearch()); this.newSearchBtn?.addEventListener('click', () => this.resetToNewSearch());
this.faqCloseBtn.addEventListener('click', () => this.closeFaq()); this.faqCloseBtn.addEventListener('click', () => this.closeFaq());