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

_includes/post-meta.html

@@ -0,0 +1,7 @@
+{% 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>

_includes/post-preview.html

@@ -0,0 +1,31 @@
+{% assign post = include.post %}
+
+{%- capture excerpt_link_url -%}
+  {%- if post.excerpt_link_url -%}
+    {{ post.excerpt_link_url }}
+  {%- else -%}
+    {{ site.baseurl }}{{ post.url }}
+  {%- endif -%}
+{%- endcapture -%}
+
+<article id="{{ post.id | default: post.title | slugify }}" 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="{{ excerpt_link_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,17 @@
 {% 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">
-    <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 %}
-      {{ post.title }}
-      {% if include.excerpt %}</a>{% endif %}
-    </h1>
+<header>
+  <p class="post-category site-subheading">
+    {{ post.tags[0] }}
+  </p>
 
-    {% 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>
-  </header>
+  <h1 class="post-title">
+    {{ post.title }}
+  </h1>
 
-  <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>
+  {% include post-meta.html %}
+</header>
 
-    <p class="post-more margin-top-2"><a href="{{ site.baseurl }}{{ post.url }}">Continue reading</a></p>
-  {% else %}
-    {{ post.content }}
-  {% endif %}
-  </div>
-</article>
+<div class="post-content site-prose">
+  {{ post.content }}
+</div>

_posts/2024-10-15-sunsetting-uswds-1-0.md

@@ -0,0 +1,8 @@
+---
+title: Sunsetting the USWDS 1.0 documentation site
+tags:
+- product update
+category: About
+excerpt: It's been over five years since we launched USWDS 2.0 and moved on from USWDS v1. We archived the USWDS v1 documentation site a few years back, and at the end of 2024 we'll be taking it offline. Content will likely still be available via archive.org.
+excerpt_link_url: https://v1.designsystem.digital.gov/
+---

_posts/2024-10-17-uswds-3.9.0.md

@@ -0,0 +1,7 @@
+---
+title: "Out now: USWDS 3.9.0"
+tags:
+- USWDS release
+category: About
+excerpt_link_url: https://github.com/uswds/uswds/releases/tag/v3.9.0
+---

_posts/2024-10-19-accessibility-inclusive-user-experiences copy.md

@@ -0,0 +1,8 @@
+---
+title: "Accessibility focus: Going beyond visual design for inclusive user experiences"
+tags:
+- discussion
+category: About
+excerpt: This National Disability Employment Awareness Month, we’re talking about how members of the design community go beyond visual design to create more inclusive user experiences. What steps are you taking to ensure that your website design is accessible to all?
+excerpt_link_url: https://github.com/uswds/uswds/discussions/6109
+---

_posts/2024-11-01-web-components-are-coming.md

@@ -0,0 +1,16 @@
+---
+title: Web Components are coming to USWDS
+tags:
+- product update
+category: About
+author: Dan O. Williams, James Mejia, Amy Leadem, Charlie Mahoney
+excerpt: Big changes are coming to the U.S. Web Design System in a Web Components-based generation. Ideal for small teams with limited development resources, this next generation of the design system promises to be a practical, usable, powerful tool for designers and developers to do their work.
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius diam sapien. In non urna neque. Morbi semper, enim et consectetur pulvinar, ex arcu faucibus sem, sed volutpat leo libero id massa. Vivamus interdum lobortis augue, ut posuere felis porttitor et. Sed feugiat sit amet lectus at ullamcorper.
+
+Aliquam sed convallis urna. Nulla laoreet ullamcorper aliquet. Fusce eu metus est. Morbi ut hendrerit ligula. Etiam sit amet ligula sollicitudin, pellentesque est vel, efficitur massa.
+
+Pellentesque ullamcorper, ante in vestibulum imperdiet, purus sem auctor nibh, eu condimentum sem sapien eget risus. Nunc malesuada, velit quis semper accumsan, est risus auctor velit, sed faucibus nunc mauris nec nisl. Vestibulum maximus felis sed pellentesque pharetra. Pellentesque viverra dolor a semper tincidunt. Nam a arcu tortor. Curabitur interdum eros odio, nec facilisis lorem congue ut.
+
+Donec quis eros eu erat efficitur interdum eu ut velit. Nam eget tincidunt est. Nam ornare mi non velit laoreet, at rhoncus orci hendrerit. Donec turpis nisl, lobortis a nisl eu, pulvinar aliquam eros. Etiam massa sem, fringilla et porta ut, posuere in eros. Nullam metus lectus, aliquam quis maximus sed, consequat et nisl. Mauris ultricies sed velit vel tincidunt. Nullam tempor consequat luctus.

css/_uswds-theme-custom-styles.scss

@@ -1568,47 +1568,55 @@ iframe {
   margin-bottom: units(4);
 }
 
-.post-excerpt {
-  margin-top: units(5);
+.post-preview {
+  @include u-border-top("1px", "gray-30");
+  @include u-margin-y(3);
+  @include u-measure(6);
 
-  .post-title {
-    margin-top: 0;
-    margin-bottom: 0;
+  .post-preview__title,
+  .post-preview_content,
+  .post-preview__header,
+  .post-category {
+    @include u-margin-y(2);
+  }
+
+  .post-preview__header {
+    @include u-margin-top(3);
+  }
+
+  .post-preview__title {
+    @include typeset("lang", "lg", 3);
+    @include u-text("bold");
 
     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-preview__content p {
+    @include u-font("lang", "xs");
   }
-} // .post-excerpt
+} // .post-preview
 
-.post-date {
+.post-date.site-subheading {
+  @include u-margin-y("105");
   display: block;
   letter-spacing: normal;
   text-transform: none;
 }
 
 .post-title {
-  @include typeset-h2;
   @include u-measure(1);
+  @include typeset("lang", "xl", 2);
+  @include u-text("thin");
+
+  @include at-media("tablet") {
+    @include typeset("lang", "2xl", 2);
+  }
 }
 
 .post-outdated-content {
@@ -3186,8 +3194,13 @@ body {
   }
 }
 
-.post-content h2 {
-  line-height: lh("lang", 2);
+.post-content {
+  @include u-margin-top(4);
+  @include u-measure(4);
+
+  h2 {
+    line-height: lh("lang", 2);
+  }
 }
 
 .page-website-standards {

pages/whats-new/all-news.md

@@ -9,5 +9,5 @@ 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

@@ -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 %}
 
 ---