Impaczus/2048
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bring container margin top into variable and reduce it on mobile

Browse Source
This commit is contained in:
Gabriele Cirulli
2014-03-22 17:28:14 +01:00
parent 17fe360df1
commit e729f7457f
2 changed files with 7 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/main.css
+3 -5
View File
@@ -480,7 +480,8 @@ hr {
.game-intro { .game-intro {
float: left; float: left;
line-height: 42px; } line-height: 42px;
margin-bottom: 0; }
.restart-button { .restart-button {
display: inline-block; display: inline-block;
@@ -536,7 +537,7 @@ hr {
margin-top: 2px; } margin-top: 2px; }
.game-container { .game-container {
margin-top: 40px; margin-top: 10px;
position: relative; position: relative;
padding: 10px; padding: 10px;
cursor: default; cursor: default;
@@ -692,9 +693,6 @@ hr {
-moz-transform: translate(202px, 202px); -moz-transform: translate(202px, 202px);
transform: translate(202px, 202px); } transform: translate(202px, 202px); }
.game-container {
margin-top: 20px; }
.tile .tile-inner { .tile .tile-inner {
font-size: 35px; } font-size: 35px; }
style/main.scss
+4 -9
View File
@@ -16,6 +16,7 @@ $tile-color: #eee4da;
$tile-gold-color: #edc22e; $tile-gold-color: #edc22e;
$tile-gold-glow-color: lighten($tile-gold-color, 15%); $tile-gold-glow-color: lighten($tile-gold-color, 15%);
$game-container-margin-top: 40px;
$game-container-background: #bbada0; $game-container-background: #bbada0;
$transition-speed: 100ms; $transition-speed: 100ms;
@@ -169,7 +170,7 @@ hr {
// Game field mixin used to render CSS at different width // Game field mixin used to render CSS at different width
@mixin game-field { @mixin game-field {
.game-container { .game-container {
margin-top: 40px; margin-top: $game-container-margin-top;
position: relative; position: relative;
padding: $grid-spacing; padding: $grid-spacing;
@@ -447,20 +448,17 @@ hr {
.above-game { .above-game {
@include clearfix; @include clearfix;
// margin-bottom: 10px;
} }
.game-intro { .game-intro {
float: left; float: left;
line-height: 42px; line-height: 42px;
// margin-bottom: 0; margin-bottom: 0;
} }
.restart-button { .restart-button {
@include button; @include button;
display: block; display: block;
// width: 100px;
// margin: 10px auto 10px auto;
text-align: center; text-align: center;
float: right; float: right;
} }
@@ -476,6 +474,7 @@ hr {
$grid-row-cells: 4; $grid-row-cells: 4;
$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells; $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
$tile-border-radius: 3px; $tile-border-radius: 3px;
$game-container-margin-top: 10px;
html, body { html, body {
font-size: 15px; font-size: 15px;
@@ -525,10 +524,6 @@ hr {
// Render the game field at the right width // Render the game field at the right width
@include game-field; @include game-field;
.game-container {
margin-top: 20px;
}
// Rest of the font-size adjustments in the tile class // Rest of the font-size adjustments in the tile class
.tile .tile-inner { .tile .tile-inner {
font-size: 35px; font-size: 35px;