diff --git a/style/helpers.scss b/style/helpers.scss index d530522ad9a81ea462e444358afe85812027a20d..1a31a11ac92f3cbf50124fe3c28fc7eb5dffe4da 100644 --- a/style/helpers.scss +++ b/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; +} diff --git a/style/main.css b/style/main.css index e05c4fe848392dd9a0ad6481901211924e5b6e32..8d875b1343e1b99bca71b84f18a9ff50a730e7b9 100644 --- a/style/main.css +++ b/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; diff --git a/style/main.scss b/style/main.scss index bae5889028f7d011d6c1cfe86c194d485677d754..45ea5e320a936e94afdb7ab92b35c11fbc88aeee 100644 --- a/style/main.scss +++ b/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} {