Skip to content

Commit 6718182

Browse files
mirkobrombinmirkobrombin
committed
restore: donation methods colors
1 parent 7774259 commit 6718182

File tree

3 files changed

+194
-172
lines changed

3 files changed

+194
-172
lines changed

‎src/components/GrantAnnouncement.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { Icon } from "astro-icon/components";
1717
<div class="flex-1">
1818
<h2 class="text-3xl font-bold mb-2">Bottles funded by NLnet</h2>
1919
<p class="text-lg">
20-
We\'re thrilled to join NLnet's 2025 Commons Fund. <a
20+
We're thrilled to join NLnet's 2025 Commons Fund. <a
2121
href="/posts/2025-08-04-nlnet-commons-fund/"
2222
class="underline font-semibold"
2323
>See what the grant enables →</a

‎src/pages/funding.astro‎

Lines changed: 85 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import { Icon } from "astro-icon/components";
44
---
55

66
<Layout title="Funding">
7-
<section class="py-20 bg-[var(--md-sys-color-surface)] text-[var(--md-sys-color-on-surface)]">
7+
<section
8+
class="py-20 bg-[var(--md-sys-color-surface)] text-[var(--md-sys-color-on-surface)]"
9+
>
810
<div class="container mx-auto px-4">
911
<h1 class="text-5xl font-bold mb-4">Funding</h1>
1012
<p class="text-lg">
@@ -17,7 +19,9 @@ import { Icon } from "astro-icon/components";
1719
</div>
1820
</section>
1921

20-
<section class="py-5 bg-[var(--md-sys-color-secondary-container)] text-[var(--md-sys-color-on-secondary-container)]">
22+
<section
23+
class="py-5 bg-[var(--md-sys-color-secondary-container)] text-[var(--md-sys-color-on-secondary-container)]"
24+
>
2125
<div class="container mx-auto px-4 mt-8">
2226
<h2 class="text-3xl font-bold mb-4">Why donate?</h2>
2327
<p class="text-lg mb-6">
@@ -34,9 +38,7 @@ import { Icon } from "astro-icon/components";
3438

