From 28aa18b713a34214f754491b49a7bd0c7a5332f5 Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Mon, 8 Nov 2021 18:28:32 +0100
Subject: [PATCH] redesign donation buttons

---
 main/_includes/projects.html |  6 +++---
 main/index.html              | 20 ++++++++++++++------
 main/style/style.css         | 14 --------------
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/main/_includes/projects.html b/main/_includes/projects.html
index 5e01619..e0674de 100644
--- a/main/_includes/projects.html
+++ b/main/_includes/projects.html
@@ -18,7 +18,7 @@
                 {% endif %}
 
                 {%- for link in item.links -%}
-                <a href="{{ link.link }}" class="card-link btn rounded-0 btn-outline-info">{{ link.name }}</a>
+                <a href="{{ link.link }}" class="card-link btn rounded-0 btn-outline-dark">{{ link.name }}</a>
                 {%- endfor -%}
             </div>
         </div>
@@ -26,9 +26,9 @@
     </div>
     <script>
         if (dark) {
-            $("#project-list").find(".btn-outline-info").each(function () {
+            $("#project-list").find(".btn-outline-dark").each(function () {
                 let e = $(this);
-                e.removeClass("btn-outline-info");
+                e.removeClass("btn-outline-dark");
                 e.addClass("btn-outline-light");
             });
         }
diff --git a/main/index.html b/main/index.html
index ed17db8..df48290 100644
--- a/main/index.html
+++ b/main/index.html
@@ -17,13 +17,21 @@ nav: nav/indexnav.html
                 <script src="./scripts/greet.js"></script>
                 <p class="lead">Welcome to my little website! I'm Ellpeck, a student and programmer from Germany. I do a lot of stuff, actually. My life is pretty busy.</p>
 
-                <!-- Sponsor buttons -->
-                <div class="sellout">
-                    <iframe src="https://github.com/sponsors/Ellpeck/button" title="Sponsor Ellpeck" height="32" width="116" style="border: 0; margin-right: 10px;"></iframe>
-                    <a href="https://www.patreon.com/bePatron?u=2494595" class="patreon-button" style="padding: 5px;">
-                        <img src="./res/becomePatron.png" width="auto" height="34px" alt="Become a patron">
-                    </a>
+                <!-- Donation buttons -->
+                <div id="donation-buttons">
+                    <a href="https://github.com/sponsors/Ellpeck" class="card-link btn rounded-0 btn-outline-primary">Sponsor on GitHub</a>
+                    <a href="https://patreon.com/Ellpeck" class="card-link btn rounded-0 btn-outline-primary">Become a Patron</a>
+                    <a href="https://ko-fi.com/ellpeck" class="card-link btn rounded-0 btn-outline-primary">Buy me a Coffee</a>
                 </div>
+                <script>
+                    if (dark) {
+                        $("#donation-buttons").find(".btn-outline-primary").each(function () {
+                            let e = $(this);
+                            e.removeClass("btn-outline-primary");
+                            e.addClass("btn-outline-info");
+                        });
+                    }
+                </script>
             </div>
         </div>
     </div>
diff --git a/main/style/style.css b/main/style/style.css
index 8d7ccdf..8be9c88 100644
--- a/main/style/style.css
+++ b/main/style/style.css
@@ -209,11 +209,6 @@ blockquote {
     font-style: italic;
 }
 
-.sellout {
-    display: flex;
-    align-items: center;
-}
-
 .patreon-button :hover {
     filter: saturate(130%);
 }
@@ -252,15 +247,6 @@ blockquote {
         right: auto;
         top: auto;
     }
-
-    .sellout {
-        flex-direction: column;
-    }
-
-    .sellout iframe {
-        margin-bottom: 10px;
-        margin-right: 0 !important;
-    }
 }
 
 @media (max-width: 510px) {