adjust font sizes, add transition and cursor states
adjust font sizes, add transition and cursor states

--- a/style/helpers.scss
+++ b/style/helpers.scss
@@ -20,3 +20,14 @@
   @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;
+}
+

--- a/style/main.css
+++ b/style/main.css
@@ -22,6 +22,10 @@
   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 @@
   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;

--- a/style/main.scss
+++ b/style/main.scss
@@ -38,6 +38,11 @@
   margin-top: 50px;
   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;
@@ -94,8 +99,11 @@
   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 {

comments