Remove figure borders and use slight indentation or italics to delineate figure captions from main text

This commit is contained in:
Tom Hodson 2022-11-25 12:04:39 +01:00
parent 2ffd264794
commit 65f3e2b9bc

View File

@ -7,21 +7,24 @@ figure {
margin-inline-start: 0em; margin-inline-start: 0em;
margin-inline-end: 0em; margin-inline-end: 0em;
border-bottom: solid #222 1px; // border-bottom: solid #222 1px;
padding-bottom: 1em; padding-bottom: 1em;
// border-top: solid #222 1px; // border-top: solid #222 1px;
// padding-top: 1em; // padding-top: 1em;
} }
figure img,svg { figure > img, figure > svg {
max-width: 900px; max-width: 900px;
width: 80%; width: 90% !important;
margin-bottom: 2em; margin-bottom: 2em;
} }
figcaption { figcaption {
// font-style: italic;
// font-size: 0.9em;
aria-hidden: true; aria-hidden: true;
max-width: 700px; max-width: 700px;
width: 90%;
} }
// For the table of contents, should probably put this in a container // For the table of contents, should probably put this in a container
@ -105,3 +108,20 @@ div#page-header {
// width: 100%; // width: 100%;
p { margin-block-end: 0px;} p { margin-block-end: 0px;}
} }
@media
only screen and (max-width: $horizontal_breakpoint),
only screen and (max-height: $vertical_breakpoint)
{
//make the figures go to 100% and use italics to denote the figure captions
figure > img, figure > svg {
width: 100%;
}
figcaption {
font-style: italic;
width: 100%;
}
}