+
+ 8
+
+
+ 16
+
+
+ 32
+
+
+ 64
+
+
+ 128
+
+
+ 256
+
+
512
-
diff --git a/style/main.css b/style/main.css
index 8d875b1343e1b99bca71b84f18a9ff50a730e7b9..a43439d002c389ec02b3c2a0d946b5044a265578 100644
--- a/style/main.css
+++ b/style/main.css
@@ -3,7 +3,7 @@ html, body {
margin: 0;
padding: 0;
background: #faf8ef;
- color: #776E65;
+ color: #776e65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; }
body {
@@ -138,29 +138,44 @@ h1 {
left: 363.75px;
top: 363.75px; }
.tile.tile-2 {
- background: #eee4da; }
+ background: #eee4da;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-4 {
- background: #ede0ca; }
+ background: #ede0c8;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-8 {
- background: #edddba; }
+ background: #edddb7;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-16 {
- background: #eddaab; }
+ background: #edd9a6;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-32 {
- background: #edd79b; }
+ background: #edd695;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.09524), inset 0 0 0 1px rgba(255, 255, 255, 0.04762); }
.tile.tile-64 {
- background: #edd48b; }
+ background: #edd384;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.19048), inset 0 0 0 1px rgba(255, 255, 255, 0.09524); }
.tile.tile-128 {
- background: #edd17c;
+ background: #edcf72;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.28571), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
font-size: 45px; }
.tile.tile-256 {
- background: #edce6c;
+ background: #edcc61;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.38095), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
+ color: #ede9e5;
font-size: 45px; }
.tile.tile-512 {
- background: #edcb5c;
+ background: #edc850;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
+ color: #f9f6f2;
font-size: 45px; }
.tile.tile-1024 {
- background: #edc84d;
+ background: #edc53f;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.57143), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
+ color: #f9f6f2;
font-size: 35px; }
.tile.tile-2048 {
- background: #edc53d;
+ background: #edc22e;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.66667), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
+ color: #f9f6f2;
font-size: 35px; }
diff --git a/style/main.scss b/style/main.scss
index 45ea5e320a936e94afdb7ab92b35c11fbc88aeee..62071e405e75e264ddce7e620adb17670ef46eee 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -7,15 +7,19 @@ $grid-row-cells: 4;
$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
$tile-border-radius: 3px;
+$text-color: #776E65;
+$gold-text-color: #f9f6f2;
+
$tile-color: #eee4da;
$tile-gold-color: #edc22e;
+$tile-gold-glow-color: lighten($tile-gold-color, 15%);
html, body {
margin: 0;
padding: 0;
background: #faf8ef;
- color: #776E65;
+ color: $text-color;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
}
@@ -121,10 +125,22 @@ h1 {
@while $exponent <= $limit {
$power: pow($base, $exponent);
- $percent: (($exponent - 1) / $limit) * 100;
+
+ $gold-percent: ($exponent - 1) / ($limit - 1) * 100;
+
+ $gold-text-percent: min($exponent + 2, $limit) / ($limit) * 100;
+
+ $glow-opacity: max($exponent - 4, 0) / ($limit - 4);
&.tile-#{$power} {
- background: mix($tile-gold-color, $tile-color, $percent);
+ background: mix($tile-gold-color, $tile-color, $gold-percent);
+
+ box-shadow: 0 0 30px 10px rgba($tile-gold-glow-color, $glow-opacity / 1.5),
+ inset 0 0 0 1px rgba(white, $glow-opacity / 3);
+
+ @if $exponent >= 8 {
+ color: mix($gold-text-color, $text-color, $gold-text-percent);
+ }
@if $power >= 100 and $power < 1000 {
font-size: 45px;