Skip to content

Commit 2513914

Browse files
mrbiggredmrbiggred
committed
Update sponsor page layout and styles
- Renamed "Support" section to "Contribute" - Enhanced support section with clearer descriptions - Updated CSS for lead paragraph and support cards - Included additional CSS files in mkdocs configuration
1 parent 06f0e47 commit 2513914

4 files changed

Lines changed: 95 additions & 83 deletions

File tree

‎docs/sponsors/index.md‎

Lines changed: 71 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2,94 +2,85 @@
22
hide:
33
- toc
44
---
5-
# Support
5+
# Contribute
66

77
<div class="wdc-sponsors-page" markdown>
8+
<p class="lead">Like the Weekly Dev Chat and want to help?</p>
9+
<section class="support">
10+
<div class="support-card">
11+
<h3>Show Up</h3>
12+
<p>Attending events is the best way to support the Weekly Dev Chat. Bring your curiousity and be willing to share your knowledge and learn from others.</p>
13+
</div>
14+
<div class="support-card">
15+
<h3>Spread the Word</h3>
16+
<p>Invite people who follow our values to our events. Everyone and anyone is welcome kind, supportive, and respectful of others.</p>
17+
</div>
18+
<div class="support-card">
19+
<h3>Sponsor</h3>
20+
<p>Help keep the lights and get things done with contributions of money, time, skills, or other resources. Every little bit helps.</p>
21+
</div>
22+
</section>
823

9-
<p>
10-
Like the Weekly Dev Chat and want to help? Then follow the steps below.
11-
</p>
12-
13-
<section class="support">
14-
<div class="support-card">
15-
<div class="support-k">01</div>
16-
<h3>Show up</h3>
17-
<p>Attending events is the best way to support the Weekly Dev Chat. Bring your curiousity and be willing to share your knowledge and learn from others.</p>
18-
</div>
19-
<div class="support-card">
20-
<div class="support-k">02</div>
21-
<h3>Spread the Word</h3>
22-
<p>Invite people who follow our values to our events. Everyone and anyone is welcome kind, supportive, and respectful of others.</p>
23-
</div>
24-
<div class="support-card">
25-
<div class="support-k">03</div>
26-
<h3>Sponsor/Volunteer</h3>
27-
<p>Help keep the lights on and/or with the various other tasks required to keep Weekly Dev Chat going.</p>
28-
<a class="support-cta" href="https://github.com/sponsors/saturdaymp" target="_blank" rel="noopener">GitHub Sponsors →</a>
29-
<a class="support-cta" href="https://github.com/sponsors/saturdaymp" target="_blank" rel="noopener">Contact →</a>
30-
</div>
31-
</section>
24+
<section class="become-sponsor">
25+
<div class="become-inner">
26+
<div>
27+
<div class="eyebrow"><span class="dot"></span> Want on this page?</div>
28+
<h3>Contribute to Weekly Dev Chat</h3>
29+
<p>Any amount helps cover Zoom, hosting, and the occasional IRL pizza. Sponsor Saturday MP and you'll be listed under this year's supporters.</p>
30+
</div>
31+
<div class="become-ctas">
32+
<a class="btn primary" href="https://github.com/sponsors/saturdaymp" target="_blank" rel="noopener">Sponsor on GitHub</a>
33+
<a class="btn ghost" href="mailto:chris.cumming@saturdaymp.com">Email Chris</a>
34+
</div>
35+
</div>
36+
</section>
3237

33-
Thanks to our current and past supporters!
38+
Thanks to our current and past supporters!
3439

