Taller keys (irregular hexagons, easier to play between rows)

src/script/hex.js

@@ -25,6 +25,9 @@ var current_keys = rows['i'];
 var startingOctave = 2;
 var notesPerOctave = 4;
 var keysPerRow = 9;
+
+var tallerKeys = true;
+
 var a_context;
 var master_gain;
 var notesPlaying = {};
@@ -117,7 +120,12 @@ var sizeKeys = function(container){
   var padding_top = (container.offsetHeight - rows_height) / 2;
   container.style.paddingTop = padding_top;
   // set key size
-  var new_size = (key_width*1.5625)+'%'; // 62.5% = 40px width
+  var new_size;
+  if (tallerKeys) {
+    new_size = (key_width * 1.82) + '%'; // 62.5% = 40px width
+  } else {
+    new_size = (key_width * 1.5625) + '%'; // 62.5% = 40px width
+  }
   $('html').css('font-size', new_size);
   $('body').css('font-size', new_size);
 }
@@ -176,6 +184,11 @@ if (is_desktop){
     for (i = 0, l = current_keys.length; i < l; i++) {
       insertRow(i, current_keys[i], container);
     };
+
+    if (tallerKeys === true) {
+      container.classList.add('tall');
+    }
+
     sizeKeys(container);
     container.style.visibility = "visible";
     window.onresize = function(event) {
@@ -271,6 +284,11 @@ if (is_mobile) {
     for (i = 0, l = current_keys.length; i < l; i++) {
       insertRow(i, current_keys[i], container);
     };
+
+    if (tallerKeys === true) {
+      container.classList.add('tall');
+    }
+
     sizeKeys(container);
     container.style.visibility = "visible";
     window.onresize = function(event) {

src/style/app.css

@@ -51,10 +51,18 @@
   margin-top: -1.125rem;
 }
 
+.tall .row {
+  margin-top: -1.67rem;
+}
+
 .row:nth-child(2) {
   margin-left: 2.03rem;
 }
 
+.tall .row:nth-child(2) {
+  margin-left: 1.75rem;
+}
+
 .key {
   width: 4.0rem;
   height: 4.6rem;
@@ -63,6 +71,11 @@
   margin-bottom: 1px;
 }
 
+.tall .key {
+  width: 3.44rem;
+  height: 4.82rem;
+}
+
 .key .hexagon {
   overflow: hidden;
   visibility: hidden;
@@ -71,6 +84,11 @@
   cursor: pointer;
 }
 
+.tall .key .hexagon {
+  -webkit-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
 .key .hexagon-in1 {
   overflow: hidden;
   width: 100%;
@@ -79,6 +97,11 @@
   transform: rotate(-60deg);
 }
 
+.tall .key .hexagon-in1 {
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+
 .key .hexagon-in2 {
   -webkit-box-shadow: inset 0 0 0 4rem rgba(176, 218, 212, 0.48);
   box-shadow: inset 0 0 0 4rem rgba(176, 218, 212, 0.48);
@@ -94,22 +117,35 @@
   transition: all 0.5s ease;
 }
 
+.tall .key .hexagon-in2 {
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
 .key .hexagon-in2.active {
   background-color: red;
 }
 
 .key h1 {
   padding: 1rem 0 .4rem 1.4rem;
-  font-family: "Impact", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 2.4rem;
   text-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.03);
   color: rgba(0,0,0,0.9);
 }
 
+.tall .key h1 {
+  padding-left: 0.9rem;
+}
+
 .key h1.incidental {
   padding-left: 1.2rem;
 }
 
+.tall .key h1.incidental {
+  padding-left: 0.5rem;
+}
+
 .key h1.incidental sup {
   position: relative;
   top: -.2rem;