Add donation button

static/styles.css

@@ -445,6 +445,7 @@ form input[type="radio"]:checked + label {
 }
 
 input[type="button"], input[type="submit"], button, a.button {
+  display: inline-block;
   min-height: 36px;
   margin: 8px 0;
   padding: 4px 8px;
@@ -463,6 +464,19 @@ input[type="button"]:hover, input[type="submit"]:hover, button:hover, a.button:h
   border-color: var(--purple-500);
   color: #fff;
 }
+a.button i {
+  font-size: 1.4em;
+}
+a.button.button--liberapay {
+  padding: 8px 16px;
+  font-size: 0.95rem;
+  color: #333;
+  background-color: #ffee16;
+  border: 0;
+}
+a.button.button--liberapay:hover {
+  background-color: #fff463;
+}
 
 /* DIALOGS */
 dialog {

views/index.pug

@@ -68,3 +68,19 @@ block content
       h3 Transparent funding
       p Funded by donations. Keyoxide stands against VC and surveillance capitalism. 
         a(href='/about#funding-and-the-flow-of-money') Read more
+
+  h2 Fund the project
+  .narrow
+    .card
+      p
+        | The development of Keyoxide and the Decentralized OpenPGP Identity Proofs ecosystem is entirely funded by donations.
+      p
+        | The Keyoxide project was awarded a NGI Zero grant from the 
+        a(href='https://nlnet.nl/') NLnet Foundation
+        | .
+      p
+        | We rely on your support to keep working on secure online identity and fight Big Tech's grasp on the internet.
+      p
+        a.button.button--liberapay(href='https://liberapay.com/Keyoxide/')
+          i(class='fa fa-liberapay' aria-hidden='true')
+          |  Donate via Liberapay

views/templates/base.pug

@@ -4,8 +4,9 @@ head
   meta(name='viewport' content='width=device-width, initial-scale=1')
   meta(name='theme-color' content='#fff')
   link(rel='shortcut icon' href='/favicon.svg')
-  title= (title ? title : "Keyoxide")
+  title= (title ? title : 'Keyoxide')
   link(rel='stylesheet' href='/static/styles.css')
+  link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css' integrity='sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=' crossorigin='anonymous')
   block css
 
 include ../partials/header.pug