uses normalize

package.json

@@ -54,6 +54,7 @@
     "lodash": "^4.17.4",
     "mocha": "^2.5.3",
     "node-sass": "^3.13.1",
+    "normalize.css": "^5.0.0",
     "npm": "^4.4.4",
     "postcss-loader": "^1.3.3",
     "react-addons-test-utils": "15.4.2",

src/Main/Toolbox/Keyboard/Keys/styles.scss

@@ -2,9 +2,9 @@
 
 
 :local(.Keys) {
-  align-self: flex-end;
-  height: 55%;
-  width: 80%;
   display: flex;
+  align-self: center;
   position: relative;
+  height: 55%;
+  width: 100%;
 }

src/Main/Toolbox/Keyboard/Logo/index.jsx

@@ -13,5 +13,4 @@ function Logo() {
 	);
 }
 
-
 export default CSSModules(Logo, styles);

src/Main/Toolbox/Keyboard/Logo/styles.scss

@@ -1,5 +1,14 @@
 @import "./src/styles/base";
 
 :local(.Logo) {
-  background-color: #fff;
+  height: 100%;
+  width: 10rem;
+
+  div {
+    height: inherit;
+  }
+
+  svg {
+    height: 100%;
+  }
 }

src/Main/Toolbox/Keyboard/index.jsx

@@ -15,7 +15,9 @@ class Keyboard extends Component {
 	render() {
 		return (
 			<div styleName='Keyboard'>
-				<Logo />
+				<div className='keyboard-panel'>
+					<Logo />
+				</div>
 				<Keys synth={this.state.synth} />
 			</div>
 		);

src/Main/Toolbox/Keyboard/styles.scss

@@ -5,9 +5,15 @@
 :local(.Keyboard) {
 	@extend .tool;
 
-	width: 45rem;
+	width: 40rem;
 	height: 20rem;
 	margin: 0 auto;
 	display: flex;
 	justify-content: center;
+	flex-direction: column;
+
+	.keyboard-panel {
+		flex: 1;
+		margin-bottom: 2rem;
+	}
 }

src/styles/base.scss

@@ -1,34 +1,8 @@
 @import "./src/styles/colors";
 
 $body-font-size:15px;
-
 $container-width: 1024px;
 
-// Reset!
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video, input[type=text],
-input[type=email], input[type=password], input[type=tel], button {
-  margin:0;
-  padding:0;
-  border:0;
-  font-size:$body-font-size;
-  font:inherit;
-  vertical-align:baseline;
-  line-height:normal;
-  box-sizing: border-box;
-}
-
 body {
 	font-family: Lato, sans-serif;
   margin:0;