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

Author: gabrielecirulli

index.html

@@ -22,8 +22,12 @@ <h1 class="title">2048</h1>
         <div class="best-container">0</div>
       </div>
     </div>
-    <p class="game-intro">Join the numbers and get the <strong>2048 tile!</strong></p>
-    <a class="restart-button">New Game</a>
+
+    <div class="above-game">
+      <p class="game-intro">Join the numbers and get the <strong>2048 tile!</strong></p>
+      <a class="restart-button">New Game</a>
+    </div>
+
     <div class="game-container">
       <div class="game-message">
         <p></p>

style/helpers.scss

@@ -70,3 +70,12 @@
     @content;
   }
 }
+
+// Clearfix
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}

style/main.css

@@ -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;

style/main.scss

@@ -34,10 +34,8 @@ body {
   margin: 80px 0;
 }
 
-.heading:after {
-  content: "";
-  display: block;
-  clear: both;
+.heading {
+  @include clearfix;
 }
 
 h1.title {
@@ -168,17 +166,10 @@ hr {
   line-height: 42px;
 }
 
-.restart-button {
-  @include button;
-  display: block;
-  width: 100px;
-  margin: 10px auto 10px auto;
-  text-align: center;
-}
-
 // Game field mixin used to render CSS at different width
 @mixin game-field {
   .game-container {
+    margin-top: 40px;
     position: relative;
     padding: $grid-spacing;
 
@@ -454,8 +445,24 @@ hr {
   @include animation-fill-mode(backwards);
 }
 
+.above-game {
+  @include clearfix;
+  // margin-bottom: 10px;
+}
+
 .game-intro {
-  margin-bottom: 0;
+  float: left;
+  line-height: 42px;
+  // margin-bottom: 0;
+}
+
+.restart-button {
+  @include button;
+  display: block;
+  // width: 100px;
+  // margin: 10px auto 10px auto;
+  text-align: center;
+  float: right;
 }
 
 .game-explanation {
@@ -499,6 +506,22 @@ hr {
     margin-bottom: 10px;
   }
 
+  // Show intro and restart button side by side
+  .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;
+  }
+
   // Render the game field at the right width
   @include game-field;