blog/2025
1
Fork 0
Code Issues Activity

Ajoute un mode de centrage des figures et améliore les légendes

Browse Source
This commit is contained in:
Richard Dern
2026-03-03 01:10:02 +01:00
parent 208a873d80
commit 6745469841
3 changed files with 115 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
themes/2026/assets/css/content.css
View File

@@ -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;
}