adds pico colors

Author: kjaymiller

_data/locales/en.yml

@@ -8,7 +8,7 @@ en:
     - Conferences
     - Community
   index:
-    lead: Blacker than your formatter
+    lead: Extending the Python Community to our Communities
   article:
     table_of_contents: Table of Contents
   footer:

_includes/footer.html

@@ -1,6 +1,6 @@
 <footer role="contentinfo">
   <div class="wrapper">
-    <div class="social-links">{%- include social.html -%}</div>
+    <nav class="social-links">{%- include social.html -%}</nav>
     <div class="footer-col-wrapper">
       <div class="footer-col">
         <small>&copy; {{ 'now' | date: "%Y" }} {{ site.domain }}</small>

_includes/latest-posts.html

@@ -0,0 +1,32 @@
+{% 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">
+  {%- 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>
+      <a class="" href="{{ post.url | relative_url }}"> {{ post.title | escape }} </a>
+    </h3>
+    <span class="post-meta">{{ post.date | date: date_format }}</span>
+    {%- if site.show_excerpts -%} {{ post.excerpt }} {%- endif -%}
+  </div>
+  {%- assign count = count | plus:1 -%} {%- endif -%} {%- endfor -%}
+</div>
+
+{% if site.paginate %}
+<div class="pager">
+  <ul class="pagination">
+    {%- if paginator.previous_page %}
+    <li><a href="{{ paginator.previous_page_path | relative_url }}" class="previous-page">{{ paginator.previous_page }}</a></li>
+    {%- else %}
+    <li><div class="pager-edge">•</div></li>
+    {%- endif %}
+    <li><div class="current-page">{{ paginator.page }}</div></li>
+    {%- if paginator.next_page %}
+    <li><a href="{{ paginator.next_page_path | relative_url }}" class="next-page">{{ paginator.next_page }}</a></li>
+    {%- else %}
+    <li><div class="pager-edge">•</div></li>
+    {%- endif %}
+  </ul>
+</div>
+{%- endif %} {%- endif -%}

_includes/posts.html

@@ -8,27 +8,24 @@
   {%- if page.list_title -%}
     <h2 class="post-list-heading">{{ page.list_title }}</h2>
   {%- endif -%}
-  <ul class="post-list">
+  <div 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 -%}
-    <li>
-      <span class="post-meta">{{ post.date | date: date_format }}</span>
+    <div>
       <h3>
         <a class="post-link" href="{{ post.url | relative_url }}">
           {{ post.title | escape }}
         </a>
       </h3>
+      <span class="post-meta">{{ post.date | date: date_format }}</span>
       {%- if site.show_excerpts -%}
-        {{ post.excerpt }}
+      {{ post.excerpt }}
       {%- endif -%}
-    </li>
+    </div>
       {%- assign count = count | plus:1 -%}
-      {%- endif -%}
     {%- endfor -%}
-  </ul>
+  </div>
 
   {% if site.paginate %}
     <div class="pager">

_layouts/default.html

@@ -6,6 +6,8 @@
     <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}" />
     <title>{% if page.title %}{{ site.title }} | {{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
     <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}" />
+    <link rel="stylesheet" href="{{ '/assets/css/pico.min.css' | relative_url }}" />
+    <link rel="stylesheet" href="{{ '/assets/css/pico.colors.min.css' | relative_url }}" />
     <link rel="stylesheet" href="{{ '/assets/css/bpd.css' | relative_url }}" />
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
     <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ '/feed.xml' | prepend: site.baseurl | prepend: site.url }}" />
@@ -28,10 +30,8 @@
 
   <body>
     {%- include header.html -%}
-    <main role="main"  class="page-content" aria-label="Content">
-      <div class="wrapper">
+    <main class="container" role="main" aria-label="Content">
         {{ content }}
-      </div>
     </main>
     {%- include footer.html -%}
     <script src="{{ '/assets/js/index.js' | relative_url }}"></script>

_layouts/index.html

@@ -3,11 +3,13 @@
 ---
 <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 %}
-  <h1 class="page-heading">{{ t.index.lead }}</h1>
-
+  <article class="hero grid">
+    <div class="hero-text">{{ t.index.lead }}</div>
+  </article>
   {{ content }}
 
