Skip to content

Site redesign: Luminous Monolith design system #861

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kjaymiller merged 3 commits into from
Mar 23, 2026
Merged

Site redesign: Luminous Monolith design system #861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e9aa8d7
site redesign
kjaymiller Mar 23, 2026
2778a54
reformat
kjaymiller Mar 23, 2026
2e2c6a7
fix playwright test
kjaymiller Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/playwright.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,6 @@ jobs:
- name: Set up Python
run: uv python install 3.14
- name: Install dependencies
run: uv sync --dev prerelease allow
run: uv sync --dev --prerelease allow
- name: Run Tests
run: uv run pytest -v
388 changes: 388 additions & 0 deletions STYLEGUIDE.md
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 1 addition & 8 deletions _data/leadership.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,7 @@
"title": "Welcoming Team"
}
],
"Advisors": [
"Benedict Koji Amofah",
"Ronald Maravanyika",
"Kojo Idrissa",
"Carol Willing",
"Jeff Triplett",
"Dr. Kari L. Jordan"
],
"Advisors": ["Benedict Koji Amofah", "Ronald Maravanyika", "Kojo Idrissa", "Carol Willing", "Jeff Triplett", "Dr. Kari L. Jordan"],
"Council": [
"Dawn Wages",
"Sarah Abderemane",
Expand Down
10 changes: 5 additions & 5 deletions _layouts/_includes/event-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<article>
<section>
<h2>BPD Organized Events</h2>
<ul>
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(220px, 320px))">
{% for page in data.bpd %}
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
<div class="card" style="padding: 1.25rem 1.5rem"><a href="{{ page.url }}">{{ page.title }}</a></div>
{% endfor %}
</ul>
</article>
</div>
</section>
20 changes: 19 additions & 1 deletion _layouts/_includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,25 @@ <h3>Contact Us</h3>
<address>
<p>Email: <a href="mailto:contact@blackpythondevs.com">contact@blackpythondevs.com </a></p>
</address>
<nav>{%- include "_includes/social.html" -%}</nav>
<nav aria-label="Social media">
<ul class="social-links">
<li>
<a href="https://discord.gg/XUc3tFqCT3" target="_blank" rel="me" title="Discord"><i class="iconoir-discord" aria-hidden="true"></i></a>
</li>
<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>
<li>
<a href="https://x.com/blackpythondevs" target="_blank" rel="me" title="Twitter/X"><i class="iconoir-x" aria-hidden="true"></i></a>
</li>
<li>
<a href="https://www.instagram.com/blackpythondevs/" target="_blank" rel="me" title="Instagram"><i class="iconoir-instagram" aria-hidden="true"></i></a>
</li>
<li>
<a href="https://github.com/BlackPythonDevs" target="_blank" rel="me" title="GitHub"><i class="iconoir-github" aria-hidden="true"></i></a>
</li>
</ul>
</nav>
</div>
</div>
<div class="footer-bottom">
Expand Down
13 changes: 8 additions & 5 deletions _layouts/_includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,30 @@
<h1 class="site-title">
<a class="logo-text" href="/index.html"><img src="{{ '/assets/images/black_python_devs_logo-horizontal-white.png' }}" alt="Black Python Devs" /></a>
</h1>
<nav class="site-navigation" aria-label="Main navigation" style="padding-right: 2em">
<nav class="site-navigation" aria-label="Main navigation">
<div class="site-navigation-wrap">
<ul class="menu" role="menu">
{% 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 %}
<li class="menu-item {{ current }}" role="menuitem">
{% if item.subitems %}
<details class="dropdown">
<summary><i class="{{ item.fa }}" aria-hidden="true"></i>&nbsp;{{ item.text }}</summary>
<summary><i class="{{ item.icon }}" aria-hidden="true"></i>&nbsp;{{ item.text }}</summary>
<ul class="dropdown-menu">
{% for sub in item.subitems %}
<li class="dropdown-item">
<a href="{{ nav_lang }}{{ sub.url }}"><i class="{{ sub.fa }}" aria-hidden="true"></i>&nbsp;{{ sub.text }}</a>
<a href="{{ nav_lang }}{{ sub.url }}"><i class="{{ sub.icon }}" aria-hidden="true"></i>&nbsp;{{ sub.text }}</a>
</li>
{% endfor %}
</ul>
</details>
{% else %}
<a class="{{ current }}" href="{{ nav_lang }}{{ item.url }}"> <i class="{{ item.fa }}" aria-hidden="true"></i>&nbsp;{{ item.text }} </a>
<a class="{{ current }}" href="{{ nav_lang }}{{ item.url }}"><i class="{{ item.icon }}" aria-hidden="true"></i>&nbsp;{{ item.text }}</a>
{% endif %}
</li>
{% endfor %} {% if locales | length > 1 %}
<li class="menu-item" role="menuitem">
<div class="">
<i class="fa fa-language" aria-hidden="true"></i>
<i class="iconoir-language" aria-hidden="true"></i>
<select id="language" class="form-select" aria-label="Language">
{% set locales = locales | sort %} {% for locale in locales %} {% set lang = locale[0] %} {% set locale_name = locale[1][lang].locale_name %} {% if lang == lang %}
<option value="{{ lang }}" selected="selected">{{ locale_name }}</option>
Expand All @@ -47,6 +47,9 @@ <h1 class="site-title">
<!-- .site-navigation-wrap -->
</nav>
<!-- .site-navigation -->
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark/light mode" title="Toggle dark/light mode">
<i class="iconoir-sun-light" aria-hidden="true"></i>
</button>
<button id="menu-open" class="menu-toggle">
<span class="screen-reader-text">Open Menu</span>
<span class="icon-menu" aria-hidden="true"></span>
Expand Down
24 changes: 9 additions & 15 deletions _layouts/_includes/join_us.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
<div class="grid">
<article id="join-us">
<article id="join-us" class="card">
<div class="grid">
<a href="https://discord.gg/XUc3tFqCT3" role="button" class="pico-background-violet-650">
<span style="margin: 0 1rem"> <i class="fab fa-discord"></i></span>
<span> Join our Discord </span>
<a href="https://discord.gg/XUc3tFqCT3" role="button" class="btn-discord">
<i class="iconoir-discord" aria-hidden="true"></i>
<span>Join our Discord</span>
</a>

