Skip to content

Commit e9aa8d7

Browse files
committed
site redesign
1 parent e986b02 commit e9aa8d7

19 files changed

Lines changed: 1726 additions & 689 deletions

‎STYLEGUIDE.md‎

Lines changed: 367 additions & 0 deletions
Large diffs are not rendered by default.

‎_layouts/_includes/event-list.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<article>
1+
<section>
22
<h2>BPD Organized Events</h2>
3-
<ul>
3+
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(220px, 320px));">
44
{% for page in data.bpd %}
5-
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
5+
<div class="card" style="padding: 1.25rem 1.5rem;"><a href="{{ page.url }}">{{ page.title }}</a></div>
66
{% endfor %}
7-
</ul>
8-
</article>
7+
</div>
8+
</section>

‎_layouts/_includes/footer.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,15 @@ <h3>Contact Us</h3>
2424
<address>
2525
<p>Email: <a href="mailto:contact@blackpythondevs.com">contact@blackpythondevs.com </a></p>
2626
</address>
27-
<nav>{%- include "_includes/social.html" -%}</nav>
27+
<nav aria-label="Social media">
28+
<ul class="social-links">
29+
<li><a href="https://discord.gg/XUc3tFqCT3" target="_blank" rel="me" title="Discord"><i class="iconoir-discord" aria-hidden="true"></i></a></li>
30+
<li><a href="https://www.linkedin.com/company/black-python-devs" target="_blank" rel="me" title="LinkedIn"><i class="iconoir-linkedin" aria-hidden="true"></i></a></li>
31+
<li><a href="https://x.com/blackpythondevs" target="_blank" rel="me" title="Twitter/X"><i class="iconoir-x" aria-hidden="true"></i></a></li>
32+
<li><a href="https://www.instagram.com/blackpythondevs/" target="_blank" rel="me" title="Instagram"><i class="iconoir-instagram" aria-hidden="true"></i></a></li>
33+
<li><a href="https://github.com/BlackPythonDevs" target="_blank" rel="me" title="GitHub"><i class="iconoir-github" aria-hidden="true"></i></a></li>
34+
</ul>
35+
</nav>
2836
</div>
2937
</div>
3038
<div class="footer-bottom">

‎_layouts/_includes/header.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,30 @@
33
<h1 class="site-title">
44
<a class="logo-text" href="/index.html"><img src="{{ '/assets/images/black_python_devs_logo-horizontal-white.png' }}" alt="Black Python Devs" /></a>
55
</h1>
6-
<nav class="site-navigation" aria-label="Main navigation" style="padding-right: 2em">
6+
<nav class="site-navigation" aria-label="Main navigation">
77
<div class="site-navigation-wrap">
88
<ul class="menu" role="menu">
99
{% for item in navigation %} {% set current = nil %} {% set nav_lang = nil %} {% if item.url and url == item.url %} {% set current = 'nav-current' %} {% endif %} {% if lang != 'en' %} {% set nav_lang = lang %} {% endif %}
1010
<li class="menu-item {{ current }}" role="menuitem">
1111
{% if item.subitems %}
1212
<details class="dropdown">
13-
<summary><i class="{{ item.fa }}" aria-hidden="true"></i>&nbsp;{{ item.text }}</summary>
13+
<summary><i class="{{ item.icon }}" aria-hidden="true"></i>&nbsp;{{ item.text }}</summary>
1414
<ul class="dropdown-menu">
1515
{% for sub in item.subitems %}
1616
<li class="dropdown-item">
17-
<a href="{{ nav_lang }}{{ sub.url }}"><i class="{{ sub.fa }}" aria-hidden="true"></i>&nbsp;{{ sub.text }}</a>
17+
<a href="{{ nav_lang }}{{ sub.url }}"><i class="{{ sub.icon }}" aria-hidden="true"></i>&nbsp;{{ sub.text }}</a>
1818
</li>
1919
{% endfor %}
2020
</ul>
2121
</details>
2222
{% else %}
23-
<a class="{{ current }}" href="{{ nav_lang }}{{ item.url }}"> <i class="{{ item.fa }}" aria-hidden="true"></i>&nbsp;{{ item.text }} </a>
23+
<a class="{{ current }}" href="{{ nav_lang }}{{ item.url }}"><i class="{{ item.icon }}" aria-hidden="true"></i>&nbsp;{{ item.text }}</a>
2424
{% endif %}
2525
</li>
2626
{% endfor %} {% if locales | length > 1 %}
2727
<li class="menu-item" role="menuitem">
2828
<div class="">
29-
<i class="fa fa-language" aria-hidden="true"></i>
29+
<i class="iconoir-language" aria-hidden="true"></i>
3030
<select id="language" class="form-select" aria-label="Language">
3131
{% set locales = locales | sort %} {% for locale in locales %} {% set lang = locale[0] %} {% set locale_name = locale[1][lang].locale_name %} {% if lang == lang %}
3232
<option value="{{ lang }}" selected="selected">{{ locale_name }}</option>
@@ -47,6 +47,9 @@ <h1 class="site-title">
4747
<!-- .site-navigation-wrap -->
4848
</nav>
4949
<!-- .site-navigation -->
50+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark/light mode" title="Toggle dark/light mode">
51+
<i class="iconoir-sun-light" aria-hidden="true"></i>
52+
</button>
5053
<button id="menu-open" class="menu-toggle">
5154
<span class="screen-reader-text">Open Menu</span>
5255
<span class="icon-menu" aria-hidden="true"></span>

