diff options
| author | elioat <elioat@tilde.institute> | 2024-12-22 11:10:47 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-12-22 11:10:47 -0500 |
| commit | 204328ef0d73fd0fed75737b780023d8f07fd488 (patch) | |
| tree | 2f60968811032dfa4b2e78d58f5a685410309361 /js/pixel-art/pixel/index.html | |
| parent | 97f98d4f223147ade7f0351ded18136d56c967cb (diff) | |
| download | tour-204328ef0d73fd0fed75737b780023d8f07fd488.tar.gz | |
*
Diffstat (limited to 'js/pixel-art/pixel/index.html')
| -rw-r--r-- | js/pixel-art/pixel/index.html | 48 |
1 files changed, 47 insertions, 1 deletions
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html index 91f1813..610161c 100644 --- a/js/pixel-art/pixel/index.html +++ b/js/pixel-art/pixel/index.html @@ -21,7 +21,7 @@ display: block; } #palette { - position: absolute; + position: fixed; top: 10px; right: 10px; background-color: beige; @@ -29,6 +29,39 @@ border: 1px solid #ccc; border-radius: 5px; width: 150px; + transition: transform 0.3s ease-out; + max-height: 90vh; + overflow-y: auto; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + } + + #palette.hidden { + transform: translateX(calc(100% + 20px)); + } + + #palette-toggle { + position: fixed; + top: 10px; + right: 10px; + background-color: beige; + border: 1px solid #ccc; + border-radius: 5px 0 0 5px; + padding: 10px; + 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); + } + + #palette-toggle:not(.hidden) { + transform: translateX(-170px); } #palette label, @@ -64,10 +97,23 @@ cursor: pointer; margin-right: 5px; } + + @media (max-width: 768px) { + #palette { + top: auto; + bottom: 10px; + } + + #palette-toggle { + top: auto; + bottom: 10px; + } + } </style> </head> <body> <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"> |