Eryn Wells
efae2acdea
Remove the .figure__container element. According to Tess, putting a <figcaption> inside a child of a <figure> "doesn't obey the content model" or some shit. Fiiiiine. Getting small figures to lay out the way I want them to without the container was a bit of a trick. Instead of letting the figure span the entire width of the grid column, let it fit the size of its contents, and then set margin-inline to auto so it centers. Doing this also allowed me to remove the .figure--image, etc styles because the styles and markup are a lot more similar among figures containing different kinds of elements. Nice!
95 lines
1.3 KiB
CSS
95 lines
1.3 KiB
CSS
|
|
|
|
|
|
|
|
|
|
/**********
|
|
* FIGURES
|
|
**********/
|
|
|
|
.figure {
|
|
grid-column: wide-gutter-start / wide-gutter-end;
|
|
}
|
|
|
|
.figure--main-column {
|
|
grid-column: main-start / main-end;
|
|
}
|
|
|
|
.figure--code {
|
|
grid-column: gutter-start / gutter-end;
|
|
}
|
|
|
|
|
|
.figure {
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
|
|
&:has(> img:only-child) {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
> a:has(img:only-child) {
|
|
grid-column: wide-gutter-start / wide-gutter-end;
|
|
}
|
|
|
|
.figure__caption--blockquote {
|
|
font-size: inherit;
|
|
margin-inline-start: var(--space-m);
|
|
|
|
blockquote + & {
|
|
margin-block-start: var(--space-m);
|
|
}
|
|
|
|
&::before {
|
|
color: var(--text-color-secondary);
|
|
content: "--";
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.figure :is(img, video) {
|
|
grid-column: wide-gutter-start / wide-gutter-end;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.figure--small {
|
|
display: flow;
|
|
margin-inline: auto;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
width: 480px;
|
|
}
|
|
}
|
|
|
|
|
|
.figure video {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.figure--youtube {
|
|
grid-column: wide-gutter-start / wide-gutter-end;
|
|
|
|
.youtube {
|
|
width: 100%;
|
|
|
|
iframe {
|
|
aspect-ratio: 16 / 9;
|
|
margin-bottom: -3px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
figcaption {
|
|
color: var(--text-color-secondary);
|
|
font-weight: normal;
|
|
font-size: var(--text-xs);
|
|
grid-column: main-start / main-end;
|
|
letter-spacing: 0.01em;
|
|
}
|