add paypal donate button

index.html

@@ -80,12 +80,21 @@
     <div class="sharing">
       <a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out 2048, a game where you join numbers to score high! #2048game" data-via="gabrielecirulli">Tweet</a>
       <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+
+      <form class="pp-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
+        <input type="hidden" name="cmd" value="_s-xclick">
+        <input type="hidden" name="hosted_button_id" value="W59BD72T97DVC">
+        <button name="submit"><img src="meta/icon_PP.svg">Donate</button>
+        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
+      </form>
+
       <span class="btc-donate">
         <a href="bitcoin:1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i">
-          <img src="meta/icon_bitcoin.svg">Donate
+          <img src="meta/icon_bitcoin.svg">Donate BTC
         </a>
         <span class="address"><code>1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i</code></span>
       </span>
+
     </div>
   </div>
 

meta/icon_pp.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+<g>
+	<circle fill="#FFFFFF" cx="10" cy="10" r="10"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#195A7F" d="M12.3,4.8h-5L5,15h3l0.7-3.4h2.1c2,0,3.7-1.2,4.2-3.4
+	C15.5,5.9,13.8,4.8,12.3,4.8z M12.2,8.3c-0.2,0.8-0.9,1.4-1.7,1.4H9.1l0.6-2.8h1.4C11.9,6.9,12.4,7.5,12.2,8.3z"/>
+</svg>

style/helpers.scss

@@ -60,3 +60,10 @@
     @content;
   }
 }
+
+// Appearance
+@mixin appearance($args...) {
+  -webkit-appearance: $args;
+  -moz-appearance: $args;
+  appearance: $args;
+}

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 {
+    .btc-donate {
-      margin-right: -85px;
+      width: 120px; }
-      width: 300px; }
+      .btc-donate .address {
-      .btc-donate .address code {
+        margin-right: -150px;
-        font-size: 13px; }
+        width: 300px; }
-      .btc-donate .address:after {
+        .btc-donate .address code {
-        left: 73%;
+          font-size: 13px; }
-        bottom: 2px; } }
+        .btc-donate .address:after {
+          left: 50%;
+          bottom: 2px; } }

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{
+    width: 120px;
-      margin-right: -85px;
+
+    .address {
+      margin-right: -150px;
       // background: red;
       width: 300px;
 
@@ -593,7 +620,7 @@ hr {
       }
 
       &:after {
-        left: 73%;
+        left: 50%;
         bottom: 2px;
       }
     }