From a6013ee59e6c5123f420cc17b7400e301b7bd2b2 Mon Sep 17 00:00:00 2001 From: Richard Dern Date: Fri, 3 Apr 2026 00:34:49 +0200 Subject: [PATCH] Harmonise le bloc des articles relatifs --- themes/2026/assets/css/content.css | 87 ++++++++----------- .../layouts/_partials/article-asides.html | 6 +- .../layouts/_partials/article-related.html | 6 +- themes/2026/layouts/page.html | 1 - 4 files changed, 42 insertions(+), 58 deletions(-) diff --git a/themes/2026/assets/css/content.css b/themes/2026/assets/css/content.css index 2fc40174..331f7ecb 100644 --- a/themes/2026/assets/css/content.css +++ b/themes/2026/assets/css/content.css @@ -67,7 +67,7 @@ main nav.articles-list article > a { } main nav.articles-list figure { - margin-top: 0; + margin: 0; min-height: 11rem; background: linear-gradient(150deg, rgba(118, 167, 215, 0.12) 0%, rgba(93, 134, 173, 0.09) 50%, rgba(195, 208, 223, 0.08) 100%); border: 1px solid var(--color-border); @@ -303,93 +303,71 @@ main > article li + li { margin-top: 0.35rem; } -main > article > section.article-related { - margin-top: var(--space-6); - border-top: 1px solid var(--color-border); - padding-top: var(--space-4); +main > article > section.article-asides > section.article-related > nav.articles-list { + --articles-related-flow-gap: 0.78rem; + margin-top: var(--space-2); } -main > article > section.article-related > header { - margin-top: 0; -} - -main > article > section.article-related > header > h2 { - margin-top: 0; - margin-bottom: 0; - padding-top: 0; - font-size: 1rem; - text-transform: uppercase; - letter-spacing: 0.08em; -} - -main > article > section.article-related > header > h2::before { - display: none; -} - -main > article > section.article-related > nav.articles-list { - --articles-related-flow-gap: 0.72rem; - margin-top: var(--space-3); -} - -main > article > section.article-related > nav.articles-list > ol { +main > article > section.article-asides > section.article-related > nav.articles-list > ol { padding-left: 0; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); } -main > article > section.article-related > nav.articles-list > ol > li, -main > article > section.article-related > nav.articles-list > ol > li + li { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li, +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li + li { margin-top: 0; } -main > article > section.article-related > nav.articles-list article { +main > article > section.article-asides > section.article-related > nav.articles-list article { border-top: 0; padding-top: 0; } -main > article > section.article-related > nav.articles-list > ol > li article > header { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header { margin-top: 0; } -main > article > section.article-related > nav.articles-list > ol > li article > header > a { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > a { display: block; color: inherit; text-decoration: none; } -main > article > section.article-related > nav.articles-list > ol > li article > header > a > figure { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > a > figure { margin: 0; min-height: 0; aspect-ratio: 340 / 191; overflow: hidden; } -main > article > section.article-related > nav.articles-list > ol > li article > header > a > figure img { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > a > figure img { width: 100%; height: 100%; object-fit: cover; display: block; } -main > article > section.article-related > nav.articles-list > ol > li article > header > p { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > p { margin-top: var(--articles-related-flow-gap); - font-size: 0.78rem; + font-size: 0.84rem; + line-height: 1.15; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); } -main > article > section.article-related > nav.articles-list > ol > li article > header > p > a { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > p > a { color: inherit; text-decoration: none; font-family: var(--font-heading); } -main > article > section.article-related > nav.articles-list > ol > li article > header > p > a:is(:hover, :focus-visible) { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > p > a:is(:hover, :focus-visible) { color: var(--color-link-hover); } -main > article > section.article-related > nav.articles-list > ol > li article > header > h3 { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > h3 { margin-top: var(--articles-related-flow-gap); margin-bottom: 0; padding-top: 0; @@ -402,43 +380,48 @@ main > article > section.article-related > nav.articles-list > ol > li article > font-weight: 400; } -main > article > section.article-related > nav.articles-list > ol > li article > header > h3::before { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > h3::before { display: none; } -main > article > section.article-related > nav.articles-list > ol > li article > header > h3 > a { - color: var(--color-heading); - text-decoration: none; -} - -main > article > section.article-related > nav.articles-list > ol > li article > header:has(> p) > h3 { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header:has(> p) > h3 { margin-top: calc(var(--articles-related-flow-gap) * 0.4); } -main > article > section.article-related > nav.articles-list article > p:nth-of-type(1) { +main > article > section.article-asides > section.article-related > nav.articles-list article > p:nth-of-type(1) { display: none; } -main > article > section.article-related > nav.articles-list article > p:last-child { +main > article > section.article-asides > section.article-related > nav.articles-list article > p:last-child { margin-top: var(--articles-related-flow-gap); display: flex; flex-wrap: wrap; gap: var(--space-1); - font-size: 0.76rem; + font-size: 0.86rem; + line-height: 1.15; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-heading); } -main > article > section.article-related > nav.articles-list article > p:last-child > a { +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > a:is(:hover, :focus-visible) > h3, +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > h3 > a:is(:hover, :focus-visible), +main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article:has(> header > a:is(:hover, :focus-visible)) > header > h3 > a { + color: var(--color-link-hover); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.15em; +} + +main > article > section.article-asides > section.article-related > nav.articles-list article > p:last-child > a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } -main > article > section.article-related > nav.articles-list article > p:last-child > a:is(:hover, :focus-visible) { +main > article > section.article-asides > section.article-related > nav.articles-list article > p:last-child > a:is(:hover, :focus-visible) { color: inherit; filter: brightness(1.2); } diff --git a/themes/2026/layouts/_partials/article-asides.html b/themes/2026/layouts/_partials/article-asides.html index 49ee5a13..b93a5e32 100644 --- a/themes/2026/layouts/_partials/article-asides.html +++ b/themes/2026/layouts/_partials/article-asides.html @@ -1,6 +1,7 @@ {{- $commentsMarkup := strings.TrimSpace (partial "asides/comments.html" .) -}} {{- $keywordsMarkup := strings.TrimSpace (partial "asides/keywords.html" .) -}} -{{- if or (ne $commentsMarkup "") (ne $keywordsMarkup "") -}} +{{- $relatedMarkup := strings.TrimSpace (partial "article-related.html" .) -}} +{{- if or (ne $commentsMarkup "") (ne $keywordsMarkup "") (ne $relatedMarkup "") -}}
{{- with $commentsMarkup -}} {{- . | safeHTML -}} @@ -8,5 +9,8 @@ {{- with $keywordsMarkup -}} {{- . | safeHTML -}} {{- end -}} + {{- with $relatedMarkup -}} + {{- . | safeHTML -}} + {{- end -}}
{{- end -}} diff --git a/themes/2026/layouts/_partials/article-related.html b/themes/2026/layouts/_partials/article-related.html index 4e830f1c..462056b5 100644 --- a/themes/2026/layouts/_partials/article-related.html +++ b/themes/2026/layouts/_partials/article-related.html @@ -40,10 +40,8 @@ {{- end -}} {{- if gt (len $items) 0 -}} -
-
-

Articles relatifs

-
+
+

Articles relatifs

{{- partial "articles-list.html" (dict "Pages" $items "ShowDossierBeforeTitle" true diff --git a/themes/2026/layouts/page.html b/themes/2026/layouts/page.html index cc550a05..e21ae644 100644 --- a/themes/2026/layouts/page.html +++ b/themes/2026/layouts/page.html @@ -5,7 +5,6 @@ {{ .Content }} {{ partial "article-books.html" . }} {{ partial "article-asides.html" . }} - {{ partial "article-related.html" . }} {{ partial "article-footer.html" . }} {{ partial "asides/complementary-images.html" . }}