USWDS-Site - What's new: Update post preview structure and styles

_includes/post-meta.html

@@ -0,0 +1,15 @@
+{% comment %}
+  Date and author info for posts.
+
+  Used in _posts and post previews on `/about/whats-new/`
+{% endcomment %}
+
+<div class="post-meta">
+  {% if post.author %}
+    <span class="site-subheading">By {{ post.author }}</span>
+  {% endif %}
+
+  <time class="site-subheading" datetime="{{ post.date | date: '%FT%T' }}">
+    {{ post.date | date: '%B %-d, %Y' }}
+  </time>
+</div>

_includes/post-preview.html

@@ -0,0 +1,38 @@
+{% comment %}
+  Post previews used in the news feeds found on:
+  - `/about/whats-new/`
+  - `/about/whats-new/all`
+{% endcomment %}
+
+{% assign post = include.post %}
+{% assign post_id = post.title | default: post.id | slugify %}
+
+{% comment %}
+  Assign header link url
+  - default: link to the post's generated page
+  - custom: link to a custom location declared in `post.preview_url`
+{% endcomment %}
+{% assign post_url = site.baseurl | append: post.url %}
+{% assign preview_url = post.preview_url | default: post_url %}
+
+<article id="{{ post_id }}" class="post-preview">
+  <header class="post-preview__header">
+    <p class="post-category site-subheading">
+      {{ post.tags[0] }}
+    </p>
+
+    <{{ include.heading | default:"h2" }} class="post-preview__title">
+      <a href="{{ preview_url }}">
+        {{ post.title }}
+      </a>
+    </{{ include.heading | default:"h2" }}>
+
+    {% include post-meta.html %}
+  </header>
+
+  <div class="post-preview__content site-prose">
+    <p>
+      {{ post.lead | default: post.excerpt }}
+    </p>
+  </div>
+</article>

_includes/post.html

@@ -1,33 +1,22 @@
+{% comment %}
+  Structure for the pages inside of _posts
+{% endcomment %}
+
 {% assign post = include.post %}
-<article id="{{ post.id | default: post.title | slugify }}"{% if include.excerpt %} class="post-excerpt padding-top-2 border-top-2px margin-top-4 measure-6"{% endif %}>
-  <header class="post-meta">
+<article>
+  <header>
     <p class="post-category site-subheading">
       {{ post.tags[0] }}
     </p>
 
-    <h1 class="post-title font-lang-11 tablet:font-lang-14 text-thin">
-      {% if include.excerpt %}<a href="{{ site.baseurl }}{{ post.url }}">{% endif %}
+    <h1 class="post-title">
       {{ post.title }}
-      {% if include.excerpt %}</a>{% endif %}
     </h1>
 
-    {% if post.author %}
-    <span class="post-date site-subheading">By {{ post.author }}</span>
-    {% endif %}
-    <time class="post-date site-subheading" datetime="{{ post.date | date: '%FT%T' }}">
-      {{ post.date | date: '%B %-d, %Y' }}
-    </time>
+    {% include post-meta.html %}
   </header>
 
-  <div class="post-content site-prose {% if include.excerpt == true %}{% else%}measure-4 {% endif %}margin-top-4">
-  {% if include.excerpt == true %}
-    <p class="post-excerpt">
-      {{ post.lead | default: post.excerpt }}
-    </p>
-
-    <p class="post-more margin-top-2"><a href="{{ site.baseurl }}{{ post.url }}">Continue reading</a></p>
-  {% else %}
+  <div class="post-content site-prose">
     {{ post.content }}
-  {% endif %}
   </div>
 </article>

css/_uswds-theme-custom-styles.scss

@@ -7,6 +7,8 @@
 @import "custom-styles/highlight";
 @import "custom-styles/copy-code-btn";
 @import "custom-styles/graphic-list";
+@import "custom-styles/posts";
+
 
 // ========================================
 // CUSTOM PROJECT SASS
@@ -1568,69 +1570,7 @@ iframe {
   margin-bottom: units(4);
 }
 
