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;
 }