From 5c38e85d58a95aad3614a47640d967f9059d686a Mon Sep 17 00:00:00 2001
From: javl <mail@jaspervanloenen.com>
Date: Thu, 24 May 2018 11:36:53 +0200
Subject: [PATCH] CSS formatting

---
 index.html | 126 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 88 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index e6b53cb..67236e1 100644
--- a/index.html
+++ b/index.html
@@ -21,10 +21,10 @@
 			font-family: arial;
 		}
 		.wrapper {
-			width: 800px;
-			margin: auto;
 			display: flex;
 			flex-direction: column;
+			margin: auto;
+			width: 800px;
 		}
 		.section {
 			margin: 10px 0;
@@ -37,7 +37,8 @@
 			clear: both;
 			margin-bottom: 1px;
 		}
-		.section, .sub-section {
+		.section,
+		.sub-section {
 			width: 100%;
 		}
 		.column {
@@ -56,46 +57,77 @@
 		p {
 			margin: 20px 0;
 		}
-		.table { display: table; width: 100%; margin: 10px 0 0;}
-		.table-row { display: table-row; width: 100%; }
-		.table-cell { display: table-cell; padding: 5px 0;}
-		.table-cell:first-child { width: 30%; }
-		.table-cell:last-child { width: 70%; }
-		.table-cell:first-child label {font-weight: bold; }
-		.table-cell:last-child label { margin-right: 10px; }
-		.nested-table { margin: 0; }
-		.nested-table .table-cell { font-size: .9em; color: #666; width: 200px; }
-		.nested-table .table-cell:first-child {	}
-		#format-caption-container div {
-			display: none;
+		.table {
+			display: table;
+			margin: 10px 0 0;
 			width: 100%;
-			padding: 10px 0 15px;
+		}
+		.table-row {
+			display: table-row;
+			width: 100%;
+		}
+		.table-cell {
+			display: table-cell;
+			padding: 5px 0;
+		}
+		.table-cell:first-child {
+			width: 30%;
+		}
+		.table-cell:last-child {
+			width: 70%;
+		}
+		.table-cell:first-child label {
+			font-weight: bold;
+		}
+		.table-cell:last-child label {
+			margin-right: 10px;
+		}
+		.nested-table {
+			margin: 0;
+		}
+		.nested-table .table-cell {
+			color: #666;
+			font-size: .9em;
+			width: 200px;
+		}
+		.nested-table .table-cell:first-child {	}
+
+		#format-caption-container div {
+			color: #505050;
+			display: none;
 			font-size: .9em;
 			line-height: 1.4em;
-			color: #505050;
+			padding: 10px 0 15px;
+			width: 100%;
 		}
 		.byte-input {
-			min-width: 360px;
 			min-height: 160px;
+			min-width: 360px;
 		}
 		.code-output {
-			width: 100%;
 			height: 200px;
+			width: 100%;
 		}
-		.note { color: #666666; margin: 3px 0; font-size: .9em; line-height: 1.4em; }
-		button, input[type="file"]::-webkit-file-upload-button {
-			margin: 10px 0;
-			background: #00CB99;
-			border: none;
-			padding: 4px 8px;
-			color: #fff;
-			font-weight: 100;
+		.note {
+			color: #666666;
 			font-size: .9em;
+			line-height: 1.4em;
+			margin: 3px 0;
+		}
+		button,
+		input[type="file"]::-webkit-file-upload-button {
+			background: #00CB99;
 			border-radius: 3px;
+			border: none;
+			color: #fff;
+			font-size: .9em;
+			font-weight: 100;
+			margin: 10px 0;
+			padding: 4px 8px;
 		}
 		input[type="file"]::-webkit-file-upload-button {
-			padding: 6px 20px;
 			font-size: 1.6em;
+			padding: 6px 20px;
 		}
 		.generate-button {
 			margin: 40px 0 20px;
@@ -105,29 +137,47 @@
 			padding: 1px 4px;
 		}
 		.file-info {
-			font-size: .7em;
 			color: #505050;
+			font-size: .7em;
 			margin-left: 20px;
-			white-space: pre;
 			max-width: 300px;
+			white-space: pre;
+		}
+		.size-input{
+			width: 45px;
+		}
+		.glyph-input {
+			width: 80px;
+			margin-left: 10px;
+		}
+		#image-size-settings {
+			list-style-type: none;
+		}
+		#image-size-settings li {
+			margin: 4px 0;
 		}
-		.size-input{ width: 45px; }
-		.glyph-input { width: 80px; margin-left: 10px; }
-		#image-size-settings { list-style-type: none; }
-		#image-size-settings li { margin: 4px 0; }
 		#images-canvas-container canvas {
 			border: 3px solid #88DAC5;
 			margin: 10px 15px;
 		}
 		#images-canvas-container {
+			align-items: flex-start;
 			display: flex;
 			flex-wrap: wrap;
-			align-items: flex-start;
 		}
 		#extra-settings-container {	}
-		#arduino-identifier, #adafruit-gfx-settings, #all-same-size { display: none; }
-		.msg { font-size: 1.2em; }
-		.error-msg { color: #ff0000; display: none; }
+		#arduino-identifier,
+		#adafruit-gfx-settings,
+		#all-same-size {
+			display: none;
+		}
+		.msg {
+			font-size: 1.2em;
+		}
+		.error-msg {
+			color: #ff0000;
+			display: none;
+		}
 	</style>
 </head>
 <body>