Skip to content

Commit 9dd062c

Browse files
fairappsfairapps
committed
Update card and footer styling
1 parent ffb37be commit 9dd062c

File tree

5 files changed

+150
-85
lines changed

5 files changed

+150
-85
lines changed

‎src/components/CustomFooter.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,16 @@ import { Icon } from '@astrojs/starlight/components';
2222
}
2323

2424
<div class="site-footer">
25-
<p class="site-footer-contact">
25+
<p class="site-footer-contact footer-contact">
2626
<a href="https://fosstodon.org/@appfair" rel="me">Mastodon: @appfair@fosstodon.org</a>
2727
<span class="site-footer-separator">&middot;</span>
2828
<a href="mailto:info@appfair.org">info@appfair.org</a>
29+
</p>
30+
<p class="site-footer-nonprofit footer-contact">
31+
The App Fair Project is a 501(c)(3) nonprofit in the United States and a registered nonprofit association in France
2932
<span class="site-footer-separator">&middot;</span>
3033
<a href="/imprint/">Imprint</a>
3134
</p>
32-
<p class="site-footer-nonprofit">
33-
The App Fair Project is a 501(c)(3) nonprofit in the United States and a registered nonprofit association in France.
34-
</p>
3535
</div>
3636
</footer>
3737

‎src/components/FeatureCard.astro‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ interface Props {
88
const { title, icon, color } = Astro.props;
99
---
1010

11-
<div class="feature-card">
12-
<div class="feature-card-header" style={`--icon-color: ${color};`}>
11+
<span class="feature-card" data-color={color}>
12+
<div class="feature-card-header">
1313
<div class="feature-card-icon">
1414
<span class="material-symbols-rounded">{icon}</span>
1515
</div>
1616
<h3 class="feature-card-title">{title}</h3>
1717
</div>
18-
<div class="feature-card-content">
18+
<div class="feature-card-description">
1919
<slot />
2020
</div>
21-
</div>
21+
<!-- <span class="feature-card-link">Learn more <span aria-hidden="true">→</span></span> -->
22+
</span>

‎src/content/docs/imprint.md‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@
22
title: Imprint
33
---
44

5-
# Imprint
5+
## App Fair (France)
6+
7+
App Fair is a registered nonprofit association (_association loi 1901_) in France.
8+
9+
- **Association:** L’association APP FAIR
10+
- **N° RNA:** W632014768
11+
- **N° SIREN:** 987367208
12+
- **SIRET:** 987 367 208 00012
13+
- **Registration page:** [annuaire-entreprises.data.gouv.fr](https://annuaire-entreprises.data.gouv.fr/entreprise/app-fair-987367208)
614

715
## The App Fair Project (United States)
816

@@ -13,16 +21,6 @@ The App Fair Project is a registered 501(c)(3) nonprofit corporation in the Comm
1321
- **DUNS number:** 118642112
1422
- **IRS determination letter:** [FinalLetter_88-1461874 (PDF)](https://apps.irs.gov/pub/epostcard/dl/FinalLetter_88-1461874_THEAPPFAIRPROJECTINCORPORATED_01262023_00.pdf)
1523

16-
## App Fair (France)
17-
18-
App Fair is a registered nonprofit association (_association loi 1901_) in France.
19-
20-
- **Association:** APP FAIR
21-
- **N° RNA:** W632014768
22-
- **N° SIREN:** 987367208
23-
- **SIRET:** 987 367 208 00012
24-
- **Registration page:** [annuaire-entreprises.data.gouv.fr](https://annuaire-entreprises.data.gouv.fr/entreprise/app-fair-987367208)
25-
2624
## Contact
2725

2826
- **Email:** [info@appfair.org](mailto:info@appfair.org)

‎src/content/docs/index.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,32 +35,32 @@ App Fair apps cost nothing and contain no built-in ad-tech or non-consensual tra
3535

3636
<div class="feature-card-grid">
3737

38-
<FeatureCard title="Free & Open Source" icon="code" color="#3b82f6">
38+
<FeatureCard title="Free & Open Source" icon="code" color="blue">
3939
Every App Fair app is fully free and open source. Anyone can inspect the code,
4040
contribute improvements, or reuse it for the benefit of the wider community.
4141
</FeatureCard>
4242

43-
<FeatureCard title="No Advertisements or Ad-Tech" icon="block" color="#ef4444">
43+
<FeatureCard title="No Advertisements or Ad-Tech" icon="block" color="red">
4444
App Fair apps never show ads. There is no attention harvesting, no engagement
4545
manipulation, and no incentive to optimize for clicks instead of users.
4646
</FeatureCard>
4747

48-
<FeatureCard title="Available Everywhere" icon="public" color="#10b981">
48+
<FeatureCard title="Available Everywhere" icon="public" color="amber">
4949
App Fair apps are distributed both through the commercial app stores — the Apple App Store
5050
and Google Play Store — as well as alternative marketplaces like AltStore and F-Droid.
5151
</FeatureCard>
5252

53-
<FeatureCard title="No In-App Purchases" icon="money_off" color="#f59e0b">
53+
<FeatureCard title="No In-App Purchases" icon="money_off" color="green">
5454
App Fair apps do not monetize end users in any way. No subscriptions, no in-app
5555
purchases, and no paywalls — the full experience is available to everyone.
5656
</FeatureCard>
5757

58-
<FeatureCard title="Digital Public Goods" icon="volunteer_activism" color="#ec4899">
58+
<FeatureCard title="Digital Public Goods" icon="volunteer_activism" color="teal">
5959
App Fair projects are digital public goods, built by the community and funded by
6060
donations and grants to serve society.
6161
</FeatureCard>
6262

63-
<FeatureCard title="Privacy-Respecting by Design" icon="shield" color="#8b5cf6">
63+
<FeatureCard title="Privacy-Respecting by Design" icon="shield" color="purple">
6464
App Fair apps contain no trackers, no spyware, and request no unnecessary permissions.
6565
Your data stays on your device unless sharing is essential and explicit.
6666
</FeatureCard>

‎src/styles/custom.css‎

Lines changed: 126 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -150,113 +150,179 @@ div.localization-screenshot-container img {
150150
margin-bottom: 0.5rem;
151151
}
152152

153-
/* Feature card grid */
153+
/* Site-wide footer */
154+
.site-footer {
155+
border-top: 1px solid var(--sl-color-gray-5);
156+
padding-top: 1.5rem;
157+
margin-top: 0.5rem;
158+
text-align: center;
159+
}
160+
161+
.site-footer-contact {
162+
display: flex;
163+
justify-content: center;
164+
align-items: center;
165+
gap: 0.5rem;
166+
margin: 0 0 0.75rem;
167+
font-size: var(--sl-text-sm);
168+
}
169+
170+
.footer-contact a {
171+
color: var(--sl-color-gray-3);
172+
text-decoration: none;
173+
}
174+
175+
.footer-contact a:hover {
176+
color: var(--sl-color-white);
177+
}
178+
179+
.site-footer-separator {
180+
color: var(--sl-color-gray-4);
181+
}
182+
183+
.site-footer-nonprofit {
184+
margin: 0;
185+
font-size: var(--sl-text-xs);
186+
color: var(--sl-color-gray-3);
187+
line-height: 1.5;
188+
}
189+
190+
191+
/* ── Feature Cards Grid ── */
192+
154193
.feature-card-grid {
155194
display: grid;
156-
grid-template-columns: repeat(2, 1fr);
157-
grid-auto-rows: 1fr;
195+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
158196
gap: 1.25rem;
159197
margin-top: 1.5rem;
160198
}
161199

162-
@media (max-width: 600px) {
163-
.feature-card-grid {
164-
grid-template-columns: 1fr;
165-
}
166-
}
167-
168-
/* Feature card */
169200
.feature-card {
170201
display: flex;
171202
flex-direction: column;
172-
height: 100%;
203+
padding: 1.75rem;
204+
border-radius: 1rem;
205+
/* background: linear-gradient(135deg, var(--card-tint) 0%), var(--sl-color-gray-6); */
206+
background: var(--card-tint);
173207
border: 1px solid var(--sl-color-gray-5);
174-
border-radius: 12px;
175-
padding: 1.25rem;
176-
background: var(--sl-color-black);
177-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
178-
transition: box-shadow 0.2s ease, transform 0.2s ease;
208+
text-decoration: none;
209+
color: inherit;
210+
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
179211
}
180212

181-
.feature-card-content {
182-
flex: 1;
213+
.feature-card:hover {
214+
transform: translateY(-3px);
215+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
216+
border-color: var(--sl-color-accent);
183217
}
184218

185-
.feature-card:hover {
186-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
187-
transform: translateY(-2px);
219+
:root[data-theme='light'] .feature-card:hover {
220+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
188221
}
189222

190223
.feature-card-header {
191224
display: flex;
192225
align-items: center;
193226
gap: 0.75rem;
194-
margin-bottom: 0.6rem;
227+
margin-bottom: 0.75rem;
195228
}
196229

197230
.feature-card-icon {
198-
width: 40px;
199-
height: 40px;
200-
border-radius: 10px;
201231
display: flex;
202232
align-items: center;
203233
justify-content: center;
234+
width: 2.5rem;
235+
height: 2.5rem;
236+
border-radius: 0.625rem;
204237
flex-shrink: 0;
205-
background: color-mix(in srgb, var(--icon-color) 15%, transparent);
206238
}
207239

208240
.feature-card-icon .material-symbols-rounded {
209-
font-size: 24px;
210-
color: var(--icon-color);
211-
}
241+
font-size: 1.25rem;
242+
}
243+
244+
/* ── Per-card gradient tints (dark mode) ── */
245+
.feature-card[data-color="blue"] { --card-tint: rgba(96, 165, 250, 0.08); }
246+
.feature-card[data-color="amber"] { --card-tint: rgba(251, 191, 36, 0.08); }
247+
.feature-card[data-color="red"] { --card-tint: rgba(248, 113, 113, 0.08); }
248+
.feature-card[data-color="purple"] { --card-tint: rgba(192, 132, 252, 0.08); }
249+
.feature-card[data-color="green"] { --card-tint: rgba(74, 222, 128, 0.08); }
250+
.feature-card[data-color="teal"] { --card-tint: rgba(45, 212, 191, 0.08); }
251+
252+
/* ── Per-card icon colors (dark mode) ── */
253+
.feature-card[data-color="blue"] .feature-card-icon { background: #172554; }
254+
.feature-card[data-color="amber"] .feature-card-icon { background: #451a03; }
255+
.feature-card[data-color="red"] .feature-card-icon { background: #450a0a; }
256+
.feature-card[data-color="purple"] .feature-card-icon { background: #3b0764; }
257+
.feature-card[data-color="green"] .feature-card-icon { background: #052e16; }
258+
.feature-card[data-color="teal"] .feature-card-icon { background: #042f2e; }
259+
260+
.feature-card[data-color="blue"] .material-symbols-rounded { color: #60a5fa; }
261+
.feature-card[data-color="amber"] .material-symbols-rounded { color: #fbbf24; }
262+
.feature-card[data-color="red"] .material-symbols-rounded { color: #f87171; }
263+
.feature-card[data-color="purple"] .material-symbols-rounded { color: #c084fc; }
264+
.feature-card[data-color="green"] .material-symbols-rounded { color: #4ade80; }
265+
.feature-card[data-color="teal"] .material-symbols-rounded { color: #2dd4bf; }
266+
267+
/* ── Per-card gradient tints (light mode) ── */
268+
:root[data-theme='light'] .feature-card[data-color="blue"] { --card-tint: rgba(37, 99, 235, 0.05); }
269+
:root[data-theme='light'] .feature-card[data-color="amber"] { --card-tint: rgba(217, 119, 6, 0.05); }
270+
:root[data-theme='light'] .feature-card[data-color="red"] { --card-tint: rgba(220, 38, 38, 0.05); }
271+
:root[data-theme='light'] .feature-card[data-color="purple"] { --card-tint: rgba(147, 51, 234, 0.05); }
272+
:root[data-theme='light'] .feature-card[data-color="green"] { --card-tint: rgba(22, 163, 106, 0.05); }
273+
:root[data-theme='light'] .feature-card[data-color="teal"] { --card-tint: rgba(13, 148, 136, 0.05); }
274+
275+
/* ── Per-card icon colors (light mode) ── */
276+
:root[data-theme='light'] .feature-card[data-color="blue"] .feature-card-icon { background: #dbeafe; }
277+
:root[data-theme='light'] .feature-card[data-color="amber"] .feature-card-icon { background: #fef3c7; }
278+
:root[data-theme='light'] .feature-card[data-color="red"] .feature-card-icon { background: #fee2e2; }
279+
:root[data-theme='light'] .feature-card[data-color="purple"] .feature-card-icon { background: #f3e8ff; }
280+
:root[data-theme='light'] .feature-card[data-color="green"] .feature-card-icon { background: #dcfce7; }
281+
:root[data-theme='light'] .feature-card[data-color="teal"] .feature-card-icon { background: #ccfbf1; }
282+
283+
:root[data-theme='light'] .feature-card[data-color="blue"] .material-symbols-rounded { color: #2563eb; }
284+
:root[data-theme='light'] .feature-card[data-color="amber"] .material-symbols-rounded { color: #d97706; }
285+
:root[data-theme='light'] .feature-card[data-color="red"] .material-symbols-rounded { color: #dc2626; }
286+
:root[data-theme='light'] .feature-card[data-color="purple"] .material-symbols-rounded { color: #9333ea; }
287+
:root[data-theme='light'] .feature-card[data-color="green"] .material-symbols-rounded { color: #16a34a; }
288+
:root[data-theme='light'] .feature-card[data-color="teal"] .material-symbols-rounded { color: #0d9488; }
212289

213290
.feature-card-title {
214-
font-size: 1.1rem;
291+
font-size: 1.125rem;
215292
font-weight: 600;
216293
margin: 0;
217294
color: var(--sl-color-white);
218295
}
219296

220-
.feature-card-content p {
221-
margin: 0;
222-
font-size: 0.9rem;
223-
line-height: 1.5;
297+
.feature-card-description {
298+
font-size: 0.9375rem;
299+
line-height: 1.6;
224300
color: var(--sl-color-gray-2);
301+
flex: 1;
302+
margin: 0;
225303
}
226304

227-
/* Site-wide footer */
228-
.site-footer {
229-
border-top: 1px solid var(--sl-color-gray-5);
230-
padding-top: 1.5rem;
231-
margin-top: 0.5rem;
232-
text-align: center;
305+
:root[data-theme='light'] .feature-card-description {
306+
color: var(--sl-color-gray-3);
233307
}
234308

235-
.site-footer-contact {
236-
display: flex;
237-
justify-content: center;
309+
.feature-card-link {
310+
display: inline-flex;
238311
align-items: center;
239-
gap: 0.5rem;
240-
margin: 0 0 0.75rem;
241-
font-size: var(--sl-text-sm);
312+
gap: 0.25rem;
313+
margin-top: 1.25rem;
314+
font-size: 0.875rem;
315+
font-weight: 500;
316+
color: var(--sl-color-accent-high);
317+
transition: gap 0.2s ease;
242318
}
243319

244-
.site-footer-contact a {
245-
color: var(--sl-color-gray-3);
246-
text-decoration: none;
320+
:root[data-theme='light'] .feature-card-link {
321+
color: var(--sl-color-accent);
247322
}
248323

249-
.site-footer-contact a:hover {
250-
color: var(--sl-color-white);
324+
.feature-card:hover .feature-card-link {
325+
gap: 0.5rem;
251326
}
252327

253-
.site-footer-separator {
254-
color: var(--sl-color-gray-4);
255-
}
256328

257-
.site-footer-nonprofit {
258-
margin: 0;
259-
font-size: var(--sl-text-xs);
260-
color: var(--sl-color-gray-3);
261-
line-height: 1.5;
262-
}

0 commit comments

Comments
 (0)