Clean up donate banner

* Rephrased donation plea
* Added Flattr
* Moved donate buttons into a single row
* Change donate buttons to a unified system
* Get rid of paypal's shitty encrypted <form>, replace with link
* Add a label and message to the bitcoin URL

5 files changed, 58 insertions, 12 deletions

diff --git a/css/pomf.css b/css/pomf.css
index a6da8f0..ad85f19 100644
--- a/css/pomf.css
+++ b/css/pomf.css
@@ -129,12 +129,48 @@ a:focus {
 	border-color: #BCE8F1;
 	color: #3A87AD;
 }
-a.btc {
-	font-weight: bold;
-	color: #B94A48;
+
+/**
+ * DONATION BUTTONS
+ */
+span.donate-btns {
+	display: block;
+	text-align: center;
+	margin: 11px 0 3px;
 }
-a.btc:hover {
-	color: #891A18;
+a.donate-btn {
+	height: 26px;
+	display: inline-block;
+	margin: 2px 5px;
+	background: hsl(0, 0%, 95%);
+	line-height: 16px;
+	padding: 3px 8px 3px 24px;
+	border-radius: 3px;
+	color: hsl(0, 0%, 25%);
+	border: 1px solid hsl(0, 0%, 85%);
+	transition: all .2s;
+}
+a.donate-btn:hover {
+	color: #000;
+	border: 1px solid hsl(0, 0%, 70%);
+	background-color: hsl(0, 0%, 80%);
+}
+.icon {
+	display: block;
+	height: 16px;
+	width: 16px;
+	float: left;
+	margin-left: -20px;
+	margin-top: 1px;
+}
+.icon-paypal {
+	background-image: url('img/paypal.png');
+}
+.icon-bitcoin {
+	background-image: url('img/bitcoin.png');
+}
+.icon-flattr {
+	background-image: url('img/flattr.png');
 }
 
 /**
diff --git a/img/bitcoin.png b/img/bitcoin.png
new file mode 100644
index 0000000..85e491b
--- /dev/null
+++ b/img/bitcoin.png
diff --git a/img/flattr.png b/img/flattr.png
new file mode 100644
index 0000000..7205695
--- /dev/null
+++ b/img/flattr.png
diff --git a/img/paypal.png b/img/paypal.png
new file mode 100644
index 0000000..dd8da81
--- /dev/null
+++ b/img/paypal.png
diff --git a/pages/banners/donate.swig b/pages/banners/donate.swig
index 9930b63..09a1f4d 100644
--- a/pages/banners/donate.swig
+++ b/pages/banners/donate.swig
@@ -1,7 +1,17 @@
-<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
-	<p class="alert alert-error">
-		<input type="hidden" name="cmd" value="_s-xclick">
-		<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
-		<strong>Look here!</strong> Please <input type="image" src="img/donate.png" name="submit" alt="donate"> to cover server costs, even $1 is appreciated. We accept Paypal via the donate button and bitcoins to <a class="btc" href="bitcoin:1Hb5Xnn5vEJaH1atkJvzqFJq2DK3MAENWD">1Hb5Xnn5vEJaH1atkJvzqFJq2DK3MAENWD</a>
-	</p>
-</form>
+<p class="alert alert-error">
+	<strong>pomf.se is a free service, but our hosting bill isn't</strong> &mdash; we need almost $100 a month for that.  Donations help keep pomf.se free, online, and fast.  Everything (after fees) goes to the hosting bill.
+	<span class="donate-btns">
+		<a class="donate-btn donate-paypal" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=BHUVEZY96YZ6N" target="_BLANK">
+			<span class="icon icon-paypal"></span>
+			PayPal
+		</a>
+		<a class="donate-btn donate-bitcoin" href="bitcoin:1Hb5Xnn5vEJaH1atkJvzqFJq2DK3MAENWD?label=pomf.se&amp;message=Hosting%20Bills" target="_BLANK">
+			<span class="icon icon-bitcoin"></span>
+			Bitcoin
+		</a>
+		<a class="donate-btn donate-flattr" href="https://flattr.com/submit/auto?user_id=neku&amp;url=http://pomf.se" target="_BLANK">
+			<span class="icon icon-flattr"></span>
+			Flattr
+		</a>
+	</span>
+</p>