fix

Author: oprilzeng

2048/full/style/main.css

@@ -420,17 +420,17 @@ hr {
     color: #f9f6f2;
     background: #3c3a32;
     font-size: 24px; }
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-super .tile-inner {
         font-size: 8px; } }
 
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-64 .tile-inner {
         font-size: 8px; } }
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-512 .tile-inner {
         font-size: 8px; } }
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-2048 .tile-inner {
         font-size: 8px;
         line-height:10px; } }
@@ -645,7 +645,7 @@ hr {
     z-index: 1; }
 
   .grid-row {
-    margin-bottom: 10px; }
+    margin-bottom: 8px; }
     .grid-row:last-child {
       margin-bottom: 0; }
     .grid-row:after {
@@ -654,9 +654,9 @@ hr {
       clear: both; }
 
   .grid-cell {
-    width: 57.5px;
-    height: 57.5px;
-    margin-right: 10px;
+    width: 46.4px;
+    height: 46.4px;
+    margin-right: 8px;
     float: left;
     border-radius: 3px;
     background: rgba(238, 228, 218, 0.35); }
@@ -668,79 +668,115 @@ hr {
     z-index: 2; }
 
   .tile, .tile .tile-inner {
-    width: 58px;
-    height: 58px;
-    line-height: 67.5px; }
+    width: 47px;
+    height: 47px;
+    line-height: 54.4px; }
   .tile.tile-position-1-1 {
     -webkit-transform: translate(0px, 0px);
     -moz-transform: translate(0px, 0px);
     transform: translate(0px, 0px); }
   .tile.tile-position-1-2 {
-    -webkit-transform: translate(0px, 67px);
-    -moz-transform: translate(0px, 67px);
-    transform: translate(0px, 67px); }
+    -webkit-transform: translate(0px, 54px);
+    -moz-transform: translate(0px, 54px);
+    transform: translate(0px, 54px); }
   .tile.tile-position-1-3 {
-    -webkit-transform: translate(0px, 135px);
-    -moz-transform: translate(0px, 135px);
-    transform: translate(0px, 135px); }
+    -webkit-transform: translate(0px, 109px);
+    -moz-transform: translate(0px, 109px);
+    transform: translate(0px, 109px); }
   .tile.tile-position-1-4 {
-    -webkit-transform: translate(0px, 202px);
-    -moz-transform: translate(0px, 202px);
-    transform: translate(0px, 202px); }
+    -webkit-transform: translate(0px, 163px);
+    -moz-transform: translate(0px, 163px);
+    transform: translate(0px, 163px); }
+  .tile.tile-position-1-5 {
+    -webkit-transform: translate(0px, 218px);
+    -moz-transform: translate(0px, 218px);
+    transform: translate(0px, 218px); }
   .tile.tile-position-2-1 {
-    -webkit-transform: translate(67px, 0px);
-    -moz-transform: translate(67px, 0px);
-    transform: translate(67px, 0px); }
+    -webkit-transform: translate(54px, 0px);
+    -moz-transform: translate(54px, 0px);
+    transform: translate(54px, 0px); }
   .tile.tile-position-2-2 {
-    -webkit-transform: translate(67px, 67px);
-    -moz-transform: translate(67px, 67px);
-    transform: translate(67px, 67px); }
+    -webkit-transform: translate(54px, 54px);
+    -moz-transform: translate(54px, 54px);
+    transform: translate(54px, 54px); }
   .tile.tile-position-2-3 {
-    -webkit-transform: translate(67px, 135px);
-    -moz-transform: translate(67px, 135px);
-    transform: translate(67px, 135px); }
+    -webkit-transform: translate(54px, 109px);
+    -moz-transform: translate(54px, 109px);
+    transform: translate(54px, 109px); }
   .tile.tile-position-2-4 {
-    -webkit-transform: translate(67px, 202px);
-    -moz-transform: translate(67px, 202px);
-    transform: translate(67px, 202px); }
+    -webkit-transform: translate(54px, 163px);
+    -moz-transform: translate(54px, 163px);
+    transform: translate(54px, 163px); }
+  .tile.tile-position-2-5 {
+    -webkit-transform: translate(54px, 218px);
+    -moz-transform: translate(54px, 218px);
+    transform: translate(54px, 218px); }
   .tile.tile-position-3-1 {
-    -webkit-transform: translate(135px, 0px);
-    -moz-transform: translate(135px, 0px);
-    transform: translate(135px, 0px); }
+    -webkit-transform: translate(109px, 0px);
+    -moz-transform: translate(109px, 0px);
+    transform: translate(109px, 0px); }
   .tile.tile-position-3-2 {
-    -webkit-transform: translate(135px, 67px);
-    -moz-transform: translate(135px, 67px);
-    transform: translate(135px, 67px); }
+    -webkit-transform: translate(109px, 54px);
+    -moz-transform: translate(109px, 54px);
+    transform: translate(109px, 54px); }
   .tile.tile-position-3-3 {
-    -webkit-transform: translate(135px, 135px);
-    -moz-transform: translate(135px, 135px);
-    transform: translate(135px, 135px); }
+    -webkit-transform: translate(109px, 109px);
+    -moz-transform: translate(109px, 109px);
+    transform: translate(109px, 109px); }
   .tile.tile-position-3-4 {
-    -webkit-transform: translate(135px, 202px);
-    -moz-transform: translate(135px, 202px);
-    transform: translate(135px, 202px); }
+    -webkit-transform: translate(109px, 163px);
+    -moz-transform: translate(109px, 163px);
+    transform: translate(109px, 163px); }
+  .tile.tile-position-3-5 {
+    -webkit-transform: translate(109px, 218px);
+    -moz-transform: translate(109px, 218px);
+    transform: translate(109px, 218px); }
   .tile.tile-position-4-1 {
-    -webkit-transform: translate(202px, 0px);
-    -moz-transform: translate(202px, 0px);
-    transform: translate(202px, 0px); }
+    -webkit-transform: translate(163px, 0px);
+    -moz-transform: translate(163px, 0px);
+    transform: translate(163px, 0px); }
   .tile.tile-position-4-2 {
-    -webkit-transform: translate(202px, 67px);
-    -moz-transform: translate(202px, 67px);
-    transform: translate(202px, 67px); }
+    -webkit-transform: translate(163px, 54px);
+    -moz-transform: translate(163px, 54px);
+    transform: translate(163px, 54px); }
   .tile.tile-position-4-3 {
-    -webkit-transform: translate(202px, 135px);
-    -moz-transform: translate(202px, 135px);
-    transform: translate(202px, 135px); }
+    -webkit-transform: translate(163px, 109px);
+    -moz-transform: translate(163px, 109px);
+    transform: translate(163px, 109px); }
   .tile.tile-position-4-4 {
-    -webkit-transform: translate(202px, 202px);
-    -moz-transform: translate(202px, 202px);
-    transform: translate(202px, 202px); }
+    -webkit-transform: translate(163px, 163px);
+    -moz-transform: translate(163px, 163px);
+    transform: translate(163px, 163px); }
+  .tile.tile-position-4-5 {
+    -webkit-transform: translate(163px, 218px);
+    -moz-transform: translate(163px, 218px);
+    transform: translate(163px, 218px); }
+  .tile.tile-position-5-1 {
+    -webkit-transform: translate(218px, 0px);
+    -moz-transform: translate(218px, 0px);
+    transform: translate(218px, 0px); }
+  .tile.tile-position-5-2 {
+    -webkit-transform: translate(218px, 54px);
+    -moz-transform: translate(218px, 54px);
+    transform: translate(218px, 54px); }
+  .tile.tile-position-5-3 {
+    -webkit-transform: translate(218px, 109px);
+    -moz-transform: translate(218px, 109px);
+    transform: translate(218px, 109px); }
+  .tile.tile-position-5-4 {
+    -webkit-transform: translate(218px, 218px);
+    -moz-transform: translate(218px, 218px);
+    transform: translate(218px, 218px); }
+  .tile.tile-position-5-5 {
+    -webkit-transform: translate(218px, 218px);
+    -moz-transform: translate(218px, 218px);
+    transform: translate(218px, 218px); }
 
   .game-container {
     margin-top: 20px; }
 
   .tile .tile-inner {
-    font-size: 35px; }
+    font-size: 38px; }
 
   .game-message p {
     font-size: 30px !important;