Giant refactor to modern-ish interfaceHEADmaster

Completely changes the interface to something more akin to a modern
image editor, with a palette of icons for tools. New icons are in place,
with a tool bar that stays inside the viewport at all times.
Additionally, drawing behavior more closely matches that of The GIMP, et
al in how it handles clicks.

Due to how new I am to Javascript and the relative complexity of
implementing a pixel editor, I may not offer a mobile version at this
time.

1 files changed, 119 insertions, 58 deletions

diff --git a/pixeled.css b/pixeled.css
index 5f02f19..1cef83a 100644
--- a/pixeled.css
+++ b/pixeled.css
@@ -2,36 +2,26 @@ html, body {
 	margin: 0;
 	padding: 0;
 	user-select: none;
-	font-size: 1vmin;
+	font-size: 10px;
 	color: #fff;
 }
 
-button {
-	border: 0;
-	font-size: inherit;
-	font-family: inherit;
-	color: inherit;
-	font-size: 3rem;
-	margin-collapse: collapse;
-	text-shadow: 0 0 3px #000;
+body {
+	overflow: hidden;
 }
 
 #app_area {
 	display: grid;
-	grid-template-areas:
-		"bar editor";
-	grid-template-columns: minmax(50rem,30vw) auto;
 	height: 100vh;
 	width: 100vw;
 }
 
 /* The area behind the grid */
 #workspace {
-	background: #1e3526 linear-gradient(to right, #000000 -7%, transparent 8%);
-	grid-area: editor;
+	background: #1e3526 linear-gradient(to right, #000000 -7%, transparent 8%, transparent 92%, #000000 107%);
 	display: grid;
 	overflow: scroll;
-	grid-template-rows: calc(100% - 7rem) 1fr;
+	z-index: 1;
 }
 
 /* the canvas we're drawing on in the app */
@@ -43,7 +33,7 @@ button {
 	background: #888;
 	aspect-ratio: 1;
 	box-shadow: 0 0 3.2rem #000;
-	z-index: 1;
+	z-index: 10;
 	height: 75vmin;
 	align-self: center;
 	justify-self: center;
@@ -61,93 +51,164 @@ button {
 	border-collapse: collapse;
 }
 
-#grid_caption {
-	align-self: center;
-	justify-self: center;
-	font-size: 4rem;
-}
-
 #toolbox {
-	grid-area: bar;
-	background: #00762a;
-	border-right: 3px solid #0b3a1d;
+	background: #00000088;
+	border: 1px solid #000;
+	border-radius: 8px;
 	display: grid;
 	box-sizing: border-box;
-	padding: 0 1em 1em 1em;
-	font-size: 3rem;
+	box-shadow: 0 0 16px #000;
+	padding: 6px;
+	font-size: 14px;
 	font-family: "PT Mono", "Envy Code R", "Liberation Mono", "DejaVu Sans", monospace;
 	font-weight: bold;
-	z-index: 2;
-	gap: 2rem;
-	grid-template-rows: 10vh 15vh 20vh 1fr 1fr 1fr 1fr 1fr;
+	position: absolute;
+	z-index: 20;
+	gap: 8px;
+	grid-template-rows: 26px 1fr 60px;
+	top: 16px;
+	left: 16px;
+	width: 184px;
 }
 
 #toolbox > header {
 	margin: 0;
 	padding: 0;
-	font-size: 3em;
+	font-size: 1.3em;
 	text-align: center;
 	text-shadow: 0 0 3px #000;
-	align-self: center;
-	justify-self: center;
+	line-height: 26px;
 }
 
-#color_picker {
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
+#tool_palette {
+	display: flex;
+	flex-flow: row wrap;
+	gap: 3px;
 }
 
-#color_picker > div {
+#tool_palette div {
+	background: url("./ui/green-button.png") no-repeat top left transparent;
 	display: grid;
