Figures have a few different node structures; make them all lay out correctly

This commit is contained in:
Eryn Wells 2024-10-26 08:31:50 -06:00
parent 4a6dd87603
commit d7353308fa

View file

@ -9,6 +9,8 @@
.figure { .figure {
grid-column: wide-gutter-start / wide-gutter-end; grid-column: wide-gutter-start / wide-gutter-end;
display: grid;
grid-template-columns: subgrid;
.figure__container { .figure__container {
align-items: center; align-items: center;
@ -19,12 +21,17 @@
min-width: fit-content; min-width: fit-content;
} }
&:has(img:only-of-type) { &:has(> img:only-child, .figure__container > img:only-child) {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
> a:has(img:only-child) {
grid-column: wide-gutter-start / wide-gutter-end;
}
} }
.figure--code { .figure--code {
grid-column: gutter-start / gutter-end; grid-column: gutter-start / gutter-end;
} }
@ -47,6 +54,6 @@ figcaption {
color: var(--text-color-secondary); color: var(--text-color-secondary);
font-weight: normal; font-weight: normal;
font-size: var(--text-xs); font-size: var(--text-xs);
grid-column: main-start / main-end;
letter-spacing: 0.01em; letter-spacing: 0.01em;
grid-column: main-start / main-end;
} }