Added ko-fi button, allowed ko-fi donation widget to be closed when not accessible.

src/info/pages/support/index.js

@@ -13,9 +13,9 @@ export default function Support() {
             support my way!! 💙
           </p>
           <p className="text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
-            You could support me through Patreon, Liberapay, or Ko-fi
+            You could support me through Patreon, Ko-fi, or Liberapay
           </p>
-          <div className="w-full justify-center flex hover-werefox-pink">
+          <div className="w-full justify-center flex">
             <Link href="https://www.patreon.com/bePatron?u=16333959">
               <a target="_blank">
                 <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
@@ -31,6 +31,22 @@ export default function Support() {
               </a>
             </Link>
           </div>
+          <div className="w-full justify-center flex">
+            <Link href="https://ko-fi.com/O5O61UAY1">
+              <a target="_blank">
+                <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+                  <span>
+                    <img
+                      alt="Buy Alexis a Coffee"
+                      src="/images/kofi_logo.png"
+                      className="inline-flex h-6"
+                    ></img>
+                  </span>{" "}
+                  Buy me a Coffee!
+                </p>
+              </a>
+            </Link>
+          </div>
           <div className="w-full justify-center flex">
             <Link href="https://liberapay.com/shadow8t4/donate">
               <a
@@ -45,14 +61,21 @@ export default function Support() {
               </a>
             </Link>
           </div>
-          <div className="pb-6 flex justify-center">
-            <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker overflow-auto">
-              <Iframe
-                className="rounded-lg w-96 min-w-96"
-                url="https://ko-fi.com/shadow8t4/?hidefeed=true&widget=true&embed=true&preview=true"
-                height="680"
-              ></Iframe>
-            </div>
+          <div className="p-1 pb-6 flex justify-center overflow-auto">
+            <details>
+              <summary className="p-2 pl-4 pr-4 rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker text-md text-center text-werefox-grey-darker dark:text-werefox-grey-lighter bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+                <strong>Open/Close Ko-fi Donation Widget</strong>
+              </summary>
+              <div className="pt-2 pb-6 flex justify-center">
+                <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker overflow-auto">
+                  <Iframe
+                    className="rounded-lg w-96 min-w-96"
+                    url="https://ko-fi.com/alexis_werefox/?hidefeed=true&widget=true&embed=true&preview=true"
+                    height="680"
+                  ></Iframe>
+                </div>
+              </div>
+            </details>
           </div>
         </div>
       </WCard>