Skip to content

Commit 7774259

Browse files
mirkobrombinmirkobrombin
committed
feat: Aug 2025 revamp + NLnet article
1 parent 1669d41 commit 7774259

20 files changed

+494
-529
lines changed

‎src/components/Article.astro‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@ const dateFormatted = new Date(date).toLocaleDateString('en-US', {
88
})
99
---
1010

11-
<a href={url} class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all block">
12-
<div class="relative p-6 flex gap-2 flex-col items-start">
13-
<h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white">{title}</h3>
14-
<p class="text-gray-600 dark:text-gray-300">{brief}</p>
15-
<span class="text-gray-500 dark:text-gray-400 text-sm bg-gray-200 dark:bg-gray-700 px-4 py-1 rounded-full mt-2 inline-block">{dateFormatted}</span>
16-
</div>
11+
<a href={url} class="md-card block hover:shadow-xl transition-all">
12+
<h3 class="text-2xl font-bold mb-2">{title}</h3>
13+
<p>{brief}</p>
14+
<span class="md-chip mt-2">{dateFormatted}</span>
1715
</a>

‎src/components/Footer.astro‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,32 @@ import { Icon } from "astro-icon/components";
33
---
44

55
<footer
6-
class="bg-white dark:bg-gray-800 border-t py-10 text-center mt-10 p-10 dark:border-gray-700"
6+
class="bg-[var(--md-sys-color-surface)] border-t py-10 text-center mt-10 p-10"
77
>
88
<div
99
class="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 text-left"
1010
>
1111
<!-- About -->
1212
<div>
13-
<h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">
13+
<h3 class="font-bold text-lg mb-3">
1414
About
1515
</h3>
16-
<p class="text-gray-600 dark:text-gray-400">
16+
<p>
1717
Bottles is free and open source software that uses environments to help
1818
you easily manage and run Windows apps on Linux.
1919
</p>
2020
</div>
2121

2222
<!-- Community -->
2323
<div>
24-
<h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">
24+
<h3 class="font-bold text-lg mb-3">
2525
Community
2626
</h3>
2727
<ul class="space-y-2">
2828
<li>
2929
<a
3030
href="https://github.com/orgs/bottlesdevs/discussions"
31-
class="flex items-center w-max text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
31+
class="flex items-center w-max hover:text-[var(--md-sys-color-primary)]"
3232
><Icon
3333
name="material-symbols:chat"
3434
class="w-5 h-5 mr-2"
@@ -37,97 +37,97 @@ import { Icon } from "astro-icon/components";
3737
<li>
3838
<a
3939
href="https://twitter.com/usebottles"
40-
class="flex items-center w-max text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
40+
class="flex items-center w-max hover:text-[var(--md-sys-color-primary)]"
4141
><Icon name="bxl:twitter" class="w-5 h-5 mr-2" />Twitter</a>
4242
</li>
4343
<li>
4444
<a
4545
href="https://discord.gg/wF4JAdYrTR"
46-
class="flex items-center w-max text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
46+
class="flex items-center w-max hover:text-[var(--md-sys-color-primary)]"
4747
><Icon name="bxl:discord" class="w-5 h-5 mr-2" />Discord</a>
4848
</li>
4949
<li>
5050
<a
5151
href="https://github.com/bottlesdevs"
52-
class="flex items-center w-max text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
52+
class="flex items-center w-max hover:text-[var(--md-sys-color-primary)]"
5353
><Icon name="bxl:github" class="w-5 h-5 mr-2" />GitHub</a>
5454
</li>
5555
</ul>
5656
</div>
5757

5858
<!-- Support -->
5959
<div>
60-
<h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">
60+
<h3 class="font-bold text-lg mb-3">
6161
Support
6262
</h3>
6363
<ul class="space-y-2">
6464
<li>
6565
<a
6666
href="https://docs.usebottles.com/"
67-
class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
67+
class="hover:text-[var(--md-sys-color-primary)]"
6868
>Documentation</a>
6969
</li>
7070
<li>
7171
<a
7272
href="https://github.com/bottlesdevs/Bottles/issues?q=is%3Aissue+label%3ABug"
73-
class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
73+
class="hover:text-[var(--md-sys-color-primary)]"
7474
>Report a bug</a>
7575
</li>
7676
<li>
7777
<a
7878
href="https://github.com/bottlesdevs/Bottles/issues?q=is%3Aissue+label%3A%22Feature+request%22"
79-
class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
79+
class="hover:text-[var(--md-sys-color-primary)]"
8080
>Request a feature</a>
8181
</li>
8282
<li>
8383
<a
8484
href="https://github.com/bottlesdevs/dependencies/issues"
85-
class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
85+
class="hover:text-[var(--md-sys-color-primary)]"
8686
>Report a dependency</a>
8787
</li>
8888
</ul>
8989
</div>
9090

