public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

fix: move preview-header back to bottom, add spacing beneath

Browse Source
This commit is contained in:
Michael Czechowski
2025-12-30 21:09:46 +01:00
parent 00b0a0f3f8
commit 1cb7aebb42
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/index.html
View File

@@ -69,16 +69,16 @@
<button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button> <button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button>
</div> </div>
<div class="preview-section"> <div class="preview-section">
<div class="preview-header">
<span class="preview-label" data-i18n="yourOutput">Your Output</span>
<button id="show-expected-btn" class="btn btn-small" data-i18n="showExpected">Show Expected</button>
</div>
<div class="preview-wrapper"> <div class="preview-wrapper">
<div class="preview-frame" id="preview-area"></div> <div class="preview-frame" id="preview-area"></div>
<div class="expected-overlay" id="expected-overlay"> <div class="expected-overlay" id="expected-overlay">
<div class="expected-frame" id="preview-expected"></div> <div class="expected-frame" id="preview-expected"></div>
</div> </div>
</div> </div>
<div class="preview-header">
<span class="preview-label" data-i18n="yourOutput">Your Output</span>
<button id="show-expected-btn" class="btn btn-small" data-i18n="showExpected">Show Expected</button>
</div>
</div> </div>
</div> </div>
</main> </main>

4
src/main.css
View File

@@ -496,14 +496,14 @@ code, kbd {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
box-shadow: inset 0 40px 30px -30px rgba(0, 0, 0, 0.08); box-shadow: inset 0 -40px 30px -30px rgba(0, 0, 0, 0.08);
} }
.preview-header { .preview-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: var(--spacing-xs) var(--spacing-md); padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md);
background: transparent; background: transparent;
} }