35-
{% for year in sponsors.years.keys() | sort(reverse=true) %}
36-
{% set ids = (sponsors.years[year].corporate or []) + (sponsors.years[year].individual or []) %}
37-
<section class="year-group" data-year="{{ year }}">
38-
<div class="year-header">
39-
<h2 class="year-num" id="year-{{ year }}">{{ year }}</h2>
40-
<span class="year-meta">{{ ids|length }} sponsor{{ '' if ids|length == 1 else 's' }}</span>
41-
<div class="year-rule"></div>
42-
</div>
43-
<div class="sponsor-grid">
44-
{% for id in ids %}
45-
{% if id in sponsors.sponsors %}
46-
{% set s = sponsors.sponsors[id] %}
47-
{% set card_links = s.links if s.links else ([{'label': s.link_label or 'Website', 'url': s.link}] if s.link else []) %}
48-
<div class="sponsor-card" tabindex="0">
49-
<div class="card-face card-front">
50-
<div class="card-logo">
51-
{% if s.image %}<img src="{{ s.image }}" alt="{{ s.name }}">{% else %}<div class="card-logo-placeholder">{{ s.name[0] }}</div>{% endif %}
52-
</div>
53-
<div class="card-footer">
54-
<span class="card-tier">{{ s.tier or 'Sponsor' }}</span>
55-
<span class="card-hint">hover for info</span>
40+
{% for year in sponsors.years.keys() | sort(reverse=true) %}
41+
{% set ids = (sponsors.years[year].corporate or []) + (sponsors.years[year].individual or []) %}
42+
<section class="year-group" data-year="{{ year }}">
43+
<div class="year-header">
44+
<h2 class="year-num" id="year-{{ year }}">{{ year }}</h2>
45+
<span class="year-meta">{{ ids|length }} sponsor{{ '' if ids|length == 1 else 's' }}</span>
46+
<div class="year-rule"></div>
47+
</div>
48+
<div class="sponsor-grid">
49+
{% for id in ids %}
50+
{% if id in sponsors.sponsors %}
51+
{% set s = sponsors.sponsors[id] %}
52+
{% set card_links = s.links if s.links else ([{'label': s.link_label or 'Website', 'url': s.link}] if s.link else []) %}
53+
<div class="sponsor-card" tabindex="0">
54+
<div class="card-face card-front">
55+
<div class="card-logo">
56+
{% if s.image %}<img src="{{ s.image }}" alt="{{ s.name }}">{% else %}<div class="card-logo-placeholder">{{ s.name[0] }}</div>{% endif %}
57+
</div>
58+
<div class="card-footer">
59+
<span class="card-tier">{{ s.tier or 'Sponsor' }}</span>
60+
<span class="card-hint">hover for info</span>
61+
</div>
5662
</div>
57-
</div>
58-
<div class="card-face card-back">
59-
<div class="card-back-inner">
60-
{% if s.tier %}<div class="card-back-tier">{{ s.tier }}</div>{% endif %}
61-
<h4 class="card-back-name">{{ s.name }}</h4>
62-
{% if s.description %}<p class="card-back-desc">{{ s.description }}</p>{% endif %}
63-
{% if card_links %}
64-
<div class="card-back-links">
65-
{% for l in card_links %}
66-
<a href="{{ l.url }}" target="_blank" rel="noopener">{{ l.label }} <span class="arrow">↗</span></a>
67-
{% endfor %}
68-
</div>
69-
{% endif %}
63+
<div class="card-face card-back">
64+
<div class="card-back-inner">
65+
{% if s.tier %}<div class="card-back-tier">{{ s.tier }}</div>{% endif %}
66+
<h4 class="card-back-name">{{ s.name }}</h4>
67+
{% if s.description %}<p class="card-back-desc">{{ s.description }}</p>{% endif %}
68+
{% if card_links %}
69+
<div class="card-back-links">
70+
{% for l in card_links %}
71+
<a href="{{ l.url }}" target="_blank" rel="noopener">{{ l.label }} <span class="arrow">↗</span></a>
72+
{% endfor %}
73+
</div>
74+
{% endif %}
75+
</div>
7076
</div>
7177
</div>
72-
</div>
73-
{% else %}
74-
> **WARNING:** Unknown sponsor ID `{{ id }}` referenced in `{{ year }}`. Check `data/sponsors.yml` for a typo.
75-
{% endif %}
76-
{% endfor %}
77-
</div>
78-
</section>
79-
{% endfor %}
80-
81-
<section class="become-sponsor">
82-
<div class="become-inner">
83-
<div>
84-
<div class="eyebrow"><span class="dot"></span> Want on this page?</div>
85-
<h3>Become a sponsor</h3>
86-
<p>Any amount helps cover Zoom, hosting, and the occasional IRL pizza. Sponsor Saturday MP and you'll be listed under this year's supporters.</p>
87-
</div>
88-
<div class="become-ctas">
89-
<a class="btn primary" href="https://github.com/sponsors/saturdaymp" target="_blank" rel="noopener">Sponsor on GitHub</a>
90-
<a class="btn ghost" href="mailto:chris.cumming@saturdaymp.com">Email Chris</a>
78+
{% else %}
79+
> **WARNING:** Unknown sponsor ID `{{ id }}` referenced in `{{ year }}`. Check `data/sponsors.yml` for a typo.
80+
{% endif %}
81+
{% endfor %}
9182
</div>
92-
</div>
93-
</section>
83+
</section>
84+
{% endfor %}
9485

9586
</div>

‎docs/stylesheets/extra.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
.md-typeset h1 {
2+
font-weight: 300;
3+
font-size: clamp(32px, 4.5vw, 48px);
4+
letter-spacing: -0.02em;
5+
line-height: 1.1;
6+
color: var(--md-primary-fg-color, #009688);
7+
border-bottom: none;
8+
padding-bottom: 0;
9+
}
10+
111
.logo-article-img {
212
width: 300px;
313
margin-left: 20px;

‎docs/stylesheets/sponsors.css‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,25 @@
2323
--wdc-mono: ui-monospace, "SF Mono", Menlo, monospace;
2424
}
2525

26+
/* ---------- Lead paragraph ---------- */
27+
.wdc-sponsors-page .lead {
28+
font-size: clamp(18px, 2vw, 22px);
29+
font-weight: 300;
30+
line-height: 1.5;
31+
color: var(--wdc-ink);
32+
margin: 8px 0 24px;
33+
max-width: 60ch;
34+
}
35+
2636
/* ---------- Support block (3 numbered cards) ---------- */
2737
.wdc-sponsors-page .support {
2838
display: grid;
2939
grid-template-columns: repeat(3, 1fr);
3040
gap: 16px;
3141
padding: 32px 0;
42+
margin: 32px 0 56px;
3243
border-top: 1px solid var(--wdc-line);
3344
border-bottom: 1px solid var(--wdc-line);
34-
margin: 32px 0 56px;
3545
}
3646
.wdc-sponsors-page .support-card {
3747
padding: 22px;
@@ -84,7 +94,7 @@
8494
}
8595
.wdc-sponsors-page .year-header h2.year-num {
8696
font-weight: 300;
87-
font-size: clamp(40px, 6vw, 64px);
97+
font-size: clamp(24px, 3vw, 32px);
8898
letter-spacing: -0.02em;
8999
line-height: 1;
90100
margin: 0;

‎mkdocs.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ watch:
5050
markdown_extensions:
5151
- attr_list # This lets us specify image dimensions, etc.
5252

53-
extra_css:
53+
extra_css:
5454
- stylesheets/extra.css
55+
- stylesheets/sponsors.css
5556

0 commit comments

Comments
 (0)