diff --git a/_includes/post-meta.html b/_includes/post-meta.html new file mode 100644 index 0000000000..f2ac1adcb7 --- /dev/null +++ b/_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 %} + +
+ {% if post.author %} + By {{ post.author }} + {% endif %} + + +
diff --git a/_includes/post-preview.html b/_includes/post-preview.html new file mode 100644 index 0000000000..aef398533e --- /dev/null +++ b/_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 %} + +
+
+

+ {{ post.tags[0] }} +

+ + <{{ include.heading | default:"h2" }} class="post-preview__title"> + + {{ post.title }} + + + + {% include post-meta.html %} +
+ +
+

+ {{ post.lead | default: post.excerpt }} +

+
+
diff --git a/_includes/post.html b/_includes/post.html index 8648e528d4..9865ce527d 100644 --- a/_includes/post.html +++ b/_includes/post.html @@ -1,33 +1,22 @@ +{% comment %} + Structure for the pages inside of _posts +{% endcomment %} + {% assign post = include.post %} -
-
+
+

{{ post.tags[0] }}

-

- {% if include.excerpt %}{% endif %} +

{{ post.title }} - {% if include.excerpt %}{% endif %}

- {% if post.author %} - By {{ post.author }} - {% endif %} - + {% include post-meta.html %}

-
- {% if include.excerpt == true %} -

- {{ post.lead | default: post.excerpt }} -

- -

Continue reading

- {% else %} +
{{ post.content }} - {% endif %}
diff --git a/css/_uswds-theme-custom-styles.scss b/css/_uswds-theme-custom-styles.scss index 8bd287d5b0..6ef34f8e9e 100644 --- a/css/_uswds-theme-custom-styles.scss +++ b/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; diff --git a/css/custom-styles/_posts.scss b/css/custom-styles/_posts.scss new file mode 100644 index 0000000000..d34a481974 --- /dev/null +++ b/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; + } +} diff --git a/pages/whats-new/all-news.md b/pages/whats-new/all-news.md index de257046ab..21f609fcf5 100644 --- a/pages/whats-new/all-news.md +++ b/pages/whats-new/all-news.md @@ -1,7 +1,7 @@ --- 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 @@ -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 %} diff --git a/pages/whats-new/overview.md b/pages/whats-new/overview.md index a61bcb85bb..69658bcbd2 100644 --- a/pages/whats-new/overview.md +++ b/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 %} ---