From aab1c7cb610275dab82b8b12163abe164516fee6 Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Wed, 8 Mar 2023 12:28:45 +0100
Subject: [PATCH] feat: Add kofi button

---
 static-src/styles.css | 34 ++++++++++++++++++++++++++++++----
 views/index.pug       |  9 ++++++---
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/static-src/styles.css b/static-src/styles.css
index 4075514..e8ab930 100644
--- a/static-src/styles.css
+++ b/static-src/styles.css
@@ -572,16 +572,42 @@ input[type="button"]:hover, input[type="submit"]:hover, button:hover, a.button:h
 a.button i {
   font-size: 1.4em;
 }
-a.button.button--liberapay {
+a.button--donate {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: 12px;
   padding: 8px 16px;
   font-size: 0.95rem;
-  color: #333;
-  background-color: #ffee16;
   border: 0;
 }
-a.button.button--liberapay:hover {
+a.button--donate svg {
+  width: 24px;
+  height: 24px;
+  fill: var(--text-color);
+}
+a.button--donate.button--liberapay {
+  color: #333;
+  background-color: #ffee16;
+}
+a.button--donate.button--liberapay svg {
+  fill: #333;
+}
+a.button--donate.button--liberapay:hover {
+  color: #333;
   background-color: #fff463;
 }
+a.button--donate.button--kofi {
+  color: #333;
+  background-color: #1ac0ff;
+}
+a.button--donate.button--kofi svg {
+  fill: #333;
+}
+a.button--donate.button--kofi:hover {
+  color: #333;
+  background-color: #66d4ff;
+}
 button.inline {
   min-height: auto;
   margin: 0;
diff --git a/views/index.pug b/views/index.pug
index 38d3047..3456f9c 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -90,6 +90,9 @@ block content
     p
       | We rely on your support to keep working on Big Tech-independent secure online identity.
     p
-      a.button.button--liberapay(href='https://liberapay.com/Keyoxide/')
-        i(class='fa fa-liberapay' aria-hidden='true')
-        |  Donate via Liberapay
\ No newline at end of file
+      a.button.button--donate.button--liberapay(href='https://liberapay.com/Keyoxide/')
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 32 32"><path d="M3.093 0A3.093 3.093 0 0 0 0 3.093v25.813a3.093 3.093 0 0 0 3.093 3.093h25.813a3.093 3.093 0 0 0 3.093-3.093V3.093A3.093 3.093 0 0 0 28.906 0zm12.276 5.307L12.344 17.85a4.056 4.056 0 0 0-.099.719c-.011.197.031.396.119.572a.926.926 0 0 0 .448.401c.209.104.505.172.881.199l-.652 2.676c-1.031 0-1.844-.129-2.427-.4c-.588-.271-1.011-.636-1.265-1.099a3.245 3.245 0 0 1-.371-1.6a9.035 9.035 0 0 1 .251-1.927l2.765-11.563zm5.204 5.182c.812 0 1.509.125 2.099.371a3.862 3.862 0 0 1 1.448 1.015c.375.428.656.928.839 1.5c.181.573.271 1.188.271 1.839c0 1.057-.172 2.027-.521 2.907a6.915 6.915 0 0 1-1.448 2.276a6.49 6.49 0 0 1-2.224 1.489c-.859.355-1.801.531-2.817.531c-.489 0-.984-.041-1.479-.129l-.98 3.943h-3.224l3.615-15.063a17.858 17.858 0 0 1 1.989-.469c.803-.14 1.615-.213 2.433-.208zm-.417 2.724a6.07 6.07 0 0 0-1.307.131l-1.521 6.333c.245.063.547.088.912.088c.567 0 1.083-.104 1.547-.317a3.463 3.463 0 0 0 1.187-.88a4.07 4.07 0 0 0 .761-1.36a5.308 5.308 0 0 0 .271-1.755c0-.625-.136-1.151-.412-1.589c-.276-.432-.755-.651-1.437-.651z"></path></svg>
+        |  Donate via Liberapay
+      a.button.button--donate.button--kofi(href='https://ko-fi.com/keyoxide/')
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 32 32"><path d="M31.844 11.932c-1.032-5.448-6.48-6.125-6.48-6.125H.964C.156 5.807.057 6.87.057 6.87S-.052 16.637.03 22.637c.22 3.228 3.448 3.561 3.448 3.561s11.021-.031 15.953-.067c3.251-.568 3.579-3.423 3.541-4.98c5.808.323 9.896-3.776 8.871-9.219zm-14.751 4.683c-1.661 1.932-5.348 5.297-5.348 5.297s-.161.161-.417.031c-.099-.073-.14-.12-.14-.12c-.595-.588-4.491-4.063-5.381-5.271c-.943-1.287-1.385-3.599-.119-4.948c1.265-1.344 4.005-1.448 5.817.541c0 0 2.083-2.375 4.625-1.281c2.536 1.095 2.443 4.016.963 5.751zm8.23.636c-1.24.156-2.244.036-2.244.036V9.714h2.359s2.631.735 2.631 3.516c0 2.552-1.313 3.557-2.745 4.021z"></path></svg>
+        |  Donate via Ko-fi
\ No newline at end of file