// Figures. Note: we use the blockquote element to wrap figures and their captions in valid XHTML. // Use the .figure class for the blockquote wrapping an image and a caption. // Add .fixed, .small and/or .large for layout and size options.
blockquote.figure {
clear: both; float: top; // By default all figures float to the tops of their pages page-break-inside: avoid; background-color: inherit; font-size: inherit; font-weight: inherit; color: inherit; margin: 0 0 $line-height-default 0; padding: 0; width: 100%; box-sizing: border-box;
}
// Experimental. Effectively overrides ‘unless-fit’ to reduce ugly instances // of indented images in lists beside floated, non-indented images. ol li blockquote.figure, ul li blockquote.figure {
display: inline-block;
}
// Fix figures in place, for when they must keep their position in the text flow, // and not float to the top of the page. .figure.fixed {
clear: both; float: none; margin-top: $line-height-default;
}
// The p (some with child img) elements inside the figure .figure p {
clear: both; page-break-inside: avoid; page-break-before: avoid; text-align: center; text-indent: 0;
}
// The image(s) in the figure .figure p img {
width: auto; max-width: 100%; max-height: 100%; // Prevents image from expanding below a parent p set to a specific height margin: 0 auto 0 auto;
}
// The caption (always the last paragraph in the figure) // Note doesn’t allow for multi-para captions – have to use line breaks :( .figure p:last-of-type {
padding: ($line-height-default / 2) 0 ($line-height-default / 2) 0; margin: 0; text-align: center; text-indent: 0; font-style: italic;
}
// Emphasis inside the italic caption .figure p:last-of-type em {
font-style: initial;
}
// Image size options // These need to be deprecated in favour of a multiple-based system. .figure.x-small p img {
width: auto; max-height: 30mm;
} .figure.small p img {
width: auto; max-height: 45mm;
} .figure.medium p img {
width: auto; max-height: 65mm;
} .figure.large {
float: none; page-break-before: always;
} .figure.large img {
max-height: 150mm; max-width: 100%; width: auto;
}
// Paragraphs that follow figures should: // have an indent when following floated figures // not have an indent when following fixed figures. blockquote.figure + p {
text-indent: $line-height-default;
} blockquote.figure.fixed + p {
text-indent: 0;
}