christian/c64-basic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Center controls below the emulator

Browse source
This commit is contained in:
Christian Johannesen 2026-10-16 02:04:18 +02:00
parent b247b859e3
commit ac2fc5ff65
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/index.html
View file

@ -60,13 +60,13 @@
<a class="secondary button" href="/">Back to library</a> <a class="secondary button" href="/">Back to library</a>
</div> </div>
<p id="program-description" class="program-page-description"></p> <p id="program-description" class="program-page-description"></p>
<p class="hint">Click inside the emulator to enable keyboard input and sound.</p>
<div id="game"></div>
<p id="emulator-error" class="error" hidden></p>
<section class="instructions-panel" aria-labelledby="instructions-title"> <section class="instructions-panel" aria-labelledby="instructions-title">
<h2 id="instructions-title">Controls</h2> <h2 id="instructions-title">Controls</h2>
<div id="program-controls" class="control-list"></div> <div id="program-controls" class="control-list"></div>
</section> </section>
<p class="hint">Click inside the emulator to enable keyboard input and sound.</p>
<div id="game"></div>
<p id="emulator-error" class="error" hidden></p>
</section> </section>
</main> </main>
<dialog id="source-modal" class="source-modal"> <dialog id="source-modal" class="source-modal">

2
public/styles.css
View file

@ -69,7 +69,7 @@ button:disabled { opacity: .5; cursor: wait; }
.player-heading h1 { font-size: clamp(1.8rem, 5vw, 3rem); } .player-heading h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
.program-badges { margin-top: .85rem; } .program-badges { margin-top: .85rem; }
.program-page-description { max-width: 760px; margin: 1.5rem 0 0; color: #d2cef0; font-size: 1.08rem; line-height: 1.6; } .program-page-description { max-width: 760px; margin: 1.5rem 0 0; color: #d2cef0; font-size: 1.08rem; line-height: 1.6; }
.instructions-panel { max-width: 760px; margin-top: 1.5rem; padding: 1.1rem 1.25rem; border: 1px solid #b8b1e738; border-radius: 12px; background: #211a59d9; } .instructions-panel { max-width: 760px; margin: 1.5rem auto 0; padding: 1.1rem 1.25rem; border: 1px solid #b8b1e738; border-radius: 12px; background: #211a59d9; }
.instructions-panel h2 { margin: 0 0 .85rem; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; } .instructions-panel h2 { margin: 0 0 .85rem; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.control-list { display: grid; gap: .7rem; } .control-list { display: grid; gap: .7rem; }
.control-row { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 1rem; align-items: center; color: #d2cef0; } .control-row { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 1rem; align-items: center; color: #d2cef0; }