mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-05 19:08:32 +02:00
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:
co-authored by
Claude Opus 5
parent
57c71195b3
commit
99d5e1f985
+25
@@ -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'] & {
|
||||||
|
|||||||
+1
-1
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user