‎_layouts/_includes/join_us.html‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<div class="grid">
2-
<article id="join-us">
2+
<article id="join-us" class="card">
33
<div class="grid">
4-
<a href="https://discord.gg/XUc3tFqCT3" role="button" class="pico-background-violet-650">
5-
<span style="margin: 0 1rem"> <i class="fab fa-discord"></i></span>
6-
<span> Join our Discord </span>
4+
<a href="https://discord.gg/XUc3tFqCT3" role="button" class="btn-discord">
5+
<i class="iconoir-discord" aria-hidden="true"></i>
6+
<span>Join our Discord</span>
77
</a>
88

9-
<a href="https://www.linkedin.com/groups/14336241/" role="button" class="pico-background-azure-650 white-button"
10-
><span style="margin: 0 1rem"><i class="fab fa-linkedin"></i></span>Join our LinkedIn Group</a
11-
>
9+
<a href="https://www.linkedin.com/groups/14336241/" role="button" class="btn-linkedin">
10+
<i class="iconoir-linkedin" aria-hidden="true"></i>
11+
<span>Join our LinkedIn Group</span>
12+
</a>
1213
</div>
1314
</article>
1415
</div>
@@ -26,12 +27,5 @@ <h2>Support Black Python Devs</h2>
2627
Fund as detailed here.</small
2728
>
2829
</article>
29-
<section>
30-
<h3>Corporate Sponsors</h3>
31-
<div class="grid">
32-
<article class="sponsor">
33-
<img src="/assets/images/gnome-foundation-blue.png" alt="GNOME Foundation Logo" style="height: 2rem" />
34-
</article>
35-
</div>
36-
</section>
30+
{% include "_includes/sponsors.html" %}
3731
</div>

‎_layouts/_includes/partnerships.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ <h2 id="partnerships">Partnerships</h2>
33
<p>Black Python Devs has partnered with the following organizations to offer discounts and benefits to our community.</p>
44
<div class="grid">
55
{% for partner in partnerships %}
6-
<article>
6+
<article class="card">
77
<header>
88
<a href="{{partner.url}}">
99
<img src="{{partner.logo}}" alt="{{partner.name}} logo" style="max-height: 80px; object-fit: contain" />

‎_layouts/_includes/sponsored-events.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ <h2>Supported Events</h2>
77

88
<p>We believe that sponsorships does the following:</p>
99
<ul>
10-
<li>👫 - raises awareness amongst our community to attend events.</li>
11-
<li>🌐 - supports Python events that are accessible to black communities</li>
10+
<li>Raises awareness amongst our community to attend events.</li>
11+
<li>Supports Python events that are accessible to black communities</li>
1212

1313
</ul>
1414
<p>Here is a look at events this year that we've supported:</p>

