From e729f7457f23c5e2ddf7c323fca21a9027eadee7 Mon Sep 17 00:00:00 2001
From: Gabriele Cirulli <gabrycir@gmail.com>
Date: Sat, 22 Mar 2014 17:28:14 +0100
Subject: [PATCH] bring container margin top into variable and reduce it on
 mobile

---
 style/main.css  |  8 +++-----
 style/main.scss | 13 ++++---------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/style/main.css b/style/main.css
index a42d04d..c05ec2a 100644
--- a/style/main.css
+++ b/style/main.css
@@ -480,7 +480,8 @@ hr {
 
 .game-intro {
   float: left;
-  line-height: 42px; }
+  line-height: 42px;
+  margin-bottom: 0; }
 
 .restart-button {
   display: inline-block;
@@ -536,7 +537,7 @@ hr {
     margin-top: 2px; }
 
   .game-container {
-    margin-top: 40px;
+    margin-top: 10px;
     position: relative;
     padding: 10px;
     cursor: default;
@@ -692,9 +693,6 @@ hr {
     -moz-transform: translate(202px, 202px);
     transform: translate(202px, 202px); }
 
-  .game-container {
-    margin-top: 20px; }
-
   .tile .tile-inner {
     font-size: 35px; }
 
diff --git a/style/main.scss b/style/main.scss
index 25cc3f3..6add30a 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -16,6 +16,7 @@ $tile-color: #eee4da;
 $tile-gold-color: #edc22e;
 $tile-gold-glow-color: lighten($tile-gold-color, 15%);
 
+$game-container-margin-top: 40px;
 $game-container-background: #bbada0;
 
 $transition-speed: 100ms;
@@ -169,7 +170,7 @@ hr {
 // Game field mixin used to render CSS at different width
 @mixin game-field {
   .game-container {
-    margin-top: 40px;
+    margin-top: $game-container-margin-top;
     position: relative;
     padding: $grid-spacing;
 
@@ -447,20 +448,17 @@ hr {
 
 .above-game {
   @include clearfix;
-  // margin-bottom: 10px;
 }
 
 .game-intro {
   float: left;
   line-height: 42px;
-  // margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .restart-button {
   @include button;
   display: block;
-  // width: 100px;
-  // margin: 10px auto 10px auto;
   text-align: center;
   float: right;
 }
@@ -476,6 +474,7 @@ hr {
   $grid-row-cells: 4;
   $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
   $tile-border-radius: 3px;
+  $game-container-margin-top: 10px;
 
   html, body {
     font-size: 15px;
@@ -525,10 +524,6 @@ hr {
   // Render the game field at the right width
   @include game-field;
 
-  .game-container {
-    margin-top: 20px;
-  }
-
   // Rest of the font-size adjustments in the tile class
   .tile .tile-inner {
     font-size: 35px;
-- 
GitLab