diff options
| -rw-r--r-- | js/pixel-art/pixel/index.html | 42 |
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> |