3539
<div class="container mx-auto px-4 mt-8">
3640
<section class="py-5">
37-
<h2 class="text-3xl font-bold mb-4">
38-
How to donate
39-
</h2>
41+
<h2 class="text-3xl font-bold mb-4">How to donate</h2>
4042
<p class="text-lg mb-6">
4143
Here are the official channels from which you can donate to
4244
Bottles Developers.
@@ -50,6 +52,8 @@ import { Icon } from "astro-icon/components";
5052
linkText: "Sponsor via GitHub",
5153
linkUrl: "https://github.com/sponsors/bottlesdevs",
5254
icon: "material-symbols:favorite-outline",
55+
bgClass:
56+
"bg-[var(--md-sys-color-github)] text-[var(--md-sys-color-on-github)]",
5357
},
5458
{
5559
name: "PayPal",
@@ -62,27 +66,35 @@ import { Icon } from "astro-icon/components";
6266
oldLinkText: "Old PayPal Method",
6367
oldLinkUrl: "https://paypal.me/MirkoBrombin",
6468
icon: "material-symbols:credit-card-outline",
69+
bgClass:
70+
"bg-[var(--md-sys-color-paypal)] text-[var(--md-sys-color-on-paypal)]",
6571
},
6672
{
6773
name: "LiberaPay",
6874
flexible: true,
6975
linkText: "Donate via LiberaPay",
7076
linkUrl: "https://liberapay.com/bottles",
7177
icon: "material-symbols:volunteer-activism-outline",
78+
bgClass:
79+
"bg-[var(--md-sys-color-liberapay)] text-[var(--md-sys-color-on-liberapay)]",
7280
},
7381
{
7482
name: "Patreon",
7583
recurring: true,
7684
linkText: "Support via Patreon",
7785
linkUrl: "https://www.patreon.com/MirkoBrombin",
7886
icon: "material-symbols:favorite-outline",
87+
bgClass:
88+
"bg-[var(--md-sys-color-patreon)] text-[var(--md-sys-color-on-patreon)]",
7989
},
8090
{
8191
name: "Cryptocurrency",
8292
crypto: true,
8393
linkText: "View Addresses",
8494
linkUrl: "#",
8595
icon: "material-symbols:currency-bitcoin",
96+
bgClass:
97+
"bg-[var(--md-sys-color-cryptocurrency)] text-[var(--md-sys-color-on-cryptocurrency)]",
8698
},
8799
{
88100
name: "Polar.sh",
@@ -92,37 +104,43 @@ import { Icon } from "astro-icon/components";
92104
linkUrl:
93105
"https://buy.polar.sh/polar_cl_yKpkVQyu6SfCFKTRkxPl84tgKI93PIKwRbEWh1OnJ7v",
94106
icon: "material-symbols:toll",
107+
bgClass:
108+
"bg-[var(--md-sys-color-polar)] text-[var(--md-sys-color-on-polar)]",
95109
},
96110
].map((method) => (
97-
<div class="md-card text-center flex flex-col items-center">
111+
<div
112+
class={`md-card text-center flex flex-col items-center ${method.bgClass}`}
113+
>
98114
<Icon name={method.icon} class="w-8 h-8 mb-4" />
99115
<h3 class="text-2xl font-bold mb-2">
100116
{method.name}
101117
</h3>
102118

103-
{[
104-
"One-Time / Recurring",
105-
"Recurring",
106-
"One-Time",
107-
"Preferred Method",
108-
"Flexible Subscription",
109-
"Bitcoin, Ethereum, and more",
110-
].map((text, index) => {
111-
const conditions = [
112-
method.recurring && method.oneTime,
113-
method.recurring && !method.oneTime,
114-
method.oneTime && !method.recurring,
115-
method.preferred,
116-
method.flexible,
117-
method.crypto,
118-
];
119-
const condition = conditions[index];
120-
return condition ? (
121-
<span class="bg-[var(--md-sys-color-primary)]/20 text-[var(--md-sys-color-primary)] px-2 py-1 rounded-full text-sm inline-block mb-4">
122-
{text}
123-
</span>
124-
) : null;
125-
})}
119+
<div class="flex flex-wrap justify-center gap-2 mb-4">
120+
{[
121+
"One-Time / Recurring",
122+
"Recurring",
123+
"One-Time",
124+
"Preferred Method",
125+
"Flexible Subscription",
126+
"Bitcoin, Ethereum, and more",
127+
].map((text, index) => {
128+
const conditions = [
129+
method.recurring && method.oneTime,
130+
method.recurring && !method.oneTime,
131+
method.oneTime && !method.recurring,
132+
method.preferred,
133+
method.flexible,
134+
method.crypto,
135+
];
136+
const condition = conditions[index];
137+
return condition ? (
138+
<span class="bg-black/20 text-white px-2 py-1 rounded-full text-sm">
139+
{text}
140+
</span>
141+
) : null;
142+
})}
143+
</div>
126144

127145
<a
128146
href={method.crypto ? "#" : method.linkUrl}
@@ -138,7 +156,7 @@ import { Icon } from "astro-icon/components";
138156
{method.oldLinkText ? (
139157
<a
140158
href={method.oldLinkUrl}
141-
class="mt-4 text-[var(--md-sys-color-primary)] underline"
159+
class="mt-4 text-white underline"
142160
>
143161
{method.oldLinkText}
144162
</a>
@@ -149,9 +167,16 @@ import { Icon } from "astro-icon/components";
149167
))
150168
}
151169

152-
<div id="cryptoModal" class="fixed inset-0 bg-black/50 flex items-center justify-center hidden z-20">
153-
<div class="md-card m-5 text-center overflow-y-auto max-h-[80vh]">
154-
<h2 class="text-3xl font-bold mb-4">Cryptocurrency Addresses</h2>
170+
<div
171+
id="cryptoModal"
172+
class="fixed inset-0 bg-black/50 flex items-center justify-center hidden z-20"
173+
>
174+
<div
175+
class="md-card m-5 text-center overflow-y-auto max-h-[80vh]"
176+
>
177+
<h2 class="text-3xl font-bold mb-4">
178+
Cryptocurrency Addresses
179+
</h2>
155180
<p class="text-lg mb-4">
156181
You can donate using the following cryptocurrency
157182
addresses.
@@ -239,7 +264,9 @@ import { Icon } from "astro-icon/components";
239264
class="sticky z-10 bg-[var(--md-sys-color-surface)] border-b border-[var(--md-sys-color-surface-container)] py-4"
240265
style="top: 72px;"
241266
>
242-
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-4">
267+
<div
268+
class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-4"
269+
>
243270
<div class="flex flex-wrap items-center gap-2">
244271
{
245272
[
@@ -258,7 +285,9 @@ import { Icon } from "astro-icon/components";
258285
))
259286
}
260287
</div>
261-
<div class="flex flex-col md:flex-row items-center gap-2 w-full md:w-auto">
288+
<div
289+
class="flex flex-col md:flex-row items-center gap-2 w-full md:w-auto"
290+
>
262291
<input
263292
type="text"
264293
id="searchInput"
@@ -301,9 +330,7 @@ import { Icon } from "astro-icon/components";
301330
class="w-6 h-6"
302331
title={icon.title}
303332
/>
304-
<span>
305-
{icon.text}
306-
</span>
333+
<span>{icon.text}</span>
307334
</div>
308335
))
309336
}
@@ -478,78 +505,45 @@ import { Icon } from "astro-icon/components";
478505
</section>
479506

