woo it generates midi

1 files changed, 36 insertions, 28 deletions

diff --git a/index.html b/index.html
index 63a61ef..d56ff2e 100644
--- a/index.html
+++ b/index.html
@@ -7,9 +7,10 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 	font-size: 13px;
   transition: background-color 100ms;
-  background-image: url(http://i.asdf.us/im/84/imBreak_1340193016_tumblr_m5vynpMYYg1qiluqao1_500_.png);
+  background-image: url(./img/imBreak_1340193016_tumblr_m5vynpMYYg1qiluqao1_500_.png);
 	background-position: top right;
 	background-repeat: no-repeat;
+	background-attachment: fixed;
 }
 div {
  	display: inline-block;
@@ -23,6 +24,23 @@ div {
 .desktop body {
   user-select: none;
 }
+.top {
+	display: block;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+@media only screen and (min-device-width: 800px) {
+	.tools {
+		position: fixed;
+		top: 0;
+		left: 468px;
+		width: 400px;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+}
 @media only screen and (max-device-width: 800px) {
 	html,body {
 		margin: 0;
@@ -43,11 +61,6 @@ div {
 	br {
 		display: none;
 	}
-	.top {
-		display: block;
-		margin-top: 10px;
-		margin-bottom: 10px;
-	}
 }
 </style>
 </head>
@@ -56,33 +69,28 @@ div {
 	<div id='labels'></div>
 	<canvas nx="matrix" id="grid"></canvas>
 </div>
-<div>
+<div class='tools'>
 	<span class="top">
 		<canvas nx="number" label="tempo" id="tempo"></canvas>
 		<br><br>
 		<canvas nx="select" id="scale"></canvas>
 	</span>
-	<br>
-	<br><br><br>
-	<br><br><br>
-	<br><br><br>
-	<br><br><br>
-	<br><br><br>
-	<br><br><br>
-	<canvas nx="button" label="shift &uarr;" id="shiftUp"></canvas>
-	<canvas nx="button" label="shift &darr;" id="shiftDown"></canvas>
-	<br>
-	<canvas nx="button" label="slide &uarr;" id="slideUp"></canvas>
-	<canvas nx="button" label="slide &darr;" id="slideDown"></canvas>
-	<canvas nx="button" label="slide &larr;" id="slideLeft"></canvas>
-	<canvas nx="button" label="slide &rarr;" id="slideRight"></canvas>
-	<br>
-	<canvas nx="button" label="rotate &uarr;" id="rotateUp"></canvas>
-	<canvas nx="button" label="rotate &darr;" id="rotateDown"></canvas>
-	<canvas nx="button" label="rotate &larr;" id="rotateLeft"></canvas>
-	<canvas nx="button" label="rotate &rarr;" id="rotateRight"></canvas>
-	<canvas nx="button" label="flip &varr;" id="flip"></canvas>
-	<canvas nx="button" label="flop &harr;" id="flop"></canvas>
+	<span>
+		<canvas nx="button" label="shift &uarr;" id="shiftUp"></canvas>
+		<canvas nx="button" label="shift &darr;" id="shiftDown"></canvas>
+		<br>
+		<canvas nx="button" label="slide &uarr;" id="slideUp"></canvas>
+		<canvas nx="button" label="slide &darr;" id="slideDown"></canvas>
+		<canvas nx="button" label="slide &larr;" id="slideLeft"></canvas>
+		<canvas nx="button" label="slide &rarr;" id="slideRight"></canvas>
+		<br>
+		<canvas nx="button" label="rotate &uarr;" id="rotateUp"></canvas>
+		<canvas nx="button" label="rotate &darr;" id="rotateDown"></canvas>
+		<canvas nx="button" label="rotate &larr;" id="rotateLeft"></canvas>
+		<canvas nx="button" label="rotate &rarr;" id="rotateRight"></canvas>
+		<canvas nx="button" label="flip &varr;" id="flip"></canvas>
+		<canvas nx="button" label="flop &harr;" id="flop"></canvas>
+	</span>
 </div>
 </body>
 <script>