‎_layouts/_includes/sponsors.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
<section>
3+
<h3>Corporate Sponsors</h3>
4+
<div class="grid">
5+
<article class="sponsor">
6+
<img src="/assets/images/gnome-foundation-blue.png" alt="GNOME Foundation Logo" style="height: 2rem" />
7+
</article>
8+
</div>
9+
</section>

‎_layouts/about.html‎

Lines changed: 81 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{% extends 'default.html' %}
22
{% block content %}
3-
<article>
3+
4+
<section>
45
<h1 id="about-black-python-devs">About Black Python Devs</h1>
56

67
<p>Black Python Devs was created by its founder Jay Miller after seeing a trend of the same handful of Black developers speaking at major conferences, taking leadership positions, and dealing with the same challenges towards burnout.</p>
@@ -16,115 +17,117 @@ <h1 id="about-black-python-devs">About Black Python Devs</h1>
1617
</p>
1718

1819
<p>At PyCon US 2023 after an open space a Discord server called Black Python Devs was created where the community could continue to encourage this momentum and support one another.</p>
19-
</article>
20-
<section>
21-
<article>
22-
<h2 id="our-principles">Our Principles</h2>
23-
<ul>
24-
<li><strong>Diverse Leadership:</strong> We build and support diverse leadership in Python globally.</li>
25-
<li><strong>Financial Support:</strong> We provide financial support for Python and tech communities in Black communities, whether predominantly Black spaces or Black spaces within predominantly non-Black spaces.</li>
26-
<li><strong>Collective Voice:</strong> We speak as a collection of Black leaders on how decisions impact Black developers at multiple career levels.</li>
27-
<li><strong>Community &amp; Belonging:</strong> We provide a community where people of color can see developers with similar backgrounds and build strong bonds in the tech space.</li>
28-
</ul>
29-
</article>
3020
</section>
21+
3122
<section>
32-
<article>
33-
<h2 id="community-support">Community Support</h2>
34-
<p>We're hoping to continue growing the diverse communities we support. Python is everywhere and we've primarily been focusing on groups under the PSF umbrella of influence, but we hope that expands to the diaspora communities as well as communities completely unaware of Python's official community efforts.</p>
35-
</article>
23+
<h2 id="our-principles">Our Principles</h2>
24+
<ul>
25+
<li><strong>Diverse Leadership:</strong> We build and support diverse leadership in Python globally.</li>
26+
<li><strong>Financial Support:</strong> We provide financial support for Python and tech communities in Black communities, whether predominantly Black spaces or Black spaces within predominantly non-Black spaces.</li>
27+
<li><strong>Collective Voice:</strong> We speak as a collection of Black leaders on how decisions impact Black developers at multiple career levels.</li>
28+
<li><strong>Community &amp; Belonging:</strong> We provide a community where people of color can see developers with similar backgrounds and build strong bonds in the tech space.</li>
29+
</ul>
3630
</section>
37-
<h3 id="leadership-team">Leadership Team</h3>
3831

39-
<div class="grid" style="margin: auto; text-align: center">
40-
{% for leader in data['Executors'] %}
32+
<section>
33+
<h2 id="community-support">Community Support</h2>
34+
<p>We're hoping to continue growing the diverse communities we support. Python is everywhere and we've primarily been focusing on groups under the PSF umbrella of influence, but we hope that expands to the diaspora communities as well as communities completely unaware of Python's official community efforts.</p>
35+
</section>
4136

42-
<article class="leadership-photo-container">
43-
{% if leader.image %}
44-
<img class="leadership-photo" alt="photo of {{leader.name}}" src="{{ leader.image }}" />
45-
{% endif %}
46-
<p>
47-
<strong>{{ leader.name }}</strong><br />
48-
{{ leader.title }}
49-
</p>
50-
</article>
37+
<section>
38+
<h2 id="leadership-team">Leadership Team</h2>
5139

40+
<div class="grid" style="margin: auto;">
41+
{% for leader in data['Executors'] %}
42+
<article class="leadership-card">
43+
{% if leader.image %}
44+
<img class="leadership-photo" alt="photo of {{leader.name}}" src="{{ leader.image }}" />
45+
{% endif %}
46+
<div>
47+
<strong>{{ leader.name }}</strong><br />
48+
<small style="color: var(--bpd-muted);">{{ leader.title }}</small>
49+
</div>
50+
</article>
5251
{% endfor %}
5352
</div>
53+
</section>
5454

