adds join us block and updates

Author: kjaymiller

_config.yml

@@ -49,7 +49,7 @@ bpdevs:
     - { platform: mastodon, user_url: "https://mastodon.social/@blackpythondevs" }
     - { platform: youtube, user_url: "https://www.youtube.com/@BlackPythonDevs" }
     - { platform: x, user_url: "https://x.com/blackpythondevs" }
-    - { platform: email, user_url: "mailto:[email protected]" }
+    - { platform: email, user_url: "[email protected]" }
 
 # Build settings
 markdown: kramdown

_includes/join_us.html

@@ -0,0 +1,19 @@
+<div class="grid">
+  <article id="join-us">
+    <h2>Not a member yet?</h2>
+    <p>Are you a Black Python Developer</p>
+    <div class="grid">
+      <a href="https://discord.gg/XUc3tFqCT3" role="button" class="pico-background-violet-650"
+        ><span><i class="fab fa-discord"></i></span> Join our Discord</a
+      >
+      <a href="https://www.linkedin.com/groups/14336241/" role="button" class="pico-background-azure-650"
+        ><span><i class="fab fa-linkedin"></i></span> Join our LinkedIn Group</a
+      >
+    </div>
+  </article>
+  <article id="support">
+    <h2>Want to support us? (Coming Soon)</h2>
+    <p>We're working to establish our non-profit status.</p>
+    <p>Join our <a href="https://buttondown.email/black-python-devs">newsletter</a> and get monthly updates including an announcement when we're ready for your support!</p>
+  </article>
+</div>

_includes/latest-posts.html

@@ -1,7 +1,7 @@
 {% if site.paginate %} {% assign posts = paginator.posts %} {% else %} {% assign posts = site.posts %} {% endif %} {%- if posts.size > 0 -%} {%- if page.list_title -%}
 <h2 class="post-list-heading">{{ page.list_title }}</h2>
 {%- endif -%}
-<div class="post-list">
+<article class="post-list">
   {%- assign date_format = site.bpdevs.date_format | default: "%b %-d, %Y" -%} {% assign count = 0 %} {% assign limit_posts = 3 %} {%- for post in posts -%} {%- if count < limit_posts -%}
   <div>
     <h3>
@@ -11,7 +11,7 @@ <h3>
     {%- if site.show_excerpts -%} {{ post.excerpt }} {%- endif -%}
   </div>
   {%- assign count = count | plus:1 -%} {%- endif -%} {%- endfor -%}
-</div>
+</article>
 
 {% if site.paginate %}
 <div class="pager">

_includes/newsletter_form.html

@@ -1,15 +1,15 @@
-<div id="newsletter">
+<article>
   <h3>Learn what the community and its members are doing from our newsletter!</h3>
-
-  <form action="https://buttondown.email/api/emails/embed-subscribe/black-python-devs" method="post" target="popupwindow" onsubmit="window.open('https://buttondown.email/black-python-devs', 'popupwindow')" class="embeddable-buttondown-form">
-    <input type="email" name="email" id="bd-email" placeholder="Enter your email" />
-
-    <input type="submit" value="Subscribe" />
+  <form action="https://buttondown.email/api/emails/embed-subscribe/black-python-devs" method="post" target="popupwindow" onsubmit="window.open('https://buttondown.email/black-python-devs', 'popupwindow')">
+    <fieldset role="group">
+      <input type="email" name="email" id="bd-email" placeholder="Enter your email" />
+      <input type="submit" value="Subscribe" />
+    </fieldset>
   </form>
   <p>
     <a href="https://buttondown.email/refer/black-python-devs" target="_blank">Powered by Buttondown.</a>
   </p>
   <p>
     <a href="https://buttondown.email/black-python-devs/archive">Read the latest issue.</a>
   </p>
-</div>
+</article>

_layouts/index.html

@@ -3,13 +3,14 @@
 ---
 <div class="home">
   {% assign t = site.data.locales[page.lang][page.lang] %} {% if page.title %} {% assign header = page.title %} {% else %} {% assign header = site.title %} {% endif %}
-  <article class="hero grid">
+  <article class="hero">
     <div class="hero-text">{{ t.index.lead }}</div>
   </article>
   {{ content }}
 
   <img src="{{'/assets/images/dcus.jpg' | relative_url }}" />
 
   {%- include latest-posts.html -%}
+  {%- include join_us.html -%}
   {%- include newsletter_form.html -%}
 </div>

assets/css/bpd.css

@@ -410,9 +410,14 @@ footer {
   background-image: url("/assets/images/hero-bpd-background.jpg");
   background-color: RGBA(25, 25, 25, 0.8);
   height: 25rem;
+  display: flex;
   flex-flow: column;
   justify-content: center;
-  align-items: center;
+}
+
+.hero > p {
+  color: #fff;
+  font-size: larger;
 }
 
 .hero-text {
@@ -426,3 +431,7 @@ img.leadership-photo {
   border-radius: 1em;
   max-width: 10rem;
 }
+
+.post-title > h3 {
+  font-size: smaller;
+}

community.md

@@ -28,7 +28,7 @@ Join our [LinkedIn Group](https://www.linkedin.com/groups/14336241/) to connect
 
 ### **Email** <i class="far fa-envelope"></i>
 
-Contact us via email at [[email protected]](mailto:[email protected]) for inquiries, collaborations, or any other questions.
+Contact us via email at [[email protected]](mailto:[email protected]) for inquiries, collaborations, or any other questions.
 
 ## **Get Involved**
 

index.html

@@ -5,28 +5,27 @@
 list_title: Recently on the blog
 ---
 
-<h2 id="what-is-black-python-devs">What is Black Python Devs</h2>
-<hr />
-
-<article>Black Python Devs is an online-first community for python developers of all skill levels that identify as Black.</article>
 <h2>Our Mission</h2>
-<div class="grid">
+<div class="grid hero-section">
   <article class="pico-background-sand-100">
     <h3>Secure the bag</h3>
     <p>Establish guidance, mentorship, and career support for <em>Black Python Devs</em> Members</p>
     <p><a class="contrast" href="/about">Learn More</a></p>
   </article>
-  <article class="pico-background-pumpkin-500">
-    <h3 class="pico-color-pumpkin-50">Own your masters</h3>
-    <p><a href="/about">Learn More</a></p>
-  </article>
   <article class="pico-background-pumpkin-650">
+    <h3 class="pico-color-pumpkin-50">Diversity By Inclusion</h3>
+    <p class="pico-color-pumpkin-50">We encourage members to get involved beyond participation. Members can become maintainers, maintainers become leaders.</p>
+    <p><a class="contrast" href="/about">Learn More</a></p>
+  </article>
+  <article class="pico-background-pumpkin-800">
     <h3 class="pico-color-pumpkin-50">Extend their reach</h3>
+    <p class="pico-color-pumpkin-50">Great programs exist. Our goal is to help those programs make it our local communities.</p>
     <p><a href="/about">Learn More</a></p>
   </article>
-  <article class="pico-background-pumpkin-800"
+  <article class="pico-background-zinc-800"
   ">
-    <h3 class="pico-color-pumpkin-50">Support the Ecosystem</h3>
+    <h3 class="pico-color-pumpkin-50">Say it loud!</h3>
+    <p class="pico-color-pumpkin-50">Our stack and our decisions are open source by default and we share what we're doing as loudly and often as possible.</p>
     <p><a href="/about">Learn More</a></p>
   </article>
 </div>