restyle new game button to put it on the right side of the introduction

This commit is contained in:
Gabriele Cirulli
2014-03-22 17:00:50 +01:00
parent 4ad15d4cbd
commit 560859fcd9
4 changed files with 86 additions and 42 deletions
+35 -27
View File
@@ -30,7 +30,6 @@ h1.title {
100% {
top: -50px;
opacity: 0; } }
@-moz-keyframes move-up {
0% {
top: 25px;
@@ -39,7 +38,6 @@ h1.title {
100% {
top: -50px;
opacity: 0; } }
@keyframes move-up {
0% {
top: 25px;
@@ -48,7 +46,6 @@ h1.title {
100% {
top: -50px;
opacity: 0; } }
.scores-container {
float: right;
text-align: right; }
@@ -128,36 +125,20 @@ hr {
100% {
opacity: 1; } }
@-moz-keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
.restart-button {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
display: block;
width: 100px;
margin: 10px auto 10px auto;
text-align: center; }
.game-container {
margin-top: 40px;
position: relative;
padding: 15px;
cursor: default;
@@ -406,7 +387,6 @@ hr {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@-moz-keyframes appear {
0% {
opacity: 0;
@@ -419,7 +399,6 @@ hr {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@keyframes appear {
0% {
opacity: 0;
@@ -432,7 +411,6 @@ hr {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
.tile-new .tile-inner {
-webkit-animation: appear 200ms ease 100ms;
-moz-animation: appear 200ms ease 100ms;
@@ -456,7 +434,6 @@ hr {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@-moz-keyframes pop {
0% {
-webkit-transform: scale(0);
@@ -472,7 +449,6 @@ hr {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@keyframes pop {
0% {
-webkit-transform: scale(0);
@@ -488,7 +464,6 @@ hr {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
.tile-merged .tile-inner {
z-index: 20;
-webkit-animation: pop 200ms ease 100ms;
@@ -498,8 +473,27 @@ hr {
-moz-animation-fill-mode: backwards;
animation-fill-mode: backwards; }
.above-game:after {
content: "";
display: block;
clear: both; }
.game-intro {
margin-bottom: 0; }
float: left;
line-height: 42px; }
.restart-button {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
display: block;
text-align: center;
float: right; }
.game-explanation {
margin-top: 50px; }
@@ -528,7 +522,21 @@ hr {
.heading {
margin-bottom: 10px; }
.game-intro {
width: 55%;
display: block;
box-sizing: border-box;
line-height: 1.65; }
.restart-button {
width: 42%;
padding: 0;
display: block;
box-sizing: border-box;
margin-top: 2px; }
.game-container {
margin-top: 40px;
position: relative;
padding: 10px;
cursor: default;