55+
<section>
5556
<h3 id="team-leads">Team Leads</h3>
5657

57-
<div class="grid" style="margin: auto; text-align: center">
58+
<div class="grid" style="margin: auto;">
5859
{% for leader in data['Leaders'] %}
59-
60-
<article class="leadership-photo-container">
61-
{% if leader.image %}
62-
<img class="leadership-photo" alt="photo of {{leader.name}}" src="{{ leader.image }}" />
63-
{% endif %}
64-
<p>
65-
<strong>{{ leader.name }}</strong><br />
66-
{{ leader.title }}
67-
</p>
68-
</article>
60+
<article class="leadership-card">
61+
{% if leader.image %}
62+
<img class="leadership-photo" alt="photo of {{leader.name}}" src="{{ leader.image }}" />
63+
{% endif %}
64+
<div>
65+
<strong>{{ leader.name }}</strong><br />
66+
<small style="color: var(--bpd-muted);">{{ leader.title }}</small>
67+
</div>
68+
</article>
6969
{% endfor %}
7070
</div>
71+
</section>
7172

72-
<h3 id="advisors">Advisors</h3>
73-
<article class="grid">
74-
{% for group in (data.Advisors | sort | slice(3)) %}
75-
<div>
73+
<section>
74+
<h3 id="advisors">Advisors</h3>
75+
<div class="grid">
76+
{% for group in (data.Advisors | sort | slice(3)) %}
77+
<div>
7678
<ul>
77-
{% for leader in group %}
78-
<li><strong>{{ leader }} </strong><br /></li>
79-
{% endfor %}
79+
{% for leader in group %}
80+
<li><strong>{{ leader }}</strong></li>
81+
{% endfor %}
8082
</ul>
83+
</div>
84+
{% endfor %}
8185
</div>
82-
{% endfor %}
83-
</article>
86+
</section>
8487

88+
<section>
8589
<h3 id="leadership-council">BPD Leadership Council</h3>
86-
87-
<article>
88-
<p>We also vet our actions through our Black Python Devs Leadership Council made up of members who serve as Python Community leaders on a local, regional, or global scale.</p>
89-
<div class="grid">
90+
<p>We also vet our actions through our Black Python Devs Leadership Council made up of members who serve as Python Community leaders on a local, regional, or global scale.</p>
91+
<div class="grid">
9092
{% for group in data.Council | sort | slice(3) %}
9193
<div>
9294
<ul>
93-
{% for leader in group %}
95+
{% for leader in group %}
9496
<li><strong>{{ leader }}</strong></li>
95-
{% endfor %}
97+
{% endfor %}
9698
</ul>
9799
</div>
98100
{% endfor %}
99-
</div>
100-
</article>
101+
</div>
101102
</section>
103+
102104
<section>
103105
<h2 id="join-the-community">Join the Community</h2>
104-
<p>The Black Python Devs Community is a vibrant group of developers who are passionate about Python and coding. Whether you're a seasoned developer or just starting out, there's a place for you here.</p>
106+
<p style="margin-bottom: 2.5rem;">The Black Python Devs Community is a vibrant group of developers who are passionate about Python and coding. Whether you're a seasoned developer or just starting out, there's a place for you here.</p>
105107

