diff options
| author | elioat <elioat@tilde.institute> | 2024-12-22 11:26:27 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-12-22 11:26:27 -0500 |
| commit | 963b95ae7696d61065362a707621ddfa5248dd7c (patch) | |
| tree | 1094f38f400fb2e3ca889e9b17aafc4e1cae2c39 | |
| parent | 5f170cb9bc24c3c2456538d433ffe59e90124f48 (diff) | |
| download | tour-963b95ae7696d61065362a707621ddfa5248dd7c.tar.gz | |
*
| -rw-r--r-- | js/pixel-art/pixel/index.html | 128 |
1 files changed, 62 insertions, 66 deletions
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html index 68d754f..af14d17 100644 --- a/js/pixel-art/pixel/index.html +++ b/js/pixel-art/pixel/index.html @@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Pixel Pixel Pixel Pixel Pixel Pixel</title> <meta name="description" content="Draw me a goblin, please."> <style> @@ -13,143 +13,133 @@ background-color: teal; } button { - padding: 4px 10px; - font-size: 16px; + padding: 0.5rem 0.75rem; + font-size: 1rem; cursor: pointer; + min-height: 2.75rem; } #canvas { display: block; } #palette { position: fixed; - top: 10px; - right: 10px; + top: 0.625rem; + right: 0.625rem; background-color: beige; - padding: 10px; + padding: 0.625rem; border: 1px solid #ccc; - border-radius: 5px; - width: 150px; + border-radius: 0.3125rem; + width: 10.625rem; transition: transform 0.3s ease-out; max-height: 90vh; overflow-y: auto; - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; + -ms-overflow-style: none; + box-sizing: border-box; } #palette.hidden { - transform: translateX(calc(100% + 20px)); + transform: translateX(calc(100% + 1.25rem)); } #palette-toggle { position: fixed; - top: 10px; - right: 10px; + top: 0.625rem; + right: 0.625rem; background-color: beige; border: 1px solid #ccc; - border-radius: 5px 0 0 5px; - padding: 10px; + border-radius: 0.3125rem 0 0 0.3125rem; + padding: 0.75rem; cursor: pointer; z-index: 1000; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; - } - - #palette-toggle.hidden { - transform: translateX(0); + min-width: 2.75rem; + min-height: 2.75rem; + font-size: 1.125rem; } #palette-toggle:not(.hidden) { - transform: translateX(-170px); + transform: translateX(-10.625rem); } #palette label, #palette input, #palette button { display: block; - margin-bottom: 10px; + margin-bottom: 0.75rem; width: 100%; } .color-history { display: flex; flex-wrap: wrap; + margin-top: 0.625rem; } .color-history div { - width: 20px; - height: 20px; - border: 1px solid #000; - cursor: pointer; - margin-right: 5px; - margin-bottom: 5px; - } - - .color-history { - display: flex; - margin-top: 10px; - } - .color-history div { - width: 20px; - height: 20px; + width: 1.25rem; + height: 1.25rem; border: 1px solid #000; cursor: pointer; - margin-right: 5px; - } - - @media (max-width: 768px) { - #palette { - top: auto; - bottom: 10px; - } - - #palette-toggle { - top: auto; - bottom: 10px; - } + margin-right: 0.3125rem; + margin-bottom: 0.3125rem; } .zoom-controls { display: flex; - gap: 5px; - margin-top: 10px; + gap: 0.3125rem; + margin-top: 0.625rem; } .zoom-controls button { flex: 1; - padding: 4px; + padding: 0.5rem; + min-height: 2.75rem; + font-size: 1.125rem; } .pan-controls { display: flex; flex-direction: column; - gap: 5px; - margin-top: 10px; + gap: 0.3125rem; + margin-top: 0.625rem; align-items: center; } .pan-middle { display: flex; - gap: 5px; + gap: 0.3125rem; width: 100%; } .pan-controls button { - padding: 8px; - width: 40px; - height: 40px; + padding: 0.5rem; + width: 2.75rem; + height: 2.75rem; display: flex; align-items: center; justify-content: center; + font-size: 1.125rem; } - .pan-middle button { - flex: 1; + #centerViewBtn { + margin-top: 0.625rem; } - #centerViewBtn { - margin-top: 10px; + @media (max-width: 48rem) { /* 768px */ + #palette { + width: 12.5rem; + top: auto; + bottom: 0.625rem; + } + + #palette-toggle { + top: auto; + bottom: 0.625rem; + } } </style> </head> @@ -157,10 +147,16 @@ <canvas id="canvas"></canvas> <button id="palette-toggle">☰</button> <div id="palette"> - <label for="gridWidth">Grid Width:</label> - <input type="number" id="gridWidth" value="16" min="1"> - <label for="gridHeight">Grid Height:</label> - <input type="number" id="gridHeight" value="16" min="1"> + <div style="display: flex; gap: 5px; margin-bottom: 10px;"> + <div style="flex: 1;"> + <label for="gridWidth">W:</label> + <input type="number" id="gridWidth" value="16" min="1" style="width: 90%;"> + </div> + <div style="flex: 1;"> + <label for="gridHeight">H:</label> + <input type="number" id="gridHeight" value="16" min="1" style="width: 90%;"> + </div> + </div> <br> <label for="colorPicker">Select Color:</label> <input type="color" id="colorPicker" value="#000000"> |