diff --git a/index.html b/index.html index 74fa9668244f2fb3e5ddfddd7b6329a09c90401f..0a56a605bf3b621bf45ec01f190fbdb7a0ae7bc2 100644 --- a/index.html +++ b/index.html @@ -42,13 +42,34 @@
2
-
+
4
-
+
+ 8 +
+
+ 16 +
+
+ 32 +
+
+ 64 +
+
+ 128 +
+
+ 256 +
+
512
-
+
+ 1024 +
+
2048
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;