lightweight blog list in member bios

Author: alandefreitas

_includes/team-blog.html

@@ -1,18 +1,17 @@
-<!-- Blog section-->
-{% assign n = site.categories[{{page.id}}] | size %}
-{% if n != 0 %}
-<section class="section news">
-  <div class='section-title'>
-    <h2 class='header text-xl'>Blog</h2>
-    <h2 class='header-shadow'>Blog</h2>
-  </div>
-  <ul>
-  {% for post in site.categories[{{page.id}}] %}
-    <li class='news-list-item'>
-      <span class='text-s news-date'>{{ post.date | date: "%m/%d/%Y"}}</span>
-      <a class='text-l news-title link' href="{{site.baseurl}}{{ post.url }}">{{ post.title }}</a>
-    </li class='news-list-item'>
-  {% endfor %}
+<!-- Blog posts authored by the current team member -->
+{% assign author_posts = site.categories[page.id] %}
+{% if author_posts and author_posts.size > 0 %}
+<div class="member-posts">
+  <p class="text-xxs member-posts-heading">Blog posts</p>
+  <ul class="member-posts-list">
+    {% for post in author_posts %}
+    <li class="member-posts-item">
+      <a class="member-posts-link" href="{{ site.baseurl }}{{ post.url }}">
+        <strong class="member-posts-date">{{ post.date | date: "%m/%d/%Y" }}</strong>
+        {{ post.title }}
+      </a>
+    </li>
+    {% endfor %}
   </ul>
-</section>
+</div>
 {% endif %}

_layouts/team.html

@@ -24,11 +24,11 @@ <h3 class='text-m name'>{{ page.member-name }}</h3>
         <!-- member bio-->
         <div class='text-xxs generated-content'>{{ content }}</div>
 
+        {% include team-blog.html %}
+
         <a class='text-xxs all' href="{{ site.baseurl }}/#team">View Full Team...</a>
       </div>
     </div>
   </section>
 
-  {% include team-blog.html %}
-
 </div>

_sass/pages/team.scss

@@ -115,20 +115,47 @@
     }
   }
 
-  .news {
-    background: $color--gray;
-    padding: 65px $spacing--l 40px;
+  .member-posts {
+    margin-top: 32px;
 
     @include breakpoint($desktop-small) {
-      padding: 150px 100px 95px;
+      margin-top: 40px;
     }
+  }
 
-    @include breakpoint($desktop-large) {
-      padding: 170px 245px 115px;
+  .member-posts-heading {
+    margin-bottom: 12px;
+    font-weight: 600;
+  }
+
+  .member-posts-list {
+    margin: 0;
+    padding-left: 18px;
+    list-style: disc;
+  }
+
+  .member-posts-item {
+    margin-bottom: 8px;
+    line-height: 1.4;
+  }
+
+  .member-posts-link {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
     }
+  }
+
+  .member-posts-date {
+    font-weight: 600;
+    white-space: nowrap;
+    display: inline;
 
-    .header-shadow {
-      color: $color--slate;
+    &::after {
+      content: "\00a0";
     }
   }
 }