480507
<section class="py-5">
481-
<h2
482-
class="text-3xl font-bold mb-4"
483-
>
508+
<h2 class="text-3xl font-bold mb-4">
484509
Thanks to them who made a donation or became our GitHub
485510
sponsor ❤️!
486511
</h2>
487512
<div class="flex flex-wrap mb-8 mt-8 gap-4" id="github"></div>
488-
<h3
489-
class="text-2xl font-bold mb-4"
490-
>
491-
Liberapay
492-
</h3>
513+
<h3 class="text-2xl font-bold mb-4">Liberapay</h3>
493514
<div class="flex flex-wrap mb-8 mt-8 gap-4" id="liberapay">
494515
</div>
495-
<h3
496-
class="text-2xl font-bold mb-4"
497-
>
498-
Other platforms
499-
</h3>
516+
<h3 class="text-2xl font-bold mb-4">Other platforms</h3>
500517
<div class="flex flex-wrap mb-8 gap-4" id="other"></div>
501-
<p class="text-center">
502-
- Thanks from the Bottles Developers.
503-
</p>
518+
<p class="text-center">- Thanks from the Bottles Developers.</p>
504519
</section>
505520
</section>
506521

507522
<div
508523
id="donationModal"
509524
class="fixed inset-0 bg-[var(--md-sys-color-on-background)]/30 flex items-center justify-center hidden z-20"
510525
>
511-
<div
512-
class="md-card p-8 m-5 text-center"
513-
>
514-
<h2
515-
class="text-3xl font-bold mb-4"
516-
>
517-
Thank You!
518-
</h2>
526+
<div class="md-card p-8 m-5 text-center">
527+
<h2 class="text-3xl font-bold mb-4">Thank You!</h2>
519528
<p class="text-lg mb-4">
520529
We sincerely appreciate your donation. Your support helps us
521530
keep Bottles growing and improving.
522531
</p>
523-
<button
524-
id="closeModal"
525-
class="md-filled-button"
526-
>Close</button
527-
>
532+
<button id="closeModal" class="md-filled-button">Close</button>
528533
</div>
529534
</div>
530535

531536
<div
532537
id="infoModal"
533538
class="fixed inset-0 bg-[var(--md-sys-color-on-background)]/30 flex items-center justify-center hidden z-20"
534539
>
535-
<div
536-
class="md-card p-8 m-5 text-center"
537-
>
538-
<h2
539-
class="text-3xl font-bold mb-4"
540-
>
541-
Progress Information
542-
</h2>
543-
<p
544-
id="infoModalText"
545-
class="text-lg mb-4"
546-
>
540+
<div class="md-card p-8 m-5 text-center">
541+
<h2 class="text-3xl font-bold mb-4">Progress Information</h2>
542+
<p id="infoModalText" class="text-lg mb-4">
547543
Progress is calculated based on the completion status of
548544
each task.
549545
</p>
550-
<button
551-
id="closeInfoModal"
552-
class="md-filled-button"
546+
<button id="closeInfoModal" class="md-filled-button"
553547
>Close</button
554548
>
555549
</div>
@@ -776,15 +770,15 @@ import { Icon } from "astro-icon/components";
776770
currentStatusFilter = status;
777771
filterButtons.forEach((btn) => {
778772
const bb = btn as HTMLElement;
779-
bb.classList.remove(
780-
"active",
781-
"bg-blue-500",
782-
"text-white",
783-
);
784-
bb.classList.add(
785-
"bg-[var(--md-sys-color-surface-container)]",
786-
"text-[var(--md-sys-color-on-surface)]",
787-
);
773+
bb.classList.remove(
774+
"active",
775+
"bg-blue-500",
776+
"text-white",
777+
);
778+
bb.classList.add(
779+
"bg-[var(--md-sys-color-surface-container)]",
780+
"text-[var(--md-sys-color-on-surface)]",
781+
);
788782
});
789783
b.classList.add("active", "bg-blue-500", "text-white");
790784
b.classList.remove(

0 commit comments

Comments
 (0)