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

merge threshold change

Browse Source
This commit is contained in:
Gabriele Cirulli
2014-03-14 18:32:22 +01:00
parent 90f9541b1d 01264c3252
commit 001a5b9ea2
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
@@ -341,7 +341,7 @@ hr {
background: #edcf72; 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); 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; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-128 .tile-inner { .tile.tile-128 .tile-inner {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-256 .tile-inner { .tile.tile-256 .tile-inner {
@@ -349,7 +349,7 @@ hr {
background: #edcc61; 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); 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; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-256 .tile-inner { .tile.tile-256 .tile-inner {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-512 .tile-inner { .tile.tile-512 .tile-inner {
@@ -357,7 +357,7 @@ hr {
background: #edc850; 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); 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; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-512 .tile-inner { .tile.tile-512 .tile-inner {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-1024 .tile-inner { .tile.tile-1024 .tile-inner {
@@ -365,7 +365,7 @@ hr {
background: #edc53f; 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); 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; } font-size: 35px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-1024 .tile-inner { .tile.tile-1024 .tile-inner {
font-size: 15px; } } font-size: 15px; } }
.tile.tile-2048 .tile-inner { .tile.tile-2048 .tile-inner {
@@ -373,14 +373,14 @@ hr {
background: #edc22e; 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); 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; } font-size: 35px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-2048 .tile-inner { .tile.tile-2048 .tile-inner {
font-size: 15px; } } font-size: 15px; } }
.tile.tile-super .tile-inner { .tile.tile-super .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #3c3a32; background: #3c3a32;
font-size: 30px; } font-size: 30px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-super .tile-inner { .tile.tile-super .tile-inner {
font-size: 10px; } } font-size: 10px; } }
@@ -501,7 +501,7 @@ hr {
display: inline-block; display: inline-block;
vertical-align: middle; } vertical-align: middle; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
html, body { html, body {
font-size: 15px; } 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-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
$tile-border-radius: 3px; $tile-border-radius: 3px;
$mobile-threshold: $field-width + 20px;
$text-color: #776E65; $text-color: #776E65;
$bright-text-color: #f9f6f2; $bright-text-color: #f9f6f2;
@@ -385,13 +387,13 @@ hr {
font-size: 45px; font-size: 45px;
// Media queries placed here to avoid carrying over the rest of the logic // Media queries placed here to avoid carrying over the rest of the logic
@include smaller(480px) { @include smaller($mobile-threshold) {
font-size: 25px; font-size: 25px;
} }
} @else if $power >= 1000 { } @else if $power >= 1000 {
font-size: 35px; font-size: 35px;
@include smaller(480px) { @include smaller($mobile-threshold) {
font-size: 15px; font-size: 15px;
} }
} }
@@ -407,7 +409,7 @@ hr {
font-size: 30px; font-size: 30px;
@include smaller(480px) { @include smaller($mobile-threshold) {
font-size: 10px; font-size: 10px;
} }
} }
@@ -468,7 +470,7 @@ hr {
} }
} }
@include smaller(480px) { @include smaller($mobile-threshold) {
// Redefine variables for smaller screens // Redefine variables for smaller screens
$field-width: 280px; $field-width: 280px;
$grid-spacing: 10px; $grid-spacing: 10px;