106-
<div class="grid">
107-
<article>
108-
<h3 id="connect-with-us">Connect With Us</h3>
109-
<p>We've created spaces where you can connect with us and other community members.</p>
110-
<ul>
111-
<li><strong>Discord:</strong> <a href="https://discord.gg/XUc3tFqCT3">Join our server</a></li>
112-
<li><strong>Twitter/X:</strong> <a href="https://x.com/blackpythondevs">Follow us</a></li>
113-
<li><strong>Instagram:</strong> <a href="https://www.instagram.com/blackpythondevs/">Follow us</a></li>
114-
<li><strong>LinkedIn:</strong> <a href="https://www.linkedin.com/company/black-python-devs">Page</a> | <a href="https://www.linkedin.com/groups/14336241/">Group</a></li>
115-
<li><strong>Email:</strong> <a href="mailto:contact@blackpythondevs.com">contact@blackpythondevs.com</a></li>
116-
</ul>
117-
</article>
108+
<div class="grid" style="gap: 3rem;">
109+
<div>
110+
<h3 id="connect-with-us" style="margin-bottom: 1.2rem;">Connect With Us</h3>
111+
<p style="margin-bottom: 1.5rem;">We've created spaces where you can connect with us and other community members.</p>
112+
<ul style="line-height: 1.8;">
113+
<li><strong>Discord:</strong> <a href="https://discord.gg/XUc3tFqCT3">Join our server</a></li>
114+
<li><strong>Twitter/X:</strong> <a href="https://x.com/blackpythondevs">Follow us</a></li>
115+
<li><strong>Instagram:</strong> <a href="https://www.instagram.com/blackpythondevs/">Follow us</a></li>
116+
<li><strong>LinkedIn:</strong> <a href="https://www.linkedin.com/company/black-python-devs">Page</a> | <a href="https://www.linkedin.com/groups/14336241/">Group</a></li>
117+
<li><strong>Email:</strong> <a href="mailto:contact@blackpythondevs.com">contact@blackpythondevs.com</a></li>
118+
</ul>
119+
</div>
118120

119-
<article>
120-
<h3 id="get-involved">Get Involved</h3>
121-
<ul>
122-
<li>Participate in discussions on Discord.</li>
123-
<li>Share your projects and get feedback.</li>
124-
<li>Contribute to our community projects.</li>
125-
<li>Attend our virtual meetups and events.</li>
126-
</ul>
127-
</article>
121+
<div>
122+
<h3 id="get-involved" style="margin-bottom: 1.2rem;">Get Involved</h3>
123+
<ul style="line-height: 1.8;">
124+
<li>Participate in discussions on Discord.</li>
125+
<li>Share your projects and get feedback.</li>
126+
<li>Contribute to our community projects.</li>
127+
<li>Attend our virtual meetups and events.</li>
128+
</ul>
129+
</div>
128130
</div>
129131
</section>
132+
130133
{% endblock %}

‎_layouts/blog-list.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,26 @@
33
<section>
44
<h1>Blog Posts</h1>
55
{% for page in pages %}
6-
<article class="grid">
7-
{% if page.featured_image %}<div><img class="featured-image" src="{{page.featured_image}}" /></div>{% endif %}
6+
<article class="card grid" style="align-items: center; gap: 2rem;">
7+
{% if page.featured_image %}<div><img class="featured-image" src="{{page.featured_image}}" style="width:100%; border-radius: 10px; object-fit:cover;" /></div>{% endif %}
88
<div>
9-
<h2><a href="{{ page }}.html">
9+
<h2 style="margin-bottom: .4rem;"><a href="{{ page }}.html">
1010
{{ page.title }}
1111
</a></h2>
1212
{% if page.description %}
13-
<p>{{page.description}}</p>
13+
<p style="color: var(--bpd-muted); margin-bottom: .6rem;">{{page.description}}</p>
1414
{% endif %}
15-
<small>{% if page.author %}{{page.author | join(", ")}} - {% endif %}<strong>{{page.date | format_datetime}}</strong></small>
15+
<small>{% if page.author %}{{page.author | join(", ")}} <span style="color:var(--bpd-faint);">&middot;</span> {% endif %}<strong>{{page.date | format_datetime}}</strong></small>
1616
</div>
1717
</article>
1818
{% endfor %}
1919
</section>
2020
<section>
21-
<div role="group">
22-
<h4>Pages:</h4>
23-
<div>
21+
<div role="group" style="display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap; margin-top: 2rem;">
22+
<span style="color:var(--bpd-muted); font-weight:500; margin-right:.5rem;">Pages:</span>
2423
{% for page in range(1, num_of_pages|int + 1) %}
2524
<a role="button" {% if page == archive_index %} disabled {% endif %} href="/blog/blog{{page}}.html">{{ page }}</a>
2625
{% endfor %}
2726
</div>
28-
</div>
2927
</section>
3028
{%endblock %}

0 commit comments

Comments
 (0)