1 files changed, 33 insertions, 9 deletions
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html
index 3d48f5e..7e3df56 100644
--- a/js/pixel-art/pixel/index.html
+++ b/js/pixel-art/pixel/index.html
@@ -12,15 +12,31 @@
overflow: hidden;
background-color: teal;
}
+
button {
padding: 0.5rem 0.75rem;
font-size: 1rem;
cursor: pointer;
min-height: 2.75rem;
}
+
+ button.reset-btn {
+ cursor: pointer;
+ margin: 0;
+ padding: 0.25rem 0.5rem;
+ border: none;
+ background-color: tomato;
+ color: #fafafa;
+ min-height: 2rem;
+ font-size: 0.875rem;
+ border-radius: 0.25rem;
+ margin-top: 0.5rem;
+ }
+
#canvas {
display: block;
}
+
#palette {
position: fixed;
top: 0.625rem;
@@ -91,13 +107,20 @@
display: flex;
gap: 0.3125rem;
margin-top: 0.625rem;
+ justify-content: space-between;
+ width: 100%;
}
.zoom-controls button {
flex: 1;
- padding: 0.5rem;
- min-height: 2.75rem;
- font-size: 1.125rem;
+ padding: 0.25rem;
+ height: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1rem;
+ min-height: unset;
+ width: unset;
}
.pan-controls {
@@ -115,20 +138,21 @@
}
.pan-controls button {
- padding: 0.5rem;
- width: 2.75rem;
- height: 2.75rem;
+ padding: 0.25rem;
+ width: 2rem;
+ height: 2rem;
display: flex;
align-items: center;
justify-content: center;
- font-size: 1.125rem;
+ font-size: 1rem;
+ min-height: unset;
}
#centerViewBtn {
margin-top: 0.625rem;
}
- @media (max-width: 48rem) { /* 768px */
+ @media (max-width: 48rem) {
#palette {
width: 12.5rem;
top: auto;
@@ -182,7 +206,7 @@
<button id="exportBtn">Export as PNG</button>
<button id="saveProjectBtn">Save Project</button>
<button id="loadProjectBtn">Load Project</button>
- <button id="resetBtn">Reset</button>
+ <button id="resetBtn" class="reset-btn">Reset</button>
</div>
<script src="app.js"></script>
</body>
|