+  <img src="{{'/assets/images/dcus.jpg' | relative_url }}" />
 
-  {%- include posts.html -%}
+  {%- include latest-posts.html -%}
   {%- include newsletter_form.html -%}
 </div>

about.md

@@ -14,7 +14,9 @@ We're here to amplify your voice, not the other way around. That's why we're hap
 
 Any content that a member contributes to the community is given to them to publish as they please. That means if it's on our platforms, they allowed us to publish and have the right to change their mind at any time.
 
-### Secure the Bag: Establish guidance, mentorship, and career support for _Black Python Devs_ Members
+### Secure the Bag:
+
+**Establish guidance, mentorship, and career support for _Black Python Devs_ Members**
 
 Lack of stable employment often prevents members from contributing to the greater community at their desired leve. It is important that Black Python Developers are first and foremost employed and compensated at a fair rate and given opportunities to thrive.
 
@@ -44,24 +46,24 @@ To do this we're hoping to gather folks from around the world and see where our
 
 ### Executor: Jay Miller
 
-<div style="display:flex; flex-wrap: wrap;" markdown="1">
+<div class="grid" style="display:flex; flex-wrap: wrap;" markdown="1">
 
 <div style="display:flex">
-<img style="margin: 0 1rem; border-radius:1em" height="150px" alt="photo of Jay" src="https://github.com/kjaymiller.png">
+<img class="leadership-photo" alt="photo of Jay" src="https://github.com/kjaymiller.png">
 <p> Jay is a founder of Black Python Devs. Jay is an American Developer Advocate based in the Atlanta, Georgia area. </p>
 </div>
 
 ### Technical Manager: Oleksis Fraga
 
 <div style="display:flex">
-<img style="margin: 0 1rem; border-radius:1em" height="150px" alt="photo of Oleksis" src="https://github.com/oleksis.png">
+<img class="leadership-photo" alt="photo of Oleksis" src="https://github.com/oleksis.png">
 <p> Oleksis is a Cuban software engineer and open-source maintainer based in the Toronto Canada area.</p>
 </div>
 
 ### Events Coordinator: Velda Kiara
 
 <div style="display:flex">
-<img style="margin: 0 1rem; border-radius:1em" height="150px" alt="photo of Velda" src="https://github.com/VeldaKiara.png">
+<img class="leadership-photo" alt="photo of Velda" src="https://github.com/VeldaKiara.png">
 <p> Velda is a Kenyan software engineer and technical writer based in Nairobi.</p>
 </div>
 

assets/css/bpd.css

@@ -1,8 +1,6 @@
 body {
   /* color: #6b747a; */
   line-height: 1.66667;
-  padding-left: 30px;
-  padding-right: 30px;
 }
 
 main.page-content div.wrapper p img {
@@ -200,23 +198,12 @@ div#newsletter {
   border-bottom: 1px solid #d7d7d7;
   align-items: center;
   display: flex;
-  padding-bottom: 3.33333em;
-  padding-top: 2.5em;
-}
-
-.site-title {
-  color: #2c343c;
-  /* font-family: "Noto Serif",Georgia,serif; */
-  font-size: 1.66667rem;
-  font-weight: 700;
-  letter-spacing: -1px;
-  line-height: 1.2;
-  margin: 0 15px 0 0;
+  padding: 1.33333rem 0.5rem;
+  background-color: #222;
 }
 
 a.logo-text img {
-  width: 247px;
-  height: 46px;
+  width: 15rem;
 }
 
 @media only screen and (max-width: 600px) {
@@ -321,7 +308,7 @@ a.logo-text img {
   }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 1080px) {
   #menu-close {
     right: 30px;
     top: 2.2rem;
@@ -416,3 +403,26 @@ footer {
   padding: 30px 0;
   flex: 1 0 auto;
 }
+
+.hero {
+  width: 100%;
+  /* background-color: #222; */
+  background-image: url("/assets/images/hero-bpd-background.jpg");
+  background-color: RGBA(25, 25, 25, 0.8);
+  height: 25rem;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.hero-text {
+  font-size: 2rem;
+  font-weight: 100;
+  color: #fff;
+  font-style: italic;
+}
+img.leadership-photo {
+  margin: 0 1rem;
+  border-radius: 1em;
+  max-width: 10rem;
+}