Skip to content

Commit 28b59b3

Browse files
authored
feat: acknowledge BoostMania sponsor and link GitHub Sponsors (#210)
2 parents b5c68ed + 6d2781f commit 28b59b3

5 files changed

Lines changed: 133 additions & 41 deletions

File tree

.gitignore

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,4 +111,8 @@ dist
111111
.tern-port
112112

113113
# MacOS directory
114-
.DS_Store
114+
.DS_Store
115+
116+
# Local planning artifacts
117+
docs/brainstorms/
118+
docs/plans/
2.89 KB
Loading

src/components/Footer.astro

Lines changed: 69 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
---
2+
import GitHubIcon from './icons/GitHubIcon.astro';
3+
24
interface Props {
35
discordMembers?: string;
46
}
@@ -50,20 +52,38 @@ const year = new Date().getFullYear();
5052
</li>
5153
</ul>
5254
</div>
53-
<div class="footer-column">
55+
<div class="footer-column footer-column--supporters">
5456
<h3>Supporters</h3>
55-
<p class="supporters-label">Open Collective</p>
56-
<a
57-
href="https://opencollective.com/spicetify"
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
61-
<img
62-
src="https://opencollective.com/spicetify/tiers/supporter.svg?avatarHeight=36"
63-
alt="Open Collective supporters"
64-
loading="lazy"
65-
/>
66-
</a>
57+
<div class="supporters-row">
58+
<div class="supporter-block">
59+
<p class="supporters-label">Open Collective</p>
60+
<a
61+
href="https://opencollective.com/spicetify"
62+
target="_blank"
63+
rel="noopener noreferrer"
64+
>
65+
<img
66+
src="https://opencollective.com/spicetify/tiers/supporter.svg?avatarHeight=36"
67+
alt="Open Collective supporters"
68+
loading="lazy"
69+
width="200"
70+
height="36"
71+
/>
72+
</a>
73+
</div>
74+
<div class="supporter-block">
75+
<p class="supporters-label">GitHub Sponsors</p>
76+
<a
77+
href="https://github.com/sponsors/spicetify"
78+
target="_blank"
79+
rel="noopener noreferrer"
80+
class="sponsor-button"
81+
>
82+
<GitHubIcon size={16} />
83+
Sponsor on GitHub
84+
</a>
85+
</div>
86+
</div>
6787
</div>
6888
</div>
6989
<div class="footer-bottom">
@@ -133,6 +153,42 @@ const year = new Date().getFullYear();
133153
margin-bottom: 0.5rem;
134154
}
135155

156+
.footer-column--supporters {
157+
min-width: 0;
158+
}
159+
160+
.supporters-row {
161+
display: flex;
162+
flex-wrap: wrap;
163+
gap: 0.5rem;
164+
align-items: flex-start;
165+
}
166+
167+
.supporter-block {
168+
min-width: 0;
169+
}
170+
171+
.sponsor-button {
172+
display: inline-flex;
173+
align-items: center;
174+
gap: 0.5rem;
175+
height: 36px;
176+
padding: 0 0.85rem;
177+
background: rgba(255, 255, 255, 0.06);
178+
border: 1px solid rgba(255, 255, 255, 0.1);
179+
border-radius: 6px;
180+
color: #e3e3e3;
181+
font-size: 0.8rem;
182+
font-weight: 500;
183+
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
184+
}
185+
186+
.sponsor-button:hover {
187+
background: rgba(255, 255, 255, 0.1);
188+
border-color: rgba(255, 255, 255, 0.2);
189+
color: #fff;
190+
}
191+
136192
.footer-bottom {
137193
max-width: 1200px;
138194
margin: 2rem auto 0;

src/components/SponsorBanner.astro

Lines changed: 0 additions & 27 deletions
This file was deleted.

src/components/homepage/HeroSection.astro

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,26 @@ const { stats, heroShowcase } = Astro.props;
5151
View on GitHub
5252
</a>
5353
</div>
54+
55+
<p class="hero-supporters">
56+
Supported by
57+
<a
58+
href="https://boostmania.gg"
59+
target="_blank"
60+
rel="sponsored noopener noreferrer"
61+
class="hero-supporter-link"
62+
>
63+
<img
64+
src="/images/sponsors/boostmania.png"
65+
alt=""
66+
width="16"
67+
height="16"
68+
loading="lazy"
69+
aria-hidden="true"
70+
/>
71+
<span>Boost<span class="hero-supporter-accent">Mania</span></span>
72+
</a>
73+
</p>
5474
</div>
5575

5676
<div class="hero-showcase">
@@ -239,6 +259,44 @@ const { stats, heroShowcase } = Astro.props;
239259
animation: fade-in-up 0.7s ease 0.45s both;
240260
}
241261

262+
.hero-supporters {
263+
display: inline-flex;
264+
flex-wrap: wrap;
265+
align-items: center;
266+
justify-content: center;
267+
column-gap: 0.4rem;
268+
row-gap: 0.2rem;
269+
margin: 1.75rem auto 0;
270+
font-size: 0.78rem;
271+
color: var(--color-text-secondary);
272+
animation: fade-in-up 0.7s ease 0.55s both;
273+
}
274+
275+
.hero-supporter-link {
276+
display: inline-flex;
277+
align-items: center;
278+
gap: 0.3rem;
279+
color: var(--color-text);
280+
font-weight: 600;
281+
text-decoration: none;
282+
border-bottom: 1px dashed transparent;
283+
transition: border-color 0.2s ease, color 0.2s ease;
284+
}
285+
286+
.hero-supporter-link:hover {
287+
border-bottom-color: var(--color-text-secondary);
288+
text-decoration: none;
289+
}
290+
291+
.hero-supporter-link img {
292+
border-radius: 4px;
293+
vertical-align: middle;
294+
}
295+
296+
.hero-supporter-accent {
297+
color: #e325f5;
298+
}
299+
242300
.hero-showcase {
243301
position: relative;
244302
width: 100%;
@@ -343,6 +401,7 @@ const { stats, heroShowcase } = Astro.props;
343401
.hero h1,
344402
.hero-subtitle,
345403
.hero-actions,
404+
.hero-supporters,
346405
.hero-showcase {
347406
animation: none !important;
348407
opacity: 1 !important;

0 commit comments

Comments
 (0)