From 85b6c948f6fa5e49cc4657e7f8dae9f6ffd9b1e0 Mon Sep 17 00:00:00 2001
From: elioat <elioat@tilde.institute>
Date: Wed, 25 Dec 2024 20:39:41 -0500
Subject: *

---
 js/pixel-art/pixel/index.html | 42 +++++++++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 9 deletions(-)

(limited to 'js/pixel-art/pixel/index.html')

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>
-- 
cgit 1.4.1-2-gfad0