From 67454698414901f0ba166e69dd3482712096d424 Mon Sep 17 00:00:00 2001 From: Richard Dern Date: Tue, 3 Mar 2026 01:10:02 +0100 Subject: [PATCH] =?UTF-8?q?Ajoute=20un=20mode=20de=20centrage=20des=20figu?= =?UTF-8?q?res=20et=20am=C3=A9liore=20les=20l=C3=A9gendes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/_default/markup.yaml | 3 + themes/2026/assets/css/content.css | 86 ++++++++++++++++--- .../layouts/_partials/media/render-image.html | 39 ++++++++- 3 files changed, 115 insertions(+), 13 deletions(-) diff --git a/config/_default/markup.yaml b/config/_default/markup.yaml index 3b7940b7..0787d5d4 100644 --- a/config/_default/markup.yaml +++ b/config/_default/markup.yaml @@ -1,6 +1,9 @@ goldmark: parser: wrapStandAloneImageWithinParagraph: false + attribute: + block: true + title: true renderer: unsafe: true tableOfContents: diff --git a/themes/2026/assets/css/content.css b/themes/2026/assets/css/content.css index 25edf3cb..fe5e877b 100644 --- a/themes/2026/assets/css/content.css +++ b/themes/2026/assets/css/content.css @@ -671,14 +671,14 @@ main > article figure.figure-media { align-items: stretch; } -main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) { +main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) { --figure-media-column: 2; --figure-meta-column: 1; --figure-media-justify: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } -main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) > figcaption.figure-media-meta { +main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) > figcaption.figure-media-meta { text-align: right; border-left: 0; padding-left: 0; @@ -726,16 +726,33 @@ main > article figure.figure-media.figure-media-without-meta > :is(video, img, a grid-column: 1; } +main > article figure.figure-media.figure-media-centered { + --figure-media-column: 1; + --figure-meta-column: 1; + --figure-media-justify: center; + grid-template-columns: minmax(0, 1fr); + gap: var(--space-2); +} + +main > article figure.figure-media.figure-media-centered > :is(video, img, a) { + grid-column: 1; + grid-row: 1; +} + main > article figure.figure-media > figcaption.figure-media-meta { grid-column: var(--figure-meta-column); grid-row: 1; margin-top: 0; + border-top: 1px solid var(--color-border-strong); border-left: 1px solid var(--color-border-strong); padding-left: var(--space-6); + padding-top: var(--space-2); + padding-bottom: var(--space-2); display: flex; flex-direction: column; min-height: 100%; gap: var(--space-2); + background: color-mix(in srgb, var(--color-background-alt) 82%, transparent); } main > article figure.figure-media > figcaption.figure-media-meta > .figure-media-meta-main { @@ -752,19 +769,62 @@ main > article figure.figure-media > figcaption.figure-media-meta > .figure-medi gap: var(--space-2); } -main > article figure.figure-media > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution { - border-top: var(--border-width-regular) solid var(--color-accent-2); - padding-top: var(--space-4); -} - main > article figure.figure-media > figcaption.figure-media-meta p { margin-top: 0; } -main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution { +main > article figure.figure-media > figcaption.figure-media-meta .cover-title { + font-size: clamp(0.98rem, 1.15vw, 1.06rem); + letter-spacing: 0.03em; + text-transform: uppercase; +} + +main > article figure.figure-media > figcaption.figure-media-meta .cover-description { + font-size: 0.95rem; + color: var(--color-text-muted); +} + +main > article figure.figure-media > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution { + border-top: 1px solid var(--color-border); + padding-top: var(--space-2); +} + +main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution { justify-content: flex-end; } +main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta { + grid-column: 1; + grid-row: 2; + width: min(100%, 72ch); + margin-inline: auto; + min-height: 0; + text-align: center; + border-left: 0; + border-right: 0; + padding-left: var(--space-2); + padding-right: var(--space-2); +} + +main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-main, +main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-extra { + align-items: center; +} + +main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-main > :is(.cover-title, .cover-description), +main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-extra > :is(.cover-attribution, details) { + width: min(100%, 68ch); +} + +main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution { + width: min(100%, 68ch); + justify-content: center; +} + +main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-extra > details { + text-align: left; +} + main > article figure.figure-media > figcaption.figure-media-meta > .figure-media-meta-extra > details { margin-top: 0; } @@ -981,13 +1041,17 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som gap: var(--space-2); } - main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) { + main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) { --figure-media-column: 1; --figure-meta-column: 1; --figure-media-justify: start; grid-template-columns: minmax(0, 1fr); } + main > article figure.figure-media.figure-media-centered { + --figure-media-justify: center; + } + main > article figure.figure-media > :is(video, img, a), main > article figure.figure-media > figcaption.figure-media-meta { grid-column: 1; @@ -1006,11 +1070,11 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som margin-top: 0; } - main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) > figcaption.figure-media-meta { + main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) > figcaption.figure-media-meta { text-align: left; } - main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution { + main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution { justify-content: flex-start; } diff --git a/themes/2026/layouts/_partials/media/render-image.html b/themes/2026/layouts/_partials/media/render-image.html index 9ad07247..0ec89ee6 100644 --- a/themes/2026/layouts/_partials/media/render-image.html +++ b/themes/2026/layouts/_partials/media/render-image.html @@ -19,11 +19,46 @@ {{- end -}} {{- $metaTitle := index $data "title" -}} {{- $hasMeta := or $metaTitle (or $description (or $data.attribution $data.prompt)) -}} -
+{{- $attributes := .Attributes | default dict -}} +{{- $imageClasses := "" -}} +{{- with index $attributes "class" -}} + {{- $imageClasses = lower (trim . " ") -}} +{{- end -}} +{{- $layout := "" -}} +{{- with index $attributes "layout" -}} + {{- $layout = lower (trim . " ") -}} +{{- end -}} +{{- $hasCenterClass := gt (len (findRE `(^|\\s)(center|centered)(\\s|$)` $imageClasses)) 0 -}} +{{- $hasFullClass := gt (len (findRE `(^|\\s)(full|full-width|wide)(\\s|$)` $imageClasses)) 0 -}} +{{- $forceCentered := false -}} +{{- if or (in (slice "center" "centered") $layout) $hasCenterClass -}} + {{- $forceCentered = true -}} +{{- end -}} +{{- if or (in (slice "full" "full-width" "wide") $layout) $hasFullClass -}} + {{- $forceCentered = true -}} +{{- end -}} +{{- $forceWithoutMeta := false -}} +{{- if or (in (slice "full" "full-width" "wide") $layout) $hasFullClass -}} + {{- $forceWithoutMeta = true -}} +{{- end -}} +{{- $showMeta := and $hasMeta (not $forceWithoutMeta) -}} +{{- $figureClasses := slice "figure-media" -}} +{{- if $showMeta -}} + {{- $figureClasses = $figureClasses | append "figure-media-with-meta" -}} +{{- else -}} + {{- $figureClasses = $figureClasses | append "figure-media-without-meta" -}} +{{- end -}} +{{- if $forceCentered -}} + {{- $figureClasses = $figureClasses | append "figure-media-centered" -}} +{{- end -}} +{{- with $imageClasses -}} + {{- $figureClasses = $figureClasses | append . -}} +{{- end -}} +
{{ $alt }} - {{- if $hasMeta -}} + {{- if $showMeta -}}
{{- with $metaTitle -}}