diff --git a/index.html b/index.html index fb8ac7344869d2f90259cab60e3e1b5c5089a44c..09ce159fc93a393f566f13a2d82690f8d6ae34f5 100644 --- a/index.html +++ b/index.html @@ -80,12 +80,21 @@
Tweet + +
+ + + + +
+ - Donate + Donate BTC 1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i +
diff --git a/meta/icon_pp.svg b/meta/icon_pp.svg new file mode 100644 index 0000000000000000000000000000000000000000..50f2e2cd52c780b251adb36b19c185e4fbddbf10 --- /dev/null +++ b/meta/icon_pp.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/style/helpers.scss b/style/helpers.scss index a8f108c695aced23d16fbc14bd8e4e894d20e566..7d0a61d339971a6c2df14885e2967026213bb88f 100644 --- a/style/helpers.scss +++ b/style/helpers.scss @@ -60,3 +60,10 @@ @content; } } + +// Appearance +@mixin appearance($args...) { + -webkit-appearance: $args; + -moz-appearance: $args; + appearance: $args; +} diff --git a/style/main.css b/style/main.css index b9816bec8bafea61dd66b6b70f7711ea3ae95d41..79e5cc2955043abedf987b914001fe6b87b16e05 100644 --- a/style/main.css +++ b/style/main.css @@ -459,7 +459,7 @@ hr { .sharing { margin-top: 20px; text-align: center; } - .sharing > iframe, .sharing span { + .sharing > iframe, .sharing > span, .sharing > form { display: inline-block; vertical-align: middle; } @@ -653,7 +653,32 @@ hr { line-height: 30px !important; margin-top: 90px !important; } .game-message .lower { - margin-top: 30px !important; } } + margin-top: 30px !important; } + + .sharing > iframe, .sharing > span, .sharing > form { + display: block; + margin: 0 auto; + margin-bottom: 20px; } } +.pp-donate button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + font: inherit; + color: inherit; + cursor: pointer; + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; } + .pp-donate button img { + vertical-align: -4px; + margin-right: 8px; } + .btc-donate { position: relative; margin-left: 20px; @@ -711,11 +736,13 @@ hr { top: -45px; pointer-events: auto; } @media screen and (max-width: 480px) { - .btc-donate .address { - margin-right: -85px; - width: 300px; } - .btc-donate .address code { - font-size: 13px; } - .btc-donate .address:after { - left: 73%; - bottom: 2px; } } + .btc-donate { + width: 120px; } + .btc-donate .address { + margin-right: -150px; + width: 300px; } + .btc-donate .address code { + font-size: 13px; } + .btc-donate .address:after { + left: 50%; + bottom: 2px; } } diff --git a/style/main.scss b/style/main.scss index d7b1e2dd528f4b71c56437052ccc7384aee8eda9..7b80b642615cae5c0dee0ae41c47dab32b911ce9 100644 --- a/style/main.scss +++ b/style/main.scss @@ -438,7 +438,7 @@ hr { margin-top: 20px; text-align: center; - > iframe, span { + > iframe, > span, > form { display: inline-block; vertical-align: middle; } @@ -510,6 +510,31 @@ hr { margin-top: 30px !important; } } + + .sharing { + > iframe, > span, > form { + display: block; + margin: 0 auto; + margin-bottom: 20px; + } + } +} + +// PP Donate button +.pp-donate { + button { + @include appearance(none); + border: none; + font: inherit; + color: inherit; + cursor: pointer; + @include button; + + img { + vertical-align: -4px; + margin-right: 8px; + } + } } // Bitcoin donate button @@ -583,8 +608,10 @@ hr { // Styles for small screens @include smaller(480px) { - .address{ - margin-right: -85px; + width: 120px; + + .address { + margin-right: -150px; // background: red; width: 300px; @@ -593,7 +620,7 @@ hr { } &:after { - left: 73%; + left: 50%; bottom: 2px; } }