-	grid-template-rows: 70% 30%;
 	text-align: center;
 	font-weight: bold;
 	font-size: 1.3em;
+	image-rendering: crisp-edges;
+	flex-basis: 40px;
+	height: 48px;
+}
+
+#tool_palette div:hover {
+	background-image: url("./ui/cyan-button.png");
+}
+
+#tool_palette > div.selected {
+	background: url("./ui/green-button-pressed.png") no-repeat top left;
+	image-rendering: crisp-edges;
+}
+
+#tool_palette > div.active {
+	background: url("./ui/yellow-button-pressed.png") no-repeat top left;
+	image-rendering: crisp-edges;
 }
 
-#color_picker > div.selected {
-	background: rgba(255,255,255, 0.4);
+#tool_palette div.selected .swatch,
+#tool_palette div.active .swatch {
+	margin-top: 9px;
 }
 
-#color_picker > div > .swatch {
+#tool_palette > div > .swatch {
 	aspect-ratio: 1;
-	margin: 0.4em auto 0.2em auto;
+	margin: 4px auto 0 auto;
 	display: block;
-	height: 4rem;
+	width: 32px;
+	height: 32px;
 }
 
 #black_pick > .swatch {
-	background: #000;
+	background: url("./ui/black-pen.png") no-repeat center center;
+	background-size: contain;
+	image-rendering: crisp-edges;
 }
 
 #white_pick > .swatch {
-	background: #fff;
+	background: url("./ui/eraser.png") no-repeat center center;
+	background-size: contain;
+	image-rendering: crisp-edges;
 }
 
 #custom_pick > .swatch {
+	mask: url("./ui/custom-color-mask.png") no-repeat center center;
+	mask-size: contain;
+	border: 0;
+	padding: 0;
 }
 
-#canvas_opts {
-	display: grid;
-	grid-template-rows: 2.5rem 1fr 1fr;
+#custom_color::-moz-color-swatch {
+	background: url("./ui/custom-color.png") no-repeat center center;
+	background-size: contain;
+	image-rendering: crisp-edges;
+	border: 0;
+	margin: 0;
+	padding: 0;
+}
+
+#rainbow > .swatch {
+	background: url("./ui/rainbow-pen.png") no-repeat center center;
+	background-size: contain;
+	image-rendering: crisp-edges;
+}
+
+#darken > .swatch {
+	background: url("./ui/darken-tool.png") no-repeat center center;
+	background-size: contain;
+	image-rendering: crisp-edges;
+}
+
+#lighten > .swatch {
+	background: url("./ui/lighten-tool.png") no-repeat center center;
+	background-size: contain;
+	image-rendering: crisp-edges;
+}
+
+#clear_canvas > .swatch {
+	background: url("./ui/blank-canvas.png") no-repeat center center;
+	background-size: contain;
+	image-rendering: crisp-edges;
+}
+
+#grid_toggle > .swatch {
+	background: url("./ui/grid-toggle.png") no-repeat center center;
+	background-size: contain;
+	image-rendering: crisp-edges;
 }
 
-#rainbow {
-	background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-	border: 2px solid rgba(0,0,0,0.4);
+#canvas_opts {
+	display: grid;
+	grid-template-areas:
+		"lbl lbl"
+		"num slider"
+	;
+	grid-template-columns: 2.5em auto;
+	gap: 0 4px;
 }
 
-#darken {
-	background: #0b3a1d;
+#canvas_opts > label {
+	grid-area: lbl;
 }
 
-#lighten {
-	background: #20964a;
+#canvas_opts input[type=range] {
+	grid-area: slider;
+	width: 100%;
 }
 
-button.selected {
-	border: 4px solid #fff !important;
+#canvas_opts input[type=text] {
+	grid-area: num;
+	text-align: center;
+	background: #fff8;
+	border: 0;
+	border-radius: 5px;
 }
 
-#btn_overlay {
+#canvas_opts input[type=text]:focus {
+	border: 1px solid #fff;
 }