diff --git a/index.html b/index.html index 8d0fc5ffce2dd34908123e9c0a8d4bb844cc9e34..7158d3fcf471d21c1dc0b9d15c9cb40108b504a3 100644 --- a/index.html +++ b/index.html @@ -75,6 +75,10 @@
diff --git a/meta/icon_bitcoin.png b/meta/icon_bitcoin.png new file mode 100644 index 0000000000000000000000000000000000000000..85e491b2c13938cf1074e402a15e80339e4552ed Binary files /dev/null and b/meta/icon_bitcoin.png differ diff --git a/style/main.css b/style/main.css index 016732234c9914f50e450a6caedc6e7234aca356..f305c36fd7f9041c5053ced5f2c06ed7e4d345ac 100644 --- a/style/main.css +++ b/style/main.css @@ -1,643 +1,60 @@ -@import url(fonts/clear-sans.css); -html, body { - margin: 0; - padding: 0; - background: #faf8ef; - color: #776e65; - font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; - font-size: 18px; } - -body { - margin: 80px 0; } - -.heading:after { - content: ""; - display: block; - clear: both; } - -h1.title { - font-size: 80px; - font-weight: bold; - margin: 0; - display: block; - float: left; } - -@-webkit-keyframes move-up { - 0% { - top: 25px; - opacity: 1; } - - 100% { - top: -50px; - opacity: 0; } } - -@-moz-keyframes move-up { - 0% { - top: 25px; - opacity: 1; } - - 100% { - top: -50px; - opacity: 0; } } - -@keyframes move-up { - 0% { - top: 25px; - opacity: 1; } - - 100% { - top: -50px; - opacity: 0; } } - -.score-container { - position: relative; - float: right; - background: #bbada0; - padding: 15px 25px; - font-size: 25px; - height: 25px; - line-height: 47px; - font-weight: bold; - border-radius: 3px; - color: white; - margin-top: 8px; } - .score-container:after { - position: absolute; - width: 100%; - top: 10px; - left: 0; - content: "Score"; - text-transform: uppercase; - font-size: 13px; - line-height: 13px; - text-align: center; - color: #eee4da; } - .score-container .score-addition { - position: absolute; - right: 30px; - color: red; - font-size: 25px; - line-height: 25px; - font-weight: bold; - color: rgba(119, 110, 101, 0.9); - z-index: 100; - -webkit-animation: move-up 600ms ease-in; - -moz-animation: move-up 600ms ease-in; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; } - -p { - margin-top: 0; - margin-bottom: 10px; - line-height: 1.65; } - -a { - color: #776e65; - font-weight: bold; - text-decoration: underline; - cursor: pointer; } - -strong.important { - text-transform: uppercase; } - -hr { - border: none; - border-bottom: 1px solid #d8d4d0; - margin-top: 20px; - margin-bottom: 30px; } - -.container { - width: 500px; - margin: 0 auto; } - -@-webkit-keyframes fade-in { - 0% { - opacity: 0; } - - 100% { - opacity: 1; } } - -@-moz-keyframes fade-in { - 0% { - opacity: 0; } - - 100% { - opacity: 1; } } - -@keyframes fade-in { - 0% { - opacity: 0; } - - 100% { - opacity: 1; } } - -.game-container { - margin-top: 40px; - position: relative; - padding: 15px; - cursor: default; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - background: #bbada0; - border-radius: 6px; - width: 500px; - height: 500px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } - .game-container .game-message { - display: none; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba(238, 228, 218, 0.5); - z-index: 100; - text-align: center; - -webkit-animation: fade-in 800ms ease 1200ms; - -moz-animation: fade-in 800ms ease 1200ms; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; } - .game-container .game-message p { - font-size: 60px; - font-weight: bold; - height: 60px; - line-height: 60px; - margin-top: 222px; } - .game-container .game-message .lower { - display: block; - margin-top: 59px; } - .game-container .game-message a { - display: inline-block; - background: #8f7a66; - border-radius: 3px; - padding: 0 20px; - text-decoration: none; - color: #f9f6f2; - height: 40px; - line-height: 42px; - margin-left: 9px; } - .game-container .game-message .score-sharing { - display: inline-block; - vertical-align: middle; - margin-left: 10px; } - .game-container .game-message.game-won { - background: rgba(237, 194, 46, 0.5); - color: #f9f6f2; } - .game-container .game-message.game-won, .game-container .game-message.game-over { - display: block; } - -.grid-container { - position: absolute; - z-index: 1; } - -.grid-row { - margin-bottom: 15px; } - .grid-row:last-child { - margin-bottom: 0; } - .grid-row:after { - content: ""; - display: block; - clear: both; } - -.grid-cell { - width: 106.25px; - height: 106.25px; - margin-right: 15px; - float: left; - border-radius: 3px; - background: rgba(238, 228, 218, 0.35); } - .grid-cell:last-child { - margin-right: 0; } - -.tile-container { - position: absolute; - z-index: 2; } - -.tile { - width: 106.25px; - height: 106.25px; - line-height: 116.25px; } - .tile.tile-position-1-1 { - position: absolute; - left: 0px; - top: 0px; } - .tile.tile-position-1-2 { - position: absolute; - left: 0px; - top: 121px; } - .tile.tile-position-1-3 { - position: absolute; - left: 0px; - top: 243px; } - .tile.tile-position-1-4 { - position: absolute; - left: 0px; - top: 364px; } - .tile.tile-position-2-1 { - position: absolute; - left: 121px; - top: 0px; } - .tile.tile-position-2-2 { - position: absolute; - left: 121px; - top: 121px; } - .tile.tile-position-2-3 { - position: absolute; - left: 121px; - top: 243px; } - .tile.tile-position-2-4 { - position: absolute; - left: 121px; - top: 364px; } - .tile.tile-position-3-1 { - position: absolute; - left: 243px; - top: 0px; } - .tile.tile-position-3-2 { - position: absolute; - left: 243px; - top: 121px; } - .tile.tile-position-3-3 { - position: absolute; - left: 243px; - top: 243px; } - .tile.tile-position-3-4 { - position: absolute; - left: 243px; - top: 364px; } - .tile.tile-position-4-1 { - position: absolute; - left: 364px; - top: 0px; } - .tile.tile-position-4-2 { - position: absolute; - left: 364px; - top: 121px; } - .tile.tile-position-4-3 { - position: absolute; - left: 364px; - top: 243px; } - .tile.tile-position-4-4 { - position: absolute; - left: 364px; - top: 364px; } - -.tile { - border-radius: 3px; - background: #eee4da; - text-align: center; - font-weight: bold; - z-index: 10; - font-size: 55px; - -webkit-transition: 100ms ease-in-out; - -moz-transition: 100ms ease-in-out; - -webkit-transition-property: top, left; - -moz-transition-property: top, left; } - .tile.tile-2 { - 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: #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 { - color: #f9f6f2; - background: #f2b179; } - .tile.tile-16 { - color: #f9f6f2; - background: #f59563; } - .tile.tile-32 { - color: #f9f6f2; - background: #f67c5f; } - .tile.tile-64 { - color: #f9f6f2; - background: #f65e3b; } - .tile.tile-128 { - color: #f9f6f2; - 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) { - .tile.tile-128 { - font-size: 25px; } } - .tile.tile-256 { - color: #f9f6f2; - 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) { - .tile.tile-256 { - font-size: 25px; } } - .tile.tile-512 { - color: #f9f6f2; - 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) { - .tile.tile-512 { - font-size: 25px; } } - .tile.tile-1024 { - color: #f9f6f2; - 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) { - .tile.tile-1024 { - font-size: 15px; } } - .tile.tile-2048 { - color: #f9f6f2; - 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) { - .tile.tile-2048 { - font-size: 15px; } } - -@-webkit-keyframes appear { - 0% { - opacity: 0; - -webkit-transform: scale(0); - -moz-transform: scale(0); } - - 100% { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); } } - -@-moz-keyframes appear { - 0% { - opacity: 0; - -webkit-transform: scale(0); - -moz-transform: scale(0); } - - 100% { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); } } - -@keyframes appear { - 0% { - opacity: 0; - -webkit-transform: scale(0); - -moz-transform: scale(0); } - - 100% { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); } } - -.tile-new { - -webkit-animation: appear 200ms ease 100ms; - -moz-animation: appear 200ms ease 100ms; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; } - -@-webkit-keyframes pop { - 0% { - -webkit-transform: scale(0); - -moz-transform: scale(0); } - - 50% { - -webkit-transform: scale(1.2); - -moz-transform: scale(1.2); } - - 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); } } - -@-moz-keyframes pop { - 0% { - -webkit-transform: scale(0); - -moz-transform: scale(0); } - - 50% { - -webkit-transform: scale(1.2); - -moz-transform: scale(1.2); } - - 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); } } - -@keyframes pop { - 0% { - -webkit-transform: scale(0); - -moz-transform: scale(0); } - - 50% { - -webkit-transform: scale(1.2); - -moz-transform: scale(1.2); } - - 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); } } - -.tile-merged { - z-index: 20; - -webkit-animation: pop 200ms ease 100ms; - -moz-animation: pop 200ms ease 100ms; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; } - -.game-intro { - margin-bottom: 0; } - -.game-explanation { - margin-top: 50px; } - -.sharing { - margin-top: 20px; - text-align: center; } - .sharing > iframe, .sharing span { - display: inline-block; - vertical-align: middle; } - -@media screen and (max-width: 480px) { - html, body { - font-size: 15px; } - - body { - margin: 20px 0; - padding: 0 20px; } - - h1.title { - font-size: 50px; } - - .container { - width: 280px; - margin: 0 auto; } - - .score-container { - margin-top: 0; } - - .heading { - margin-bottom: 10px; } - - .game-container { - margin-top: 40px; - position: relative; - padding: 10px; - cursor: default; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - background: #bbada0; - border-radius: 6px; - width: 280px; - height: 280px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } - .game-container .game-message { - display: none; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba(238, 228, 218, 0.5); - z-index: 100; - text-align: center; - -webkit-animation: fade-in 800ms ease 1200ms; - -moz-animation: fade-in 800ms ease 1200ms; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; } - .game-container .game-message p { - font-size: 60px; - font-weight: bold; - height: 60px; - line-height: 60px; - margin-top: 222px; } - .game-container .game-message .lower { - display: block; - margin-top: 59px; } - .game-container .game-message a { - display: inline-block; - background: #8f7a66; - border-radius: 3px; - padding: 0 20px; - text-decoration: none; - color: #f9f6f2; - height: 40px; - line-height: 42px; - margin-left: 9px; } - .game-container .game-message .score-sharing { - display: inline-block; - vertical-align: middle; - margin-left: 10px; } - .game-container .game-message.game-won { - background: rgba(237, 194, 46, 0.5); - color: #f9f6f2; } - .game-container .game-message.game-won, .game-container .game-message.game-over { - display: block; } - - .grid-container { - position: absolute; - z-index: 1; } - - .grid-row { - margin-bottom: 10px; } - .grid-row:last-child { - margin-bottom: 0; } - .grid-row:after { - content: ""; - display: block; - clear: both; } - - .grid-cell { - width: 57.5px; - height: 57.5px; - margin-right: 10px; - float: left; - border-radius: 3px; - background: rgba(238, 228, 218, 0.35); } - .grid-cell:last-child { - margin-right: 0; } - - .tile-container { - position: absolute; - z-index: 2; } - - .tile { - width: 57.5px; - height: 57.5px; - line-height: 67.5px; } - .tile.tile-position-1-1 { - position: absolute; - left: 0px; - top: 0px; } - .tile.tile-position-1-2 { - position: absolute; - left: 0px; - top: 68px; } - .tile.tile-position-1-3 { - position: absolute; - left: 0px; - top: 135px; } - .tile.tile-position-1-4 { - position: absolute; - left: 0px; - top: 203px; } - .tile.tile-position-2-1 { - position: absolute; - left: 68px; - top: 0px; } - .tile.tile-position-2-2 { - position: absolute; - left: 68px; - top: 68px; } - .tile.tile-position-2-3 { - position: absolute; - left: 68px; - top: 135px; } - .tile.tile-position-2-4 { - position: absolute; - left: 68px; - top: 203px; } - .tile.tile-position-3-1 { - position: absolute; - left: 135px; - top: 0px; } - .tile.tile-position-3-2 { - position: absolute; - left: 135px; - top: 68px; } - .tile.tile-position-3-3 { - position: absolute; - left: 135px; - top: 135px; } - .tile.tile-position-3-4 { - position: absolute; - left: 135px; - top: 203px; } - .tile.tile-position-4-1 { - position: absolute; - left: 203px; - top: 0px; } - .tile.tile-position-4-2 { - position: absolute; - left: 203px; - top: 68px; } - .tile.tile-position-4-3 { - position: absolute; - left: 203px; - top: 135px; } - .tile.tile-position-4-4 { - position: absolute; - left: 203px; - top: 203px; } - - .game-container { - margin-top: 20px; } - - .tile { - font-size: 35px; } - - .game-message p { - font-size: 30px !important; - height: 30px !important; - line-height: 30px !important; - margin-top: 90px !important; } - .game-message .lower { - margin-top: 30px !important; } } +/* +Syntax error: Undefined mixin 'button'. + on line 492 of style/main.scss, in `button' + from line 492 of style/main.scss + +487: } +488: +489: // Bitcoin donate button +490: .btc-donate { +491: font-size: 14px; +492: @include button; +493: } + +Backtrace: +style/main.scss:492:in `button' +style/main.scss:492 +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:253:in `visit_mixin' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:37:in `visit' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:100:in `visit' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:53:in `block in visit_children' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:53:in `map' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:53:in `visit_children' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:121:in `with_environment' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:108:in `visit_children' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:37:in `block in visit' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:320:in `visit_rule' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:37:in `visit' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:100:in `visit' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:53:in `block in visit_children' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:53:in `map' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:53:in `visit_children' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:121:in `with_environment' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:108:in `visit_children' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:37:in `block in visit' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:128:in `visit_root' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/base.rb:37:in `visit' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:100:in `visit' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/visitors/perform.rb:7:in `visit' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/tree/root_node.rb:20:in `render' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/engine.rb:315:in `_render' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/engine.rb:262:in `render' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:362:in `update_stylesheet' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:203:in `block in update_stylesheets' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:201:in `each' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:201:in `update_stylesheets' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:283:in `block in watch' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/vendor/listen/lib/listen/multi_listener.rb:108:in `call' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/vendor/listen/lib/listen/multi_listener.rb:108:in `on_change' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/vendor/listen/lib/listen/multi_listener.rb:117:in `block in initialize_adapter' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/vendor/listen/lib/listen/adapter.rb:198:in `call' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/vendor/listen/lib/listen/adapter.rb:198:in `report_changes' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/vendor/listen/lib/listen/adapter.rb:210:in `poll_changed_dirs' +/Users/gabriele/.rvm/gems/ruby-2.1.0/gems/sass-3.2.14/vendor/listen/lib/listen/adapters/darwin.rb:38:in `block in start' +*/ +body:before { + white-space: pre; + font-family: monospace; + content: "Syntax error: Undefined mixin 'button'.\A on line 492 of style/main.scss, in `button'\A from line 492 of style/main.scss\A \A 487: }\A 488: \A 489: // Bitcoin donate button\A 490: .btc-donate {\A 491: font-size: 14px;\A 492: @include button;\A 493: }"; } diff --git a/style/main.scss b/style/main.scss index 9570ff3cf2bfff71b64713e5976e114f7816b941..404ac76ede2fe9d64731bf0e4f7353358ecbe155 100644 --- a/style/main.scss +++ b/style/main.scss @@ -485,3 +485,8 @@ hr { } } } + +// Bitcoin donate button +.btc-donate { + font-size: 14px; +}