Add some styles for code and image figures

These elements are created with the figures/image shortcodes from the old site.
Make them wide, and give them XL block margins.

Along the way, make sure that any element with only an <img> child has a line height
of 1 to avoid a weird gap below the image.
This commit is contained in:
Eryn Wells 2024-10-11 16:37:24 -07:00
parent 49f5a90813
commit b112558914
3 changed files with 19 additions and 6 deletions

View file

@ -7,11 +7,24 @@
* FIGURES
**********/
.figure--code,
.figure--image {
grid-column: wide-gutter-start / wide-gutter-end;
}
.figure--image {
display: grid;
grid-column: wide-gutter-start / wide-gutter-end;
grid-template-columns: subgrid;
.figure__container {
align-items: center;
display: flex;
gap: var(--body-item-spacing);
grid-column: wide-gutter-start / wide-gutter-end;
justify-content: center;
min-width: fit-content;
}
img {
grid-column: wide-gutter-start / wide-gutter-end;
}