Add gratipay

kirel · Oct 12, 2014 · 8b7cfa9 · 8b7cfa9
1 parent f4a372f
commit 8b7cfa9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/source/_paypal.haml b/source/_paypal.haml
@@ -2,6 +2,5 @@
   <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
   <input type="hidden" name="cmd" value="_s-xclick">
   <input type="hidden" name="hosted_button_id" value="H5F4G8JRRRRGA">
-  <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
-  <img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
+  <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online."><img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
   </form>
diff --git a/source/classify.haml b/source/classify.haml
@@ -41,9 +41,12 @@ js: classify
         %h3
           Did this help?
         %p Hosting Detexify costs money and if it helps you may consider helping to pay the hosting bill.
-        .paypal= partial 'paypal'
-        .flattr
-          %a.FlattrButton{:href => "http://detexify.kirelabs.org", :style => "display:none;", rev: "flattr;button:compact;"}
+        .donate-buttons
+          .paypal= partial 'paypal'
+          .flattr
+            %a.FlattrButton{:href => "http://detexify.kirelabs.org", :style => "display:none;", rev: "flattr;button:compact;"}
+          .gratipay
+            %script(data-gratipay-username="kirel" data-gratipay-widget="button" src="//gttp.co/v1.js")
   #classify--info-area
     %h2 What is this?
     %p
@@ -71,9 +74,12 @@ js: classify
       on Github.
       If you really, really like this
       you can also donate.
-    .paypal= partial 'paypal'
-    .flattr
-      %a.FlattrButton{:href => "http://detexify.kirelabs.org", :style => "display:none;", rev: "flattr;button:compact;"}
+    .donate-buttons
+      .paypal= partial 'paypal'
+      .flattr
+        %a.FlattrButton{:href => "http://detexify.kirelabs.org", :style => "display:none;", rev: "flattr;button:compact;"}
+      .gratipay
+        %script(data-gratipay-username="kirel" data-gratipay-widget="button" src="//gttp.co/v1.js")
     %p
       The backend server is running on <a href="https://www.digitalocean.com/?refcode=2ed6dc53403b">Digital Ocean (referral link)</a>
       so you can also reduce my hosting costs by using that referral link.

diff --git a/source/stylesheets/style.sass b/source/stylesheets/style.sass
@@ -81,12 +81,14 @@
 
 /*** Infoarea ***/
 
-#classify--info-area
-  .paypal, .flattr
-    width: 49%
-    display: inline-block
-    vertical-align: middle
-    text-align: center
+.donate-buttons
+  width: 100%
+  display: table
+.paypal, .flattr, .gratipay
+  height: 26px
+  display: table-cell
+  vertical-align: middle
+  text-align: center
 
 #donate
   color: gray
@@ -102,10 +104,6 @@
     font-size: rem(11)
     color: gray
     margin: $default-margin/2 0
-  .paypal, .flattr
-    display: inline-block
-    vertical-align: middle
-    text-align: center
 
 div#sponsors
   margin-top: 30px