Make Latest Articles stand out on the Articles landing page

The Articles landing page rendered ten visually identical blocks: Latest
Articles followed by nine category shelves, all with the same heading and
the same cards, so the newest work had no visual priority.

Give the Latest block a featured treatment: tinted surface, brand-red top
rule, rounded border, and a larger section heading, via a new
docs-articles__block_featured modifier. Light-theme overrides follow the
existing [data-theme='light'] convention in the same file. The nine
category blocks are untouched.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kanungle
2026-07-30 14:06:25 -07:00
co-authored by Claude Opus 5
parent 57c71195b3
commit 99d5e1f985
2 changed files with 26 additions and 1 deletions
@@ -34,6 +34,27 @@
} }
} }
// Featured treatment for the "Latest Articles" block, so it reads as the
// page's entry point rather than one more category shelf.
&__block_featured {
padding: $spacer * 1.5;
background-color: rgba($neutral-20, 0.4);
border: pxToRem(1) solid $neutral-20;
border-top: pxToRem(3) solid $primary-50;
border-radius: $spacer * 0.5;
.docs-articles__title {
font-size: $spacer * 2;
line-height: $spacer * 2.5;
}
[data-theme='light'] & {
background-color: $neutral-100;
border-color: $neutral-90;
border-top-color: $primary-50;
}
}
&__list { &__list {
padding-bottom: $spacer * 3; padding-bottom: $spacer * 3;
} }
@@ -120,6 +141,10 @@
gap: $spacer * 4; gap: $spacer * 4;
} }
} }
&__block_featured {
padding: $spacer * 2.5;
}
} }
[data-theme='light'] & { [data-theme='light'] & {
@@ -26,7 +26,7 @@
{{ end }} {{ end }}
{{ $latest = $latest.ByPublishDate.Reverse }} {{ $latest = $latest.ByPublishDate.Reverse }}
{{ if gt (len $latest) 0 }} {{ if gt (len $latest) 0 }}
<div class="docs-articles__block"> <div class="docs-articles__block docs-articles__block_featured">
<div class="docs-articles__block-header"> <div class="docs-articles__block-header">
<div> <div>
<h4 class="docs-articles__title">Latest Articles</h4> <h4 class="docs-articles__title">Latest Articles</h4>