9191
<!-- Others -->
9292
<div>
93-
<h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">
93+
<h3 class="font-bold text-lg mb-3">
9494
Others
9595
</h3>
9696
<ul class="space-y-2">
9797
<li>
9898
<a
9999
href="https://github.com/bottlesdevs/Bottles/blob/main/LICENSE"
100-
class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
100+
class="hover:text-[var(--md-sys-color-primary)]"
101101
>License (GPLv3)</a>
102102
</li>
103103
<li>
104104
<a
105105
href="/blog"
106-
class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
106+
class="hover:text-[var(--md-sys-color-primary)]"
107107
>Blog</a>
108108
</li>
109109
<li>
110110
<a
111111
href="/rss.xml"
112-
class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
112+
class="hover:text-[var(--md-sys-color-primary)]"
113113
>RSS Feed</a>
114114
</li>
115115
<li>
116116
<a
117117
href="/funding"
118-
class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
118+
class="hover:text-[var(--md-sys-color-primary)]"
119119
>Support Us</a>
120120
</li>
121121
</ul>
122122
</div>
123123
</div>
124124

125-
<div class="text-center text-gray-600 dark:text-gray-400 mb-20 mt-20">
126-
Made with <span class="text-red-600 dark:text-red-400">❤️</span> by Bottles Developers.
125+
<div class="text-center mb-20 mt-20">
126+
Made with <span class="text-red-600">❤️</span> by Bottles Developers.
127127
<br />
128128
<a
129129
href="https://fabricators.ltd"
130-
class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-400"
130+
class="hover:text-[var(--md-sys-color-primary)]"
131131
>sponsored by fabricators.ltd</a
132132
>
133133
</div>

‎src/components/GrantAnnouncement.astro‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
import { Icon } from "astro-icon/components";
3+
---
4+
5+
<section
6+
id="grant-banner"
7+
class="bg-gradient-to-r from-[var(--md-sys-color-secondary-container)] to-[var(--md-sys-color-tertiary-container)] py-6"
8+
>
9+
<div class="max-w-6xl mx-auto px-4">
10+
<div
11+
class="md-card relative flex items-start gap-4 bg-[var(--md-sys-color-tertiary-container)] text-[var(--md-sys-color-on-tertiary-container)]"
12+
>
13+
<Icon
14+
name="material-symbols:volunteer-activism"
15+
class="w-14 h-14 flex-shrink-0"
16+
/>
17+
<div class="flex-1">
18+
<h2 class="text-3xl font-bold mb-2">Bottles funded by NLnet</h2>
19+
<p class="text-lg">
20+
We\'re thrilled to join NLnet's 2025 Commons Fund. <a
21+
href="/posts/2025-08-04-nlnet-commons-fund/"
22+
class="underline font-semibold"
23+
>See what the grant enables →</a
24+
>
25+
</p>
26+
</div>
27+
<button
28+
id="grant-banner-close"
29+
aria-label="Dismiss"
30+
class="absolute top-4 right-4 p-2 rounded-full hover:bg-[var(--md-sys-color-on-tertiary-container)]/10"
31+
>
32+
<Icon name="material-symbols:close" class="w-6 h-6" />
33+
</button>
34+
</div>
35+
</div>
36+
</section>
37+
<script>
38+
const banner = document.getElementById("grant-banner");
39+
const close = document.getElementById("grant-banner-close");
40+
if (localStorage.getItem("grantBannerDismissed")) {
41+
banner?.classList.add("hidden");
42+
}
43+
close?.addEventListener("click", () => {
44+
banner?.classList.add("hidden");
45+
localStorage.setItem("grantBannerDismissed", "1");
46+
});
47+
</script>

0 commit comments

Comments
 (0)