Initial commit

This pixel editor is a sort of 'proof of concept' for a Javascript app.
It has support for three primary colors (black, white, custom), a darken
and lighten tool, a rainbow tool, and you can right click to capture a
color in the custom color box. Quite handy for simple little doodles.

Future work will be done mostly in the CSS for the UI layout.

1 files changed, 147 insertions, 0 deletions

diff --git a/pixeled.css b/pixeled.css
new file mode 100644
index 0000000..6e2da15
--- /dev/null
+++ b/pixeled.css
@@ -0,0 +1,147 @@
+html, body {
+	margin: 0;
+	padding: 0;
+	user-select: none;
+	font-size: 1vmin;
+	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;
+}
+
+#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;
+	display: grid;
+	overflow: scroll;
+	grid-template-rows: calc(100% - 7rem) 1fr;
+}
+
+/* the canvas we're drawing on in the app */
+#grid_container {
+	display: grid;
+	grid-template-columns: repeat(16, 1fr);
+	border: 6px solid #000;
+	/* gap: 1px; */
+	background: #888;
+	aspect-ratio: 1;
+	box-shadow: 0 0 3.2rem #000;
+	z-index: 1;
+	height: 75vmin;
+	align-self: center;
+	justify-self: center;
+}
+
+/* 'pixels' on the canvas itself */
+#grid_container > div {
+	background: white;
+	aspect-ratio: 1;
+	border-bottom: 1px solid #888;
+	border-right: 1px solid #888;
+	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;
+	display: grid;
+	box-sizing: border-box;
+	padding: 0 1em 1em 1em;
+	font-size: 3rem;
+	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
+}
+
+#toolbox > header {
+	margin: 0;
+	padding: 0;
+	font-size: 3em;
+	text-align: center;
+	text-shadow: 0 0 3px #000;
+	align-self: center;
+	justify-self: center;
+}
+
+#color_picker {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+}
+
+#color_picker > div {
+	display: grid;
+	grid-template-rows: 70% 30%;
+	text-align: center;
+	font-weight: bold;
+	font-size: 1.3em;
+}
+
+#color_picker > div.selected {
+	background: rgba(255,255,255, 0.4);
+}
+
+#color_picker > div > .swatch {
+	aspect-ratio: 1;
+	margin: 0.4em auto 0.2em auto;
+	display: block;
+	height: 4rem;
+}
+
+#black_pick > .swatch {
+	background: #000;
+}
+
+#white_pick > .swatch {
+	background: #fff;
+}
+
+#custom_pick > .swatch {
+}
+
+#canvas_opts {
+	display: grid;
+	grid-template-rows: 2.5rem 1fr 1fr;
+}
+
+#rainbow {
+	background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+	border: 2px solid rgba(0,0,0,0.4);
+}
+
+#darken {
+	background: #0b3a1d;
+}
+
+#lighten {
+	background: #20964a;
+}
+
+button.selected {
+	border: 4px solid #fff !important;
+}