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

This commit is contained in:
Alexis Werefox 2021-04-29 23:44:34 +00:00
parent e364ed1019
commit f179852f33
2 changed files with 33 additions and 10 deletions

View File

@ -13,9 +13,9 @@ export default function Support() {
support my way!! 💙 support my way!! 💙
</p> </p>
<p className="text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue"> <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> </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"> <Link href="https://www.patreon.com/bePatron?u=16333959">
<a target="_blank"> <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"> <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> </a>
</Link> </Link>
</div> </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"> <div className="w-full justify-center flex">
<Link href="https://liberapay.com/shadow8t4/donate"> <Link href="https://liberapay.com/shadow8t4/donate">
<a <a
@ -45,14 +61,21 @@ export default function Support() {
</a> </a>
</Link> </Link>
</div> </div>
<div className="pb-6 flex justify-center"> <div className="p-1 pb-6 flex justify-center overflow-auto">
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker overflow-auto"> <details>
<Iframe <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">
className="rounded-lg w-96 min-w-96" <strong>Open/Close Ko-fi Donation Widget</strong>
url="https://ko-fi.com/shadow8t4/?hidefeed=true&widget=true&embed=true&preview=true" </summary>
height="680" <div className="pt-2 pb-6 flex justify-center">
></Iframe> <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker overflow-auto">
</div> <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>
</div> </div>
</WCard> </WCard>

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB