From d297e97db536e0e5b4c0133ad211328a3c9be91f Mon Sep 17 00:00:00 2001
From: Koen Lageveen <koen.lageveen@me.com>
Date: Fri, 28 Jul 2017 21:27:31 +0200
Subject: [PATCH] layout and color tweaks

---
 index.css  | 31 ++++++++++++++++++++++++++-----
 index.html | 33 ++++++++++++++++++++-------------
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/index.css b/index.css
index 35fceab..6b68fbd 100644
--- a/index.css
+++ b/index.css
@@ -29,7 +29,7 @@ article {
 	border-radius: 1ex;
 	border: 1px solid rgba(0,0,0,.2);
 	min-height: calc(100% - 3em);
-	min-width: 33%;
+	width: 34em;
 	background: rgba(255,255,255,.05);
 	display: flex;
 	flex-direction: column;
@@ -37,6 +37,19 @@ article {
 section {
 	flex: 1;
 	padding: 0.5em 1em;
+	border-bottom: 1px solid rgba(0,0,0,.05);
+}
+section.config {
+	border-top: 1px solid rgba(255,255,255,.05);
+	flex: 0;
+	padding: 0.5em 1em;
+	display: flex;
+	flex-direction: row;
+}
+section.config > * {
+	flex: 1;
+	text-align: center;
+	padding: 0;
 }
 footer {
 	flex: 0;
@@ -44,6 +57,7 @@ footer {
 	text-align: center;
 	font-size: .8em;
 	border-top: 1px solid rgba(255,255,255,.05);
+	opacity: .6;
 }
 #font-info p {
 	display: none;
@@ -61,12 +75,14 @@ a:active {
 }
 label {
 	margin-right: .5ex;
+	font-style: italic;
+	opacity: .6;
 }
 select {
 	all: unset;
 	width: 9em;
 	padding: 0 .5ex;
-	border: 1px solid rgba(100,100,100,.5);
+	border: 1px solid transparent;
 	border-radius: 3px;
 	white-space: nowrap;
 	overflow: hidden;
@@ -77,16 +93,21 @@ select option {
 	background: #fff;
 	color: #000;
 }
-#size,
-#spacing {
+input[type="number"] {
 	all: unset;
 	width: 4em;
 	margin-left: .5ex;
 	padding: 0 .5ex;
-	border: 1px solid rgba(100,100,100,.5);
+	border: 1px solid transparent;
 	border-radius: 3px;
 	text-align: left;
 }
+input[type="number"]:hover,
+input[type="number"]:focus,
+select:hover,
+select:focus {
+	border-color: rgba(100,100,100,.5);
+}
 pre,
 textarea,
 .CodeMirror {
diff --git a/index.html b/index.html
index 9858b4b..e6eee44 100755
--- a/index.html
+++ b/index.html
@@ -111,7 +111,27 @@
 				<button class="nav-button" id="next">↓</button>
 			</p>
 			<dix id="font-info"></dix>
+		</section>
+
+		<section class="config">
+			<p>
+				<label for="size">Size</label>
+				<input onchange="setSize()" type="number" id="size" value="14" min="1" max="32" step="1">
+			</p>
+			<p>
+				<label for="spacing">Spacing</label>
+				<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
+			</p>
+			<p>
+				<label for="aliasing">AA</label>
+				<input onchange="setAntialiasing()" type="checkbox" id="aliasing" checked>
+			</p>
+		</section>
+
+		<section class="config">
 			<p class="select">
+				<button class="nav-button" id="theme-previous">↑</button>
+				<button class="nav-button" id="theme-next">↓</button>
 				<label for="select-theme">Theme</label>
 				<select onchange="selectTheme()" id="select-theme">
 					<option>3024-day</option>
@@ -163,8 +183,6 @@
 					<option>yeti</option>
 					<option>zenburn</option>
 				</select>
-				<button class="nav-button" id="theme-previous">↑</button>
-				<button class="nav-button" id="theme-next">↓</button>
 			</p>
 			<p class="select">
 				<label for="select-language">Language</label>
@@ -182,17 +200,6 @@
 					<option>Swift</option>
 				</select>
 			</p>
-			<p>
-				<label for="size">Size</label>
-				<input onchange="setSize()" type="number" id="size" value="14" min="1" max="32" step="1">
-			</p>
-			<p>
-				<label for="spacing">Spacing</label>
-				<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
-			</p>
-			<p>
-				<label for="aliasing">Anti-aliasing </label><input onchange="setAntialiasing()" type="checkbox" id="aliasing" checked>
-			</p>
 		</section>
 
 		<footer>