<a href="https://www.linkedin.com/groups/14336241/" role="button" class="pico-background-azure-650 white-button"
><span style="margin: 0 1rem"><i class="fab fa-linkedin"></i></span>Join our LinkedIn Group</a
>
<a href="https://www.linkedin.com/groups/14336241/" role="button" class="btn-linkedin">
<i class="iconoir-linkedin" aria-hidden="true"></i>
<span>Join our LinkedIn Group</span>
</a>
</div>
</article>
</div>
Expand All @@ -26,12 +27,5 @@ <h2>Support Black Python Devs</h2>
Fund as detailed here.</small
>
</article>
<section>
<h3>Corporate Sponsors</h3>
<div class="grid">
<article class="sponsor">
<img src="/assets/images/gnome-foundation-blue.png" alt="GNOME Foundation Logo" style="height: 2rem" />
</article>
</div>
</section>
{% include "_includes/sponsors.html" %}
</div>
2 changes: 1 addition & 1 deletion _layouts/_includes/partnerships.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ <h2 id="partnerships">Partnerships</h2>
<p>Black Python Devs has partnered with the following organizations to offer discounts and benefits to our community.</p>
<div class="grid">
{% for partner in partnerships %}
<article>
<article class="card">
<header>
<a href="{{partner.url}}">
<img src="{{partner.logo}}" alt="{{partner.name}} logo" style="max-height: 80px; object-fit: contain" />
Expand Down
4 changes: 2 additions & 2 deletions _layouts/_includes/sponsored-events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ <h2>Supported Events</h2>

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

</ul>
<p>Here is a look at events this year that we've supported:</p>
Expand Down
8 changes: 8 additions & 0 deletions _layouts/_includes/sponsors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<section>
<h3>Corporate Sponsors</h3>
<div class="grid">
<article class="sponsor">
<img src="/assets/images/gnome-foundation-blue.png" alt="GNOME Foundation Logo" style="height: 2rem" />
</article>
</div>
</section>
159 changes: 81 additions & 78 deletions _layouts/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{% extends 'default.html' %}
{% block content %}
<article>

<section>
<h1 id="about-black-python-devs">About Black Python Devs</h1>

<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>
Expand All @@ -16,115 +17,117 @@ <h1 id="about-black-python-devs">About Black Python Devs</h1>
</p>

<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>
</article>
<section>
<article>
<h2 id="our-principles">Our Principles</h2>
<ul>
<li><strong>Diverse Leadership:</strong> We build and support diverse leadership in Python globally.</li>
<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>
<li><strong>Collective Voice:</strong> We speak as a collection of Black leaders on how decisions impact Black developers at multiple career levels.</li>
<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>
</ul>
</article>
</section>

<section>
<article>
<h2 id="community-support">Community Support</h2>
<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>
</article>
<h2 id="our-principles">Our Principles</h2>
<ul>
<li><strong>Diverse Leadership:</strong> We build and support diverse leadership in Python globally.</li>
<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>
<li><strong>Collective Voice:</strong> We speak as a collection of Black leaders on how decisions impact Black developers at multiple career levels.</li>
<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>
</ul>
</section>
<h3 id="leadership-team">Leadership Team</h3>

<div class="grid" style="margin: auto; text-align: center">
{% for leader in data['Executors'] %}
<section>
<h2 id="community-support">Community Support</h2>
<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>
</section>

