adjust font sizes, add transition and cursor states

style/helpers.scss

@@ -19,3 +19,14 @@
 @function pow($base, $exponent) {
   @return exponent($base, $exponent);
 }
+
+// Transition mixins
+@mixin transition($args...) {
+  -webkit-transition: $args;
+  -moz-transition: $args;
+}
+
+@mixin transition-property($args...) {
+  -webkit-transition-property: $args;
+  -moz-transition-property: $args;
+}

style/main.css

@@ -22,6 +22,10 @@ h1 {
   margin-top: 50px;
   position: relative;
   padding: 15px;
+  cursor: default;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
   background: #bbada0;
   border-radius: 6px;
   width: 500px;
@@ -63,8 +67,12 @@ h1 {
   background: #eee4da;
   text-align: center;
   line-height: 116.25px;
-  font-size: 60px;
-  font-weight: bold; }
+  font-size: 55px;
+  font-weight: bold;
+  -webkit-transition: 200ms ease;
+  -moz-transition: 200ms ease;
+  -webkit-transition-property: top, left;
+  -moz-transition-property: top, left; }
   .tile.tile-position-1-1 {
     position: absolute;
     left: 0px;

style/main.scss

@@ -39,6 +39,11 @@ h1 {
   position: relative;
   padding: $grid-spacing;
 
+  cursor: default;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
   background: #bbada0;
   border-radius: $tile-border-radius * 2;
   width: $field-width;
@@ -94,9 +99,12 @@ h1 {
   background: $tile-color;
   text-align: center;
   line-height: $tile-size + 10px;
-  font-size: 60px;
+  font-size: 55px;
   font-weight: bold;
 
+  @include transition(200ms ease);
+  @include transition-property(top, left);
+
   @for $x from 1 through $grid-row-cells {
     @for $y from 1 through $grid-row-cells {
       &.tile-position-#{$x}-#{$y} {