added teaser to each article

_includes/articleslist.njk

@@ -5,6 +5,7 @@
         <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
       </h2>
       <time class="post-date icon--date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
+      <p class="post-teaser">{{ post.data.teaser }}</p>
       <ul class="post-tags list-reset">
       {% for tag in post.data.tags | filterTagList %}
         {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}

articles/all-about-asset-loading.md

@@ -2,6 +2,7 @@
 layout: article
 title: All About Asset Loading
 date: 2022-05-05
+teaser: When, where, and how things are loaded can impact a user's experience and page performance.
 tags:
 - Web Performance
 audience:

articles/color-contrast-requirements.md

@@ -2,6 +2,7 @@
 layout: article
 title: Color Contrast Requirements
 date: 2022-03-15
+teaser: How to ensure colors have enough contrast to remain accessible for everyone.
 tags:
 - Accessibility
 audience:

articles/image-formats-for-the-web.md

@@ -2,6 +2,7 @@
 layout: article
 title: Image Formats for the Web
 date: 2022-03-07
+teaser: Know what image format type to use in different scenarios.
 tags:
 - Images
 - Web Content

articles/making-images-accessible.md

@@ -2,6 +2,7 @@
 layout: article
 title: Making Images Accessible
 date: 2022-03-08
+teaser: Alt text on images is required for accessibility and can also help with SEO.  
 tags:
 - Accessibility
 - SEO

articles/writing-performant-css.md

@@ -2,6 +2,7 @@
 layout: article
 title: Writing Performant CSS
 date: 2022-04-19
+teaser: CSS is a blocking resource. Here's how to structure it to make sure its performance impact is minimized.
 tags:
 - CSS
 - Web Performance

index.njk

@@ -11,6 +11,7 @@ title: Recent Articles
           <a href="{{ article.url | url }}" class="postlist-link">{% if article.data.title %}{{ article.data.title }}{% else %}<code>{{ article.url }}</code>{% endif %}</a>
         </h2>
         <time class="post-date icon--date" datetime="{{ article.date | htmlDateString }}">{{ article.date | readableDate }}</time>
+        <p class="post-teaser">{{ article.data.teaser }}</p>
         <ul class="post-tags list-reset">
           {% for tag in article.data.tags | filterTagList %}
             {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}

src/css/components/postlist.css

@@ -1,5 +1,12 @@
+.postlist {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr) ) ;
+  gap: var(--size-4);
+}
+
 .postlist-item {
-  border-bottom: 1px solid var(--gray-4);
-  padding-bottom: var(--size-6);
-  margin-bottom: var(--size-6);
+  border: 1px solid var(--gray-2);
+  border-radius: var(--size-1);
+  box-shadow: 0 0 var(--size-2) var(--gray-4);
+  padding: var(--size-4);
 }

src/css/layout/header.css

@@ -6,7 +6,7 @@
 .button--skip-link {
   background: var(--bg);
   border: var(--border-size-2) solid var(--black-1);
-  border-radius: var(--size-2);
+  border-radius: var(--size-1);
   color: var(--black-1);
   display: inline-block;
   line-height: 1;