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

set mobile threshold slightly wider than the board size

Browse Source
This commit is contained in:
Gabriele Cirulli
2014-03-14 18:31:04 +01:00
parent f732d4f547
commit 01264c3252
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/main.css
+7 -7
View File
@@ -337,7 +337,7 @@ hr {
background: #edcf72;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
font-size: 45px; }
@media screen and (max-width: 480px) {
@media screen and (max-width: 520px) {
.tile.tile-128 .tile-inner {
font-size: 25px; } }
.tile.tile-256 .tile-inner {
@@ -345,7 +345,7 @@ hr {
background: #edcc61;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
font-size: 45px; }
@media screen and (max-width: 480px) {
@media screen and (max-width: 520px) {
.tile.tile-256 .tile-inner {
font-size: 25px; } }
.tile.tile-512 .tile-inner {
@@ -353,7 +353,7 @@ hr {
background: #edc850;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
font-size: 45px; }
@media screen and (max-width: 480px) {
@media screen and (max-width: 520px) {
.tile.tile-512 .tile-inner {
font-size: 25px; } }
.tile.tile-1024 .tile-inner {
@@ -361,7 +361,7 @@ hr {
background: #edc53f;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
font-size: 35px; }
@media screen and (max-width: 480px) {
@media screen and (max-width: 520px) {
.tile.tile-1024 .tile-inner {
font-size: 15px; } }
.tile.tile-2048 .tile-inner {
@@ -369,14 +369,14 @@ hr {
background: #edc22e;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
font-size: 35px; }
@media screen and (max-width: 480px) {
@media screen and (max-width: 520px) {
.tile.tile-2048 .tile-inner {
font-size: 15px; } }
.tile.tile-super .tile-inner {
color: #f9f6f2;
background: #3c3a32;
font-size: 30px; }
@media screen and (max-width: 480px) {
@media screen and (max-width: 520px) {
.tile.tile-super .tile-inner {
font-size: 10px; } }
@@ -490,7 +490,7 @@ hr {
.game-explanation {
margin-top: 50px; }
@media screen and (max-width: 480px) {
@media screen and (max-width: 520px) {
html, body {
font-size: 15px; }
style/main.scss
+6 -4
View File
@@ -7,6 +7,8 @@ $grid-row-cells: 4;
$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
$tile-border-radius: 3px;
$mobile-threshold: $field-width + 20px;
$text-color: #776E65;
$bright-text-color: #f9f6f2;
@@ -379,13 +381,13 @@ hr {
font-size: 45px;
// Media queries placed here to avoid carrying over the rest of the logic
@include smaller(480px) {
@include smaller($mobile-threshold) {
font-size: 25px;
}
} @else if $power >= 1000 {
font-size: 35px;
@include smaller(480px) {
@include smaller($mobile-threshold) {
font-size: 15px;
}
}
@@ -401,7 +403,7 @@ hr {
font-size: 30px;
@include smaller(480px) {
@include smaller($mobile-threshold) {
font-size: 10px;
}
}
@@ -452,7 +454,7 @@ hr {
margin-top: 50px;
}
@include smaller(480px) {
@include smaller($mobile-threshold) {
// Redefine variables for smaller screens
$field-width: 280px;
$grid-spacing: 10px;