<article class="leadership-photo-container">
{% if leader.image %}
<img class="leadership-photo" alt="photo of {{leader.name}}" src="{{ leader.image }}" />
{% endif %}
<p>
<strong>{{ leader.name }}</strong><br />
{{ leader.title }}
</p>
</article>
<section>
<h2 id="leadership-team">Leadership Team</h2>

<div class="grid" style="margin: auto;">
{% for leader in data['Executors'] %}
<article class="leadership-card">
{% if leader.image %}
<img class="leadership-photo" alt="photo of {{leader.name}}" src="{{ leader.image }}" />
{% endif %}
<div>
<strong>{{ leader.name }}</strong><br />
<small style="color: var(--bpd-muted);">{{ leader.title }}</small>
</div>
</article>
{% endfor %}
</div>
</section>

<section>
<h3 id="team-leads">Team Leads</h3>

<div class="grid" style="margin: auto; text-align: center">
<div class="grid" style="margin: auto;">
{% for leader in data['Leaders'] %}

<article class="leadership-photo-container">
{% if leader.image %}
<img class="leadership-photo" alt="photo of {{leader.name}}" src="{{ leader.image }}" />
{% endif %}
<p>
<strong>{{ leader.name }}</strong><br />
{{ leader.title }}
</p>
</article>
<article class="leadership-card">
{% if leader.image %}
<img class="leadership-photo" alt="photo of {{leader.name}}" src="{{ leader.image }}" />
{% endif %}
<div>
<strong>{{ leader.name }}</strong><br />
<small style="color: var(--bpd-muted);">{{ leader.title }}</small>
</div>
</article>
{% endfor %}
</div>
</section>

<h3 id="advisors">Advisors</h3>
<article class="grid">
{% for group in (data.Advisors | sort | slice(3)) %}
<div>
<section>
<h3 id="advisors">Advisors</h3>
<div class="grid">
{% for group in (data.Advisors | sort | slice(3)) %}
<div>
<ul>
{% for leader in group %}
<li><strong>{{ leader }} </strong><br /></li>
{% endfor %}
{% for leader in group %}
<li><strong>{{ leader }}</strong></li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
{% endfor %}
</article>
</section>

<section>
<h3 id="leadership-council">BPD Leadership Council</h3>

<article>
<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>
<div class="grid">
<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>
<div class="grid">
{% for group in data.Council | sort | slice(3) %}
<div>
<ul>
{% for leader in group %}
{% for leader in group %}
<li><strong>{{ leader }}</strong></li>
{% endfor %}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</article>
</div>
</section>

<section>
<h2 id="join-the-community">Join the Community</h2>
<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>
<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>

<div class="grid">
<article>
<h3 id="connect-with-us">Connect With Us</h3>
<p>We've created spaces where you can connect with us and other community members.</p>
<ul>
<li><strong>Discord:</strong> <a href="https://discord.gg/XUc3tFqCT3">Join our server</a></li>
<li><strong>Twitter/X:</strong> <a href="https://x.com/blackpythondevs">Follow us</a></li>
<li><strong>Instagram:</strong> <a href="https://www.instagram.com/blackpythondevs/">Follow us</a></li>
<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>
<li><strong>Email:</strong> <a href="mailto:contact@blackpythondevs.com">contact@blackpythondevs.com</a></li>
</ul>
</article>
<div class="grid" style="gap: 3rem;">
<div>
<h3 id="connect-with-us" style="margin-bottom: 1.2rem;">Connect With Us</h3>
<p style="margin-bottom: 1.5rem;">We've created spaces where you can connect with us and other community members.</p>
<ul style="line-height: 1.8;">
<li><strong>Discord:</strong> <a href="https://discord.gg/XUc3tFqCT3">Join our server</a></li>
<li><strong>Twitter/X:</strong> <a href="https://x.com/blackpythondevs">Follow us</a></li>
<li><strong>Instagram:</strong> <a href="https://www.instagram.com/blackpythondevs/">Follow us</a></li>
<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>
<li><strong>Email:</strong> <a href="mailto:contact@blackpythondevs.com">contact@blackpythondevs.com</a></li>
</ul>
</div>

<article>
<h3 id="get-involved">Get Involved</h3>
<ul>
<li>Participate in discussions on Discord.</li>
<li>Share your projects and get feedback.</li>
<li>Contribute to our community projects.</li>
<li>Attend our virtual meetups and events.</li>
</ul>
</article>
<div>
<h3 id="get-involved" style="margin-bottom: 1.2rem;">Get Involved</h3>
<ul style="line-height: 1.8;">
<li>Participate in discussions on Discord.</li>
<li>Share your projects and get feedback.</li>
<li>Contribute to our community projects.</li>
<li>Attend our virtual meetups and events.</li>
</ul>
</div>
</div>
</section>

{% endblock %}
Loading
Loading