diff --git a/style/main.css b/style/main.css index f305c36fd7f9041c5053ced5f2c06ed7e4d345ac..8e56bb6d107a265f9586c38a43b329cbd5a206f1 100644 --- a/style/main.css +++ b/style/main.css @@ -1,60 +1,645 @@ -/* -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: }"; } +@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; } } +.btc-donate { + font-size: 14px; } diff --git a/style/main.scss b/style/main.scss index 404ac76ede2fe9d64731bf0e4f7353358ecbe155..00dd8d49f175dfbc0dd4240ced8969c900ec418d 100644 --- a/style/main.scss +++ b/style/main.scss @@ -141,6 +141,18 @@ hr { } } +// Styles for buttons +@mixin button { + display: inline-block; + background: darken($game-container-background, 20%); + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: $bright-text-color; + height: 40px; + line-height: 42px; +} + // Game field mixin used to render CSS at different width @mixin game-field { .game-container { @@ -190,14 +202,7 @@ hr { } a { - display: inline-block; - background: darken($game-container-background, 20%); - border-radius: 3px; - padding: 0 20px; - text-decoration: none; - color: $bright-text-color; - height: 40px; - line-height: 42px; + @include button; margin-left: 9px; // margin-top: 59px; }