Spacing: Add .figure--image to the list of blocks with large vertical margins

This commit is contained in:
Eryn Wells 2024-07-03 07:37:42 -07:00
parent 54de36f31b
commit 5cf12c7a39

View file

@ -61,7 +61,7 @@ p + p {
/* Figures */
{{- $elementsWithXLBlockMargins := "blockquote, figure, .codeblock, .highlight" -}}
{{- $elementsWithXLBlockMargins := "blockquote, .figure--image, .codeblock, .highlight" -}}
p + :is({{ $elementsWithXLBlockMargins }}) {
margin-block-start: var(--space-xl);
@ -74,9 +74,18 @@ p + :is({{ $elementsWithXLBlockMargins }}) {
.codeblock {
--padding: var(--space-m);
margin-inline-start: calc(-1 * var(--padding));
margin-inline: calc(-1 * var(--padding));
padding: var(--padding);
width: 100%;
}
.figure--image {
--padding: var(--space-m);
margin-inline-start: calc(-1 * var(--padding));
width: calc(100% + 2 * var(--padding));
figcaption {
margin-inline: var(--padding);
}
}
/* Blockquotes */