Eryn Wells
b112558914
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.
53 lines
873 B
CSS
53 lines
873 B
CSS
|
|
|
|
|
|
|
|
|
|
/**********
|
|
* FIGURES
|
|
**********/
|
|
|
|
.figure--code,
|
|
.figure--image {
|
|
grid-column: wide-gutter-start / wide-gutter-end;
|
|
}
|
|
|
|
.figure--image {
|
|
display: grid;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.figure--youtube {
|
|
grid-column: main-start / main-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);
|
|
letter-spacing: 0.01em;
|
|
grid-column: main-start / main-end;
|
|
}
|