-.post-excerpt {
-  margin-top: units(5);
-
-  .post-title {
-    margin-top: 0;
-    margin-bottom: 0;
-
-    a {
-      color: inherit;
-      text-decoration: none;
-
-      &:hover {
-        color: color($site-primary);
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .post-category {
-    margin-top: 0;
-  }
 
-  .post-category + .post-title {
-    margin-top: 0;
-  }
-
-  .post-content p {
-    margin-bottom: 0;
-    margin-top: units(0.5);
-  }
-} // .post-excerpt
-
-.post-date {
-  display: block;
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-.post-title {
-  @include typeset-h2;
-  @include u-measure(1);
-}
-
-.post-outdated-content {
-  margin-bottom: units(4);
-  margin-top: units(-5);
-  z-index: z-index("top");
-
-  @include at-media("tablet") {
-    position: sticky;
-    top: 0;
-  }
-
-  @include at-media("desktop") {
-    margin-left: units(4);
-    margin-top: 0;
-    top: units($height-nav-secondary);
-  }
-
-  .usa-alert__body {
-    margin-left: 0;
-  }
-}
 
 // Utilities CSS --------------------- //
 
@@ -3186,10 +3126,6 @@ body {
   }
 }
 
-.post-content h2 {
-  line-height: lh("lang", 2);
-}
-
 .page-website-standards {
   .site-subheading {
     display: none;

css/custom-styles/_posts.scss

@@ -0,0 +1,80 @@
+.post-preview {
+  @include u-border-top("1px", "gray-30");
+  @include u-margin-y(3);
+  @include u-measure(6);
+
+  &__title,
+  &__content,
+  &__header,
+  .post-category {
+    @include u-margin-y(2);
+  }
+
+  &__header {
+    @include u-margin-top(3);
+  }
+
+  &__title {
+    @include typeset("lang", "lg", 3);
+    @include u-text("bold");
+
+    a {
+      color: inherit;
+
+      &:hover {
+        color: color($site-primary);
+      }
+    }
+  }
+
+  &__content p {
+    @include u-font("lang", "xs");
+  }
+}
+
+.post-meta .site-subheading {
+  @include u-margin-y("105");
+  display: block;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.post-title {
+  @include u-measure(1);
+  @include typeset("lang", "xl", 2);
+  @include u-text("thin");
+
+  @include at-media("tablet") {
+    @include typeset("lang", "2xl", 2);
+  }
+}
+
+.post-content {
+  @include u-margin-top(4);
+  @include u-measure(4);
+
+  h2 {
+    line-height: lh("lang", 2);
+  }
+}
+
+.post-outdated-content {
+  margin-bottom: units(4);
+  margin-top: units(-5);
+  z-index: z-index("top");
+
+  @include at-media("tablet") {
+    position: sticky;
+    top: 0;
+  }
+
+  @include at-media("desktop") {
+    margin-left: units(4);
+    margin-top: 0;
+    top: units($height-nav-secondary);
+  }
+
+  .usa-alert__body {
+    margin-left: 0;
+  }
+}

pages/whats-new/all-news.md

@@ -1,13 +1,13 @@
 ---
 title: All news and updates
 layout: styleguide
-lead: Here's the full listing of all USWDS product updates, articles, case studies and more.
+lead: The full listing of all USWDS product updates, articles, case studies and more.
 permalink: /about/whats-new/all/
 category: About
 type: posts
 in_page_nav_headings: false
 ---
 
 {% for post in site.posts %}
-  {% include post.html post=post excerpt=true %}
+  {% include post-preview.html post=post %}
 {% endfor %}

pages/whats-new/overview.md

@@ -3,7 +3,7 @@ permalink: /about/whats-new/
 layout: styleguide
 title: What’s new
 category: About
-lead: Here you can find the latest news and information about USWDS. Learn more about our product development and process, dive deeper into our monthly call topics, and see how we work with our partners to impact the government technology space.
+lead: Get the latest USWDS news and information here. Learn more about our product development and process, dive deeper into our monthly call topics, and see how we work with our partners to improve the government technology space.
 columns:
   - title: New users
     source: New Users
@@ -34,6 +34,7 @@ cards:
     body: "How our growing community of government engineers, content specialists, and designers participate and contribute to improving USWDS."
     linkText: "USWDS GitHub discussion"
     linkUrl: "https://github.com/uswds/uswds/discussions"
+in_page_nav_headings: "h2"
 ---
 
 {% include site-card-list.html
@@ -42,10 +43,11 @@ cards:
   listItemClasses="desktop:grid-col-6"
 %}
 
+{:.margin-top-2.text-normal.font-lang-md.text-gray-70}
 ## News and updates
 
 {% for post in site.posts limit:4 %}
-  {% include post.html post=post excerpt=true %}
+  {% include post-preview.html post=post heading="h3"%}
 {% endfor %}
 
 ---