From: Vladimír Vondruš <mosra@centrum.cz>
Date: Sat, 13 Oct 2018 23:57:48 +0000 (+0200)
Subject: css: make it possible to have math and graph figures.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=9a6b8304ede448cc2be8c69959566bab40746ece;p=blog.git

css: make it possible to have math and graph figures.

Also added a test file verifying math coloring priorities.
---

diff --git a/css/m-components.css b/css/m-components.css
index 720a8ade..1af4e97b 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -743,12 +743,6 @@ figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
   border-bottom-left-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
 }
-figure.m-figure figcaption {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  font-weight: var(--heading-font-weight);
-  font-size: 1.17rem; /* taken from webkit defaults for h3 */
-}
 figure.m-figure a img, figure.m-figure a svg {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -772,7 +766,8 @@ figure.m-figure.m-fullwidth:after {
   height: 1px;
 }
 
-/* Code figure */
+/* Code figure. Not using <figure> because some generators (Doxygen) have it
+   impossible to output custom tags. */
 .m-code-figure, .m-console-figure {
   margin-top: 0;
   margin-left: 0;
@@ -808,6 +803,14 @@ figure.m-figure.m-fullwidth:after {
   border-bottom-right-radius: 0;
 }
 
+/* Figure caption */
+figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: var(--heading-font-weight);
+  font-size: 1.17rem; /* taken from webkit defaults for h3 */
+}
+
 /* Colored figure */
 figure.m-figure.m-default:before { border-color: var(--default-filled-background-color); }
 figure.m-figure.m-default figcaption { color: var(--default-color); }
@@ -972,7 +975,8 @@ pre.m-code.m-inverted > span.hll {
   border-color: transparent;
 }
 
-/* Math block, inline math, math inside buttons because I am crazy */
+/* Math block, math figure, inline math, math inside buttons because I am
+   crazy */
 div.m-math {
   overflow-x: auto;
   overflow-y: hidden; /* Chrome 62 displays a vertical scrollbar otherwise */
@@ -989,8 +993,9 @@ div.m-button.m-default a:active svg.m-math {
   fill: var(--link-active-color);
 }
 
-/* Plots, graphs */
-div.m-graph { font-size: var(--font-size); }
+/* Plots, graphs. Graphs can be either div.m-graph svg or svg.m-graph, so using
+   just .m-graph when referencing both a <div> graph and a <figure> graph. */
+.m-graph { font-size: var(--font-size); }
 div.m-plot svg, div.m-graph svg {
   max-width: 100%;
   margin-left: auto;
@@ -1011,257 +1016,264 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: var(--dim-color); }
-div.m-graph svg g.m-edge path, div.m-graph svg g.m-node.m-flat ellipse,
-div.m-graph svg g.m-node.m-flat polygon {
+.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
+.m-graph g.m-node.m-flat polygon {
   fill: none;
 }
-div.m-graph svg g.m-node:not(.m-flat) text {
+.m-graph g.m-node:not(.m-flat) text {
   fill: var(--button-background-color);
 }
 
+/* Rendered math and graphs have no padding around, add it if in a figure,
+   ensure it's applied only on the immediately first svg inside. Because we
+   want a background under the padding as well, switch the box sizing to
+   content box. */
+figure.m-figure > svg.m-math:first-child,
+figure.m-figure > svg.m-graph:first-child {
+  padding: 1rem;
+  box-sizing: content-box;
+}
+figure.m-figure:not(.m-flat) > svg.m-math:first-child,
+figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
+  background-color: var(--line-color);
+}
+
 /* Colored math block, inline math, colored math parts, plots and
    global-colored graphs. Should be before local graph coloring, so the latter
-   can override this. */
-div.m-math svg, svg.m-math { fill: var(--color); }
-div.m-math.m-default svg, svg.m-math.m-default,
-div.m-math svg g.m-default, svg.m-math g.m-default,
-div.m-math svg rect.m-default, svg.m-math rect.m-default,
+   can override this. Applies to either div.m-math svg or svg.m.math
+   (div.m-graph svg or svg.m-graph), so using just .m-math (.m-graph). Besides
+   that, using svg anywhere would make it a higher priority, breaking the
+   colors. See the math/graph plugin test pages for a visual verification. */
+.m-math { fill: var(--color); }
+.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
-div.m-graph svg g.m-edge polygon,
-div.m-graph svg g.m-node:not(.m-flat) ellipse,
-div.m-graph svg g.m-node:not(.m-flat) polygon,
-div.m-graph svg g.m-edge text,
-div.m-graph svg g.m-node.m-flat text,
-div.m-graph.m-default svg g.m-edge polygon,
-div.m-graph.m-default svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-default svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-default svg g.m-edge text,
-div.m-graph.m-default svg g.m-node.m-flat text {
+.m-graph g.m-edge polygon,
+.m-graph g.m-node:not(.m-flat) ellipse,
+.m-graph g.m-node:not(.m-flat) polygon,
+.m-graph g.m-edge text,
+.m-graph g.m-node.m-flat text,
+.m-graph.m-default g.m-edge polygon,
+.m-graph.m-default g.m-node:not(.m-flat) ellipse,
+.m-graph.m-default g.m-node:not(.m-flat) polygon,
+.m-graph.m-default g.m-edge text,
+.m-graph.m-default g.m-node.m-flat text {
   fill: var(--default-color);
 }
-div.m-graph svg g.m-edge polygon,
-div.m-graph svg g.m-edge path,
-div.m-graph svg g.m-node ellipse,
-div.m-graph svg g.m-node polygon,
-div.m-graph svg g.m-node polyline,
-div.m-graph.m-default svg g.m-edge polygon,
-div.m-graph.m-default svg g.m-edge path,
-div.m-graph.m-default svg g.m-node ellipse,
-div.m-graph.m-default svg g.m-node polygon,
-div.m-graph.m-default svg g.m-node polyline {
+.m-graph g.m-edge polygon,
+.m-graph g.m-edge path,
+.m-graph g.m-node ellipse,
+.m-graph g.m-node polygon,
+.m-graph g.m-node polyline,
+.m-graph.m-default g.m-edge polygon,
+.m-graph.m-default g.m-edge path,
+.m-graph.m-default g.m-node ellipse,
+.m-graph.m-default g.m-node polygon,
+.m-graph.m-default g.m-node polyline {
   stroke: var(--default-color);
 }
-div.m-math.m-primary svg, svg.m-math.m-primary,
-div.m-math svg g.m-primary, svg.m-math g.m-primary,
-div.m-math svg rect.m-primary, svg.m-math rect.m-primary,
+.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
 div.m-plot svg .m-bar.m-primary,
-div.m-graph.m-primary svg g.m-edge polygon,
-div.m-graph.m-primary svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-primary svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-primary svg g.m-edge text,
-div.m-graph.m-primary svg g.m-node.m-flat text {
+.m-graph.m-primary g.m-edge polygon,
+.m-graph.m-primary g.m-node:not(.m-flat) ellipse,
+.m-graph.m-primary g.m-node:not(.m-flat) polygon,
+.m-graph.m-primary g.m-edge text,
+.m-graph.m-primary g.m-node.m-flat text {
   fill: var(--primary-color);
 }
-div.m-graph.m-primary svg g.m-edge polygon,
-div.m-graph.m-primary svg g.m-edge path,
-div.m-graph.m-primary svg g.m-node ellipse,
-div.m-graph.m-primary svg g.m-node polygon,
-div.m-graph.m-primary svg g.m-node polyline {
+.m-graph.m-primary g.m-edge polygon,
+.m-graph.m-primary g.m-edge path,
+.m-graph.m-primary g.m-node ellipse,
+.m-graph.m-primary g.m-node polygon,
+.m-graph.m-primary g.m-node polyline {
   stroke: var(--primary-color);
 }
-div.m-math.m-success svg, svg.m-math.m-success,
-div.m-math svg g.m-success, svg.m-math g.m-success,
-div.m-math svg rect.m-success, svg.m-math rect.m-success,
+.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
 div.m-plot svg .m-bar.m-success,
-div.m-graph.m-success svg g.m-edge polygon,
-div.m-graph.m-success svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-success svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-success svg g.m-edge text,
-div.m-graph.m-success svg g.m-node.m-flat text {
+.m-graph.m-success g.m-edge polygon,
+.m-graph.m-success g.m-node:not(.m-flat) ellipse,
+.m-graph.m-success g.m-node:not(.m-flat) polygon,
+.m-graph.m-success g.m-edge text,
+.m-graph.m-success g.m-node.m-flat text {
   fill: var(--success-color);
 }
-div.m-graph.m-success svg g.m-edge polygon,
-div.m-graph.m-success svg g.m-edge path,
-div.m-graph.m-success svg g.m-node ellipse,
-div.m-graph.m-success svg g.m-node polygon,
-div.m-graph.m-success svg g.m-node polyline {
+.m-graph.m-success g.m-edge polygon,
+.m-graph.m-success g.m-edge path,
+.m-graph.m-success g.m-node ellipse,
+.m-graph.m-success g.m-node polygon,
+.m-graph.m-success g.m-node polyline {
   stroke: var(--success-color);
 }
-div.m-math.m-warning svg, svg.m-math.m-warning,
-div.m-math svg g.m-warning, svg.m-math g.m-warning,
-div.m-math svg rect.m-warning, svg.m-math rect.m-warning,
+.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
 div.m-plot svg .m-bar.m-warning,
-div.m-graph.m-warning svg g.m-edge polygon,
-div.m-graph.m-warning svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-warning svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-warning svg g.m-edge text,
-div.m-graph.m-warning svg g.m-node.m-flat text {
+.m-graph.m-warning g.m-edge polygon,
+.m-graph.m-warning g.m-node:not(.m-flat) ellipse,
+.m-graph.m-warning g.m-node:not(.m-flat) polygon,
+.m-graph.m-warning g.m-edge text,
+.m-graph.m-warning g.m-node.m-flat text {
   fill: var(--warning-color);
 }
-div.m-graph.m-warning svg g.m-edge polygon,
-div.m-graph.m-warning svg g.m-edge path,
-div.m-graph.m-warning svg g.m-node ellipse,
-div.m-graph.m-warning svg g.m-node polygon,
-div.m-graph.m-warning svg g.m-node polyline {
+.m-graph.m-warning g.m-edge polygon,
+.m-graph.m-warning g.m-edge path,
+.m-graph.m-warning g.m-node ellipse,
+.m-graph.m-warning g.m-node polygon,
+.m-graph.m-warning g.m-node polyline {
   stroke: var(--warning-color);
 }
-div.m-math.m-danger svg, svg.m-math.m-danger,
-div.m-math svg g.m-danger, svg.m-math g.m-danger,
-div.m-math svg rect.m-danger, svg.m-math rect.m-danger,
+.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
 div.m-plot svg .m-bar.m-danger,
-div.m-graph.m-danger svg g.m-edge polygon,
-div.m-graph.m-danger svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-danger svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-danger svg g.m-edge text,
-div.m-graph.m-danger svg g.m-node.m-flat text {
+.m-graph.m-danger g.m-edge polygon,
+.m-graph.m-danger g.m-node:not(.m-flat) ellipse,
+.m-graph.m-danger g.m-node:not(.m-flat) polygon,
+.m-graph.m-danger g.m-edge text,
+.m-graph.m-danger g.m-node.m-flat text {
   fill: var(--danger-color);
 }
-div.m-graph.m-danger svg g.m-edge polygon,
-div.m-graph.m-danger svg g.m-edge path,
-div.m-graph.m-danger svg g.m-node ellipse,
-div.m-graph.m-danger svg g.m-node polygon,
-div.m-graph.m-danger svg g.m-node polyline {
+.m-graph.m-danger g.m-edge polygon,
+.m-graph.m-danger g.m-edge path,
+.m-graph.m-danger g.m-node ellipse,
+.m-graph.m-danger g.m-node polygon,
+.m-graph.m-danger g.m-node polyline {
   stroke: var(--danger-color);
 }
-div.m-math.m-info svg, svg.m-math.m-info,
-div.m-math svg g.m-info, svg.m-math g.m-info,
-div.m-math svg rect.m-info, svg.m-math rect.m-info,
+.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
 div.m-plot svg .m-bar.m-info,
-div.m-graph.m-info svg g.m-edge polygon,
-div.m-graph.m-info svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-info svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-info svg g.m-edge text,
-div.m-graph.m-info svg g.m-node.m-flat text {
+.m-graph.m-info g.m-edge polygon,
+.m-graph.m-info g.m-node:not(.m-flat) ellipse,
+.m-graph.m-info g.m-node:not(.m-flat) polygon,
+.m-graph.m-info g.m-edge text,
+.m-graph.m-info g.m-node.m-flat text {
   fill: var(--info-color);
 }
-div.m-graph.m-info svg g.m-edge polygon,
-div.m-graph.m-info svg g.m-edge path,
-div.m-graph.m-info svg g.m-node ellipse,
-div.m-graph.m-info svg g.m-node polygon,
-div.m-graph.m-info svg g.m-node polyline {
+.m-graph.m-info g.m-edge polygon,
+.m-graph.m-info g.m-edge path,
+.m-graph.m-info g.m-node ellipse,
+.m-graph.m-info g.m-node polygon,
+.m-graph.m-info g.m-node polyline {
   stroke: var(--info-color);
 }
-div.m-math.m-dim svg, svg.m-math.m-dim,
-div.m-math svg g.m-dim, svg.m-math g.m-dim,
-div.m-math svg rect.m-dim, svg.m-math rect.m-dim,
+.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
 div.m-plot svg .m-bar.m-dim,
-div.m-graph.m-dim svg g.m-edge polygon,
-div.m-graph.m-dim svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-dim svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-dim svg g.m-edge text,
-div.m-graph.m-dim svg g.m-node.m-flat text {
+.m-graph.m-dim g.m-edge polygon,
+.m-graph.m-dim g.m-node:not(.m-flat) ellipse,
+.m-graph.m-dim g.m-node:not(.m-flat) polygon,
+.m-graph.m-dim g.m-edge text,
+.m-graph.m-dim g.m-node.m-flat text {
   fill: var(--dim-color);
 }
-div.m-graph.m-dim svg g.m-edge polygon,
-div.m-graph.m-dim svg g.m-edge path,
-div.m-graph.m-dim svg g.m-node ellipse,
-div.m-graph.m-dim svg g.m-node polygon,
-div.m-graph.m-dim svg g.m-node polyline {
+.m-graph.m-dim g.m-edge polygon,
+.m-graph.m-dim g.m-edge path,
+.m-graph.m-dim g.m-node ellipse,
+.m-graph.m-dim g.m-node polygon,
+.m-graph.m-dim g.m-node polyline {
   stroke: var(--dim-color);
 }
 
-/* Local-colored graphs. Later so it overrides global coloring. */
-div.m-graph svg g.m-edge.m-default polygon,
-div.m-graph svg g.m-node.m-default:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-default:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-default text,
-div.m-graph svg g.m-node.m-default.m-flat text {
+/* Local-colored graphs. Later so it overrides global coloring. Applies to
+   either div.m-graph svg or svg.m-graph, so using just .m-graph. This is not
+   needed for math, for some reason the overrides work correctly. */
+.m-graph g.m-edge.m-default polygon,
+.m-graph g.m-node.m-default:not(.m-flat) ellipse,
+.m-graph g.m-node.m-default:not(.m-flat) polygon,
+.m-graph g.m-edge.m-default text,
+.m-graph g.m-node.m-default.m-flat text {
   fill: var(--default-color);
 }
-div.m-graph svg g.m-edge.m-default polygon,
-div.m-graph svg g.m-edge.m-default path,
-div.m-graph svg g.m-node.m-default ellipse,
-div.m-graph svg g.m-node.m-default polygon,
-div.m-graph svg g.m-node.m-default polyline {
+.m-graph g.m-edge.m-default polygon,
+.m-graph g.m-edge.m-default path,
+.m-graph g.m-node.m-default ellipse,
+.m-graph g.m-node.m-default polygon,
+.m-graph g.m-node.m-default polyline {
   stroke: var(--default-color);
 }
-div.m-graph svg g.m-edge.m-primary polygon,
-div.m-graph svg g.m-node.m-primary:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-primary:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-primary text,
-div.m-graph svg g.m-node.m-primary.m-flat text {
+.m-graph g.m-edge.m-primary polygon,
+.m-graph g.m-node.m-primary:not(.m-flat) ellipse,
+.m-graph g.m-node.m-primary:not(.m-flat) polygon,
+.m-graph g.m-edge.m-primary text,
+.m-graph g.m-node.m-primary.m-flat text {
   fill: var(--primary-color);
 }
-div.m-graph svg g.m-edge.m-primary polygon,
-div.m-graph svg g.m-edge.m-primary path,
-div.m-graph svg g.m-node.m-primary ellipse,
-div.m-graph svg g.m-node.m-primary polygon,
-div.m-graph svg g.m-node.m-primary polyline {
+.m-graph g.m-edge.m-primary polygon,
+.m-graph g.m-edge.m-primary path,
+.m-graph g.m-node.m-primary ellipse,
+.m-graph g.m-node.m-primary polygon,
+.m-graph g.m-node.m-primary polyline {
   stroke: var(--primary-color);
 }
-div.m-graph svg g.m-edge.m-success polygon,
-div.m-graph svg g.m-node.m-success:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-success:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-success text,
-div.m-graph svg g.m-node.m-success.m-flat text {
+.m-graph g.m-edge.m-success polygon,
+.m-graph g.m-node.m-success:not(.m-flat) ellipse,
+.m-graph g.m-node.m-success:not(.m-flat) polygon,
+.m-graph g.m-edge.m-success text,
+.m-graph g.m-node.m-success.m-flat text {
   fill: var(--success-color);
 }
-div.m-graph svg g.m-edge.m-success polygon,
-div.m-graph svg g.m-edge.m-success path,
-div.m-graph svg g.m-node.m-success ellipse,
-div.m-graph svg g.m-node.m-success polygon,
-div.m-graph svg g.m-node.m-success polyline {
+.m-graph g.m-edge.m-success polygon,
+.m-graph g.m-edge.m-success path,
+.m-graph g.m-node.m-success ellipse,
+.m-graph g.m-node.m-success polygon,
+.m-graph g.m-node.m-success polyline {
   stroke: var(--success-color);
 }
-div.m-graph svg g.m-edge.m-warning polygon,
-div.m-graph svg g.m-node.m-warning:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-warning:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-warning text,
-div.m-graph svg g.m-node.m-warning.m-flat text {
+.m-graph g.m-edge.m-warning polygon,
+.m-graph g.m-node.m-warning:not(.m-flat) ellipse,
+.m-graph g.m-node.m-warning:not(.m-flat) polygon,
+.m-graph g.m-edge.m-warning text,
+.m-graph g.m-node.m-warning.m-flat text {
   fill: var(--warning-color);
 }
-div.m-graph svg g.m-edge.m-warning polygon,
-div.m-graph svg g.m-edge.m-warning path,
-div.m-graph svg g.m-node.m-warning ellipse,
-div.m-graph svg g.m-node.m-warning polygon,
-div.m-graph svg g.m-node.m-warning polyline {
+.m-graph g.m-edge.m-warning polygon,
+.m-graph g.m-edge.m-warning path,
+.m-graph g.m-node.m-warning ellipse,
+.m-graph g.m-node.m-warning polygon,
+.m-graph g.m-node.m-warning polyline {
   stroke: var(--warning-color);
 }
-div.m-graph svg g.m-edge.m-danger polygon,
-div.m-graph svg g.m-node.m-danger:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-danger:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-danger text,
-div.m-graph svg g.m-node.m-danger.m-flat text {
+.m-graph g.m-edge.m-danger polygon,
+.m-graph g.m-node.m-danger:not(.m-flat) ellipse,
+.m-graph g.m-node.m-danger:not(.m-flat) polygon,
+.m-graph g.m-edge.m-danger text,
+.m-graph g.m-node.m-danger.m-flat text {
   fill: var(--danger-color);
 }
-div.m-graph svg g.m-edge.m-danger polygon,
-div.m-graph svg g.m-edge.m-danger path,
-div.m-graph svg g.m-node.m-danger ellipse,
-div.m-graph svg g.m-node.m-danger polygon,
-div.m-graph svg g.m-node.m-danger polyline {
+.m-graph g.m-edge.m-danger polygon,
+.m-graph g.m-edge.m-danger path,
+.m-graph g.m-node.m-danger ellipse,
+.m-graph g.m-node.m-danger polygon,
+.m-graph g.m-node.m-danger polyline {
   stroke: var(--danger-color);
 }
-div.m-graph svg g.m-edge.m-info polygon,
-div.m-graph svg g.m-node.m-info:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-info:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-info text,
-div.m-graph svg g.m-node.m-info.m-flat text {
+.m-graph g.m-edge.m-info polygon,
+.m-graph g.m-node.m-info:not(.m-flat) ellipse,
+.m-graph g.m-node.m-info:not(.m-flat) polygon,
+.m-graph g.m-edge.m-info text,
+.m-graph g.m-node.m-info.m-flat text {
   fill: var(--info-color);
 }
-div.m-graph svg g.m-edge.m-info polygon,
-div.m-graph svg g.m-edge.m-info path,
-div.m-graph svg g.m-node.m-info ellipse,
-div.m-graph svg g.m-node.m-info polygon,
-div.m-graph svg g.m-node.m-info polyline {
+.m-graph g.m-edge.m-info polygon,
+.m-graph g.m-edge.m-info path,
+.m-graph g.m-node.m-info ellipse,
+.m-graph g.m-node.m-info polygon,
+.m-graph g.m-node.m-info polyline {
   stroke: var(--info-color);
 }
-div.m-graph svg g.m-edge.m-dim polygon,
-div.m-graph svg g.m-node.m-dim:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-dim:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-dim text,
-div.m-graph svg g.m-node.m-dim.m-flat text {
+.m-graph g.m-edge.m-dim polygon,
+.m-graph g.m-node.m-dim:not(.m-flat) ellipse,
+.m-graph g.m-node.m-dim:not(.m-flat) polygon,
+.m-graph g.m-edge.m-dim text,
+.m-graph g.m-node.m-dim.m-flat text {
   fill: var(--dim-color);
 }
-div.m-graph svg g.m-edge.m-dim polygon,
-div.m-graph svg g.m-edge.m-dim path,
-div.m-graph svg g.m-node.m-dim ellipse,
-div.m-graph svg g.m-node.m-dim polygon,
-div.m-graph svg g.m-node.m-dim polyline {
+.m-graph g.m-edge.m-dim polygon,
+.m-graph g.m-edge.m-dim path,
+.m-graph g.m-node.m-dim ellipse,
+.m-graph g.m-node.m-dim polygon,
+.m-graph g.m-node.m-dim polyline {
   stroke: var(--dim-color);
 }
 
 /* Spacing after every block element, but not after the last and not when
-  m-nopadb is specified */
+   m-nopadb is specified. It's div.m-math and div.m-graph instead of .m-math and
+   .m-graph because math / graph figures are handled already with
+   figure.m-figure. */
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
 .m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image,
 img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math,
diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 0d525a67..6cf310b6 100644
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -1063,12 +1063,6 @@ figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
-figure.m-figure figcaption {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-  font-size: 1.17rem;
-}
 figure.m-figure a img, figure.m-figure a svg {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -1122,6 +1116,12 @@ figure.m-figure.m-fullwidth:after {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  font-size: 1.17rem;
+}
 figure.m-figure.m-default:before { border-color: #34424d; }
 figure.m-figure.m-default figcaption { color: #dcdcdc; }
 figure.m-figure.m-primary:before { border-color: #a5c2db; }
@@ -1291,7 +1291,7 @@ div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-mat
 div.m-button.m-default a:active svg.m-math {
   fill: #a5c9ea;
 }
-div.m-graph { font-size: 16px; }
+.m-graph { font-size: 16px; }
 div.m-plot svg, div.m-graph svg {
   max-width: 100%;
   margin-left: auto;
@@ -1311,246 +1311,241 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: #747474; }
-div.m-graph svg g.m-edge path, div.m-graph svg g.m-node.m-flat ellipse,
-div.m-graph svg g.m-node.m-flat polygon {
+.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
+.m-graph g.m-node.m-flat polygon {
   fill: none;
 }
-div.m-graph svg g.m-node:not(.m-flat) text {
+.m-graph g.m-node:not(.m-flat) text {
   fill: #22272e;
 }
-div.m-math svg, svg.m-math { fill: #dcdcdc; }
-div.m-math.m-default svg, svg.m-math.m-default,
-div.m-math svg g.m-default, svg.m-math g.m-default,
-div.m-math svg rect.m-default, svg.m-math rect.m-default,
+figure.m-figure > svg.m-math:first-child,
+figure.m-figure > svg.m-graph:first-child {
+  padding: 1rem;
+  box-sizing: content-box;
+}
+figure.m-figure:not(.m-flat) > svg.m-math:first-child,
+figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
+  background-color: #405363;
+}
+.m-math { fill: #dcdcdc; }
+.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
-div.m-graph svg g.m-edge polygon,
-div.m-graph svg g.m-node:not(.m-flat) ellipse,
-div.m-graph svg g.m-node:not(.m-flat) polygon,
-div.m-graph svg g.m-edge text,
-div.m-graph svg g.m-node.m-flat text,
-div.m-graph.m-default svg g.m-edge polygon,
-div.m-graph.m-default svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-default svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-default svg g.m-edge text,
-div.m-graph.m-default svg g.m-node.m-flat text {
+.m-graph g.m-edge polygon,
+.m-graph g.m-node:not(.m-flat) ellipse,
+.m-graph g.m-node:not(.m-flat) polygon,
+.m-graph g.m-edge text,
+.m-graph g.m-node.m-flat text,
+.m-graph.m-default g.m-edge polygon,
+.m-graph.m-default g.m-node:not(.m-flat) ellipse,
+.m-graph.m-default g.m-node:not(.m-flat) polygon,
+.m-graph.m-default g.m-edge text,
+.m-graph.m-default g.m-node.m-flat text {
   fill: #dcdcdc;
 }
-div.m-graph svg g.m-edge polygon,
-div.m-graph svg g.m-edge path,
-div.m-graph svg g.m-node ellipse,
-div.m-graph svg g.m-node polygon,
-div.m-graph svg g.m-node polyline,
-div.m-graph.m-default svg g.m-edge polygon,
-div.m-graph.m-default svg g.m-edge path,
-div.m-graph.m-default svg g.m-node ellipse,
-div.m-graph.m-default svg g.m-node polygon,
-div.m-graph.m-default svg g.m-node polyline {
+.m-graph g.m-edge polygon,
+.m-graph g.m-edge path,
+.m-graph g.m-node ellipse,
+.m-graph g.m-node polygon,
+.m-graph g.m-node polyline,
+.m-graph.m-default g.m-edge polygon,
+.m-graph.m-default g.m-edge path,
+.m-graph.m-default g.m-node ellipse,
+.m-graph.m-default g.m-node polygon,
+.m-graph.m-default g.m-node polyline {
   stroke: #dcdcdc;
 }
-div.m-math.m-primary svg, svg.m-math.m-primary,
-div.m-math svg g.m-primary, svg.m-math g.m-primary,
-div.m-math svg rect.m-primary, svg.m-math rect.m-primary,
+.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
 div.m-plot svg .m-bar.m-primary,
-div.m-graph.m-primary svg g.m-edge polygon,
-div.m-graph.m-primary svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-primary svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-primary svg g.m-edge text,
-div.m-graph.m-primary svg g.m-node.m-flat text {
+.m-graph.m-primary g.m-edge polygon,
+.m-graph.m-primary g.m-node:not(.m-flat) ellipse,
+.m-graph.m-primary g.m-node:not(.m-flat) polygon,
+.m-graph.m-primary g.m-edge text,
+.m-graph.m-primary g.m-node.m-flat text {
   fill: #a5c9ea;
 }
-div.m-graph.m-primary svg g.m-edge polygon,
-div.m-graph.m-primary svg g.m-edge path,
-div.m-graph.m-primary svg g.m-node ellipse,
-div.m-graph.m-primary svg g.m-node polygon,
-div.m-graph.m-primary svg g.m-node polyline {
+.m-graph.m-primary g.m-edge polygon,
+.m-graph.m-primary g.m-edge path,
+.m-graph.m-primary g.m-node ellipse,
+.m-graph.m-primary g.m-node polygon,
+.m-graph.m-primary g.m-node polyline {
   stroke: #a5c9ea;
 }
-div.m-math.m-success svg, svg.m-math.m-success,
-div.m-math svg g.m-success, svg.m-math g.m-success,
-div.m-math svg rect.m-success, svg.m-math rect.m-success,
+.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
 div.m-plot svg .m-bar.m-success,
-div.m-graph.m-success svg g.m-edge polygon,
-div.m-graph.m-success svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-success svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-success svg g.m-edge text,
-div.m-graph.m-success svg g.m-node.m-flat text {
+.m-graph.m-success g.m-edge polygon,
+.m-graph.m-success g.m-node:not(.m-flat) ellipse,
+.m-graph.m-success g.m-node:not(.m-flat) polygon,
+.m-graph.m-success g.m-edge text,
+.m-graph.m-success g.m-node.m-flat text {
   fill: #3bd267;
 }
-div.m-graph.m-success svg g.m-edge polygon,
-div.m-graph.m-success svg g.m-edge path,
-div.m-graph.m-success svg g.m-node ellipse,
-div.m-graph.m-success svg g.m-node polygon,
-div.m-graph.m-success svg g.m-node polyline {
+.m-graph.m-success g.m-edge polygon,
+.m-graph.m-success g.m-edge path,
+.m-graph.m-success g.m-node ellipse,
+.m-graph.m-success g.m-node polygon,
+.m-graph.m-success g.m-node polyline {
   stroke: #3bd267;
 }
-div.m-math.m-warning svg, svg.m-math.m-warning,
-div.m-math svg g.m-warning, svg.m-math g.m-warning,
-div.m-math svg rect.m-warning, svg.m-math rect.m-warning,
+.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
 div.m-plot svg .m-bar.m-warning,
-div.m-graph.m-warning svg g.m-edge polygon,
-div.m-graph.m-warning svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-warning svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-warning svg g.m-edge text,
-div.m-graph.m-warning svg g.m-node.m-flat text {
+.m-graph.m-warning g.m-edge polygon,
+.m-graph.m-warning g.m-node:not(.m-flat) ellipse,
+.m-graph.m-warning g.m-node:not(.m-flat) polygon,
+.m-graph.m-warning g.m-edge text,
+.m-graph.m-warning g.m-node.m-flat text {
   fill: #c7cf2f;
 }
-div.m-graph.m-warning svg g.m-edge polygon,
-div.m-graph.m-warning svg g.m-edge path,
-div.m-graph.m-warning svg g.m-node ellipse,
-div.m-graph.m-warning svg g.m-node polygon,
-div.m-graph.m-warning svg g.m-node polyline {
+.m-graph.m-warning g.m-edge polygon,
+.m-graph.m-warning g.m-edge path,
+.m-graph.m-warning g.m-node ellipse,
+.m-graph.m-warning g.m-node polygon,
+.m-graph.m-warning g.m-node polyline {
   stroke: #c7cf2f;
 }
-div.m-math.m-danger svg, svg.m-math.m-danger,
-div.m-math svg g.m-danger, svg.m-math g.m-danger,
-div.m-math svg rect.m-danger, svg.m-math rect.m-danger,
+.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
 div.m-plot svg .m-bar.m-danger,
-div.m-graph.m-danger svg g.m-edge polygon,
-div.m-graph.m-danger svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-danger svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-danger svg g.m-edge text,
-div.m-graph.m-danger svg g.m-node.m-flat text {
+.m-graph.m-danger g.m-edge polygon,
+.m-graph.m-danger g.m-node:not(.m-flat) ellipse,
+.m-graph.m-danger g.m-node:not(.m-flat) polygon,
+.m-graph.m-danger g.m-edge text,
+.m-graph.m-danger g.m-node.m-flat text {
   fill: #cd3431;
 }
-div.m-graph.m-danger svg g.m-edge polygon,
-div.m-graph.m-danger svg g.m-edge path,
-div.m-graph.m-danger svg g.m-node ellipse,
-div.m-graph.m-danger svg g.m-node polygon,
-div.m-graph.m-danger svg g.m-node polyline {
+.m-graph.m-danger g.m-edge polygon,
+.m-graph.m-danger g.m-edge path,
+.m-graph.m-danger g.m-node ellipse,
+.m-graph.m-danger g.m-node polygon,
+.m-graph.m-danger g.m-node polyline {
   stroke: #cd3431;
 }
-div.m-math.m-info svg, svg.m-math.m-info,
-div.m-math svg g.m-info, svg.m-math g.m-info,
-div.m-math svg rect.m-info, svg.m-math rect.m-info,
+.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
 div.m-plot svg .m-bar.m-info,
-div.m-graph.m-info svg g.m-edge polygon,
-div.m-graph.m-info svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-info svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-info svg g.m-edge text,
-div.m-graph.m-info svg g.m-node.m-flat text {
+.m-graph.m-info g.m-edge polygon,
+.m-graph.m-info g.m-node:not(.m-flat) ellipse,
+.m-graph.m-info g.m-node:not(.m-flat) polygon,
+.m-graph.m-info g.m-edge text,
+.m-graph.m-info g.m-node.m-flat text {
   fill: #2f83cc;
 }
-div.m-graph.m-info svg g.m-edge polygon,
-div.m-graph.m-info svg g.m-edge path,
-div.m-graph.m-info svg g.m-node ellipse,
-div.m-graph.m-info svg g.m-node polygon,
-div.m-graph.m-info svg g.m-node polyline {
+.m-graph.m-info g.m-edge polygon,
+.m-graph.m-info g.m-edge path,
+.m-graph.m-info g.m-node ellipse,
+.m-graph.m-info g.m-node polygon,
+.m-graph.m-info g.m-node polyline {
   stroke: #2f83cc;
 }
-div.m-math.m-dim svg, svg.m-math.m-dim,
-div.m-math svg g.m-dim, svg.m-math g.m-dim,
-div.m-math svg rect.m-dim, svg.m-math rect.m-dim,
+.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
 div.m-plot svg .m-bar.m-dim,
-div.m-graph.m-dim svg g.m-edge polygon,
-div.m-graph.m-dim svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-dim svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-dim svg g.m-edge text,
-div.m-graph.m-dim svg g.m-node.m-flat text {
+.m-graph.m-dim g.m-edge polygon,
+.m-graph.m-dim g.m-node:not(.m-flat) ellipse,
+.m-graph.m-dim g.m-node:not(.m-flat) polygon,
+.m-graph.m-dim g.m-edge text,
+.m-graph.m-dim g.m-node.m-flat text {
   fill: #747474;
 }
-div.m-graph.m-dim svg g.m-edge polygon,
-div.m-graph.m-dim svg g.m-edge path,
-div.m-graph.m-dim svg g.m-node ellipse,
-div.m-graph.m-dim svg g.m-node polygon,
-div.m-graph.m-dim svg g.m-node polyline {
+.m-graph.m-dim g.m-edge polygon,
+.m-graph.m-dim g.m-edge path,
+.m-graph.m-dim g.m-node ellipse,
+.m-graph.m-dim g.m-node polygon,
+.m-graph.m-dim g.m-node polyline {
   stroke: #747474;
 }
-div.m-graph svg g.m-edge.m-default polygon,
-div.m-graph svg g.m-node.m-default:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-default:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-default text,
-div.m-graph svg g.m-node.m-default.m-flat text {
+.m-graph g.m-edge.m-default polygon,
+.m-graph g.m-node.m-default:not(.m-flat) ellipse,
+.m-graph g.m-node.m-default:not(.m-flat) polygon,
+.m-graph g.m-edge.m-default text,
+.m-graph g.m-node.m-default.m-flat text {
   fill: #dcdcdc;
 }
-div.m-graph svg g.m-edge.m-default polygon,
-div.m-graph svg g.m-edge.m-default path,
-div.m-graph svg g.m-node.m-default ellipse,
-div.m-graph svg g.m-node.m-default polygon,
-div.m-graph svg g.m-node.m-default polyline {
+.m-graph g.m-edge.m-default polygon,
+.m-graph g.m-edge.m-default path,
+.m-graph g.m-node.m-default ellipse,
+.m-graph g.m-node.m-default polygon,
+.m-graph g.m-node.m-default polyline {
   stroke: #dcdcdc;
 }
-div.m-graph svg g.m-edge.m-primary polygon,
-div.m-graph svg g.m-node.m-primary:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-primary:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-primary text,
-div.m-graph svg g.m-node.m-primary.m-flat text {
+.m-graph g.m-edge.m-primary polygon,
+.m-graph g.m-node.m-primary:not(.m-flat) ellipse,
+.m-graph g.m-node.m-primary:not(.m-flat) polygon,
+.m-graph g.m-edge.m-primary text,
+.m-graph g.m-node.m-primary.m-flat text {
   fill: #a5c9ea;
 }
-div.m-graph svg g.m-edge.m-primary polygon,
-div.m-graph svg g.m-edge.m-primary path,
-div.m-graph svg g.m-node.m-primary ellipse,
-div.m-graph svg g.m-node.m-primary polygon,
-div.m-graph svg g.m-node.m-primary polyline {
+.m-graph g.m-edge.m-primary polygon,
+.m-graph g.m-edge.m-primary path,
+.m-graph g.m-node.m-primary ellipse,
+.m-graph g.m-node.m-primary polygon,
+.m-graph g.m-node.m-primary polyline {
   stroke: #a5c9ea;
 }
-div.m-graph svg g.m-edge.m-success polygon,
-div.m-graph svg g.m-node.m-success:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-success:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-success text,
-div.m-graph svg g.m-node.m-success.m-flat text {
+.m-graph g.m-edge.m-success polygon,
+.m-graph g.m-node.m-success:not(.m-flat) ellipse,
+.m-graph g.m-node.m-success:not(.m-flat) polygon,
+.m-graph g.m-edge.m-success text,
+.m-graph g.m-node.m-success.m-flat text {
   fill: #3bd267;
 }
-div.m-graph svg g.m-edge.m-success polygon,
-div.m-graph svg g.m-edge.m-success path,
-div.m-graph svg g.m-node.m-success ellipse,
-div.m-graph svg g.m-node.m-success polygon,
-div.m-graph svg g.m-node.m-success polyline {
+.m-graph g.m-edge.m-success polygon,
+.m-graph g.m-edge.m-success path,
+.m-graph g.m-node.m-success ellipse,
+.m-graph g.m-node.m-success polygon,
+.m-graph g.m-node.m-success polyline {
   stroke: #3bd267;
 }
-div.m-graph svg g.m-edge.m-warning polygon,
-div.m-graph svg g.m-node.m-warning:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-warning:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-warning text,
-div.m-graph svg g.m-node.m-warning.m-flat text {
+.m-graph g.m-edge.m-warning polygon,
+.m-graph g.m-node.m-warning:not(.m-flat) ellipse,
+.m-graph g.m-node.m-warning:not(.m-flat) polygon,
+.m-graph g.m-edge.m-warning text,
+.m-graph g.m-node.m-warning.m-flat text {
   fill: #c7cf2f;
 }
-div.m-graph svg g.m-edge.m-warning polygon,
-div.m-graph svg g.m-edge.m-warning path,
-div.m-graph svg g.m-node.m-warning ellipse,
-div.m-graph svg g.m-node.m-warning polygon,
-div.m-graph svg g.m-node.m-warning polyline {
+.m-graph g.m-edge.m-warning polygon,
+.m-graph g.m-edge.m-warning path,
+.m-graph g.m-node.m-warning ellipse,
+.m-graph g.m-node.m-warning polygon,
+.m-graph g.m-node.m-warning polyline {
   stroke: #c7cf2f;
 }
-div.m-graph svg g.m-edge.m-danger polygon,
-div.m-graph svg g.m-node.m-danger:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-danger:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-danger text,
-div.m-graph svg g.m-node.m-danger.m-flat text {
+.m-graph g.m-edge.m-danger polygon,
+.m-graph g.m-node.m-danger:not(.m-flat) ellipse,
+.m-graph g.m-node.m-danger:not(.m-flat) polygon,
+.m-graph g.m-edge.m-danger text,
+.m-graph g.m-node.m-danger.m-flat text {
   fill: #cd3431;
 }
-div.m-graph svg g.m-edge.m-danger polygon,
-div.m-graph svg g.m-edge.m-danger path,
-div.m-graph svg g.m-node.m-danger ellipse,
-div.m-graph svg g.m-node.m-danger polygon,
-div.m-graph svg g.m-node.m-danger polyline {
+.m-graph g.m-edge.m-danger polygon,
+.m-graph g.m-edge.m-danger path,
+.m-graph g.m-node.m-danger ellipse,
+.m-graph g.m-node.m-danger polygon,
+.m-graph g.m-node.m-danger polyline {
   stroke: #cd3431;
 }
-div.m-graph svg g.m-edge.m-info polygon,
-div.m-graph svg g.m-node.m-info:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-info:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-info text,
-div.m-graph svg g.m-node.m-info.m-flat text {
+.m-graph g.m-edge.m-info polygon,
+.m-graph g.m-node.m-info:not(.m-flat) ellipse,
+.m-graph g.m-node.m-info:not(.m-flat) polygon,
+.m-graph g.m-edge.m-info text,
+.m-graph g.m-node.m-info.m-flat text {
   fill: #2f83cc;
 }
-div.m-graph svg g.m-edge.m-info polygon,
-div.m-graph svg g.m-edge.m-info path,
-div.m-graph svg g.m-node.m-info ellipse,
-div.m-graph svg g.m-node.m-info polygon,
-div.m-graph svg g.m-node.m-info polyline {
+.m-graph g.m-edge.m-info polygon,
+.m-graph g.m-edge.m-info path,
+.m-graph g.m-node.m-info ellipse,
+.m-graph g.m-node.m-info polygon,
+.m-graph g.m-node.m-info polyline {
   stroke: #2f83cc;
 }
-div.m-graph svg g.m-edge.m-dim polygon,
-div.m-graph svg g.m-node.m-dim:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-dim:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-dim text,
-div.m-graph svg g.m-node.m-dim.m-flat text {
+.m-graph g.m-edge.m-dim polygon,
+.m-graph g.m-node.m-dim:not(.m-flat) ellipse,
+.m-graph g.m-node.m-dim:not(.m-flat) polygon,
+.m-graph g.m-edge.m-dim text,
+.m-graph g.m-node.m-dim.m-flat text {
   fill: #747474;
 }
-div.m-graph svg g.m-edge.m-dim polygon,
-div.m-graph svg g.m-edge.m-dim path,
-div.m-graph svg g.m-node.m-dim ellipse,
-div.m-graph svg g.m-node.m-dim polygon,
-div.m-graph svg g.m-node.m-dim polyline {
+.m-graph g.m-edge.m-dim polygon,
+.m-graph g.m-edge.m-dim path,
+.m-graph g.m-node.m-dim ellipse,
+.m-graph g.m-node.m-dim polygon,
+.m-graph g.m-node.m-dim polyline {
   stroke: #747474;
 }
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 56e3680e..47a98d46 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1063,12 +1063,6 @@ figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
-figure.m-figure figcaption {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-  font-size: 1.17rem;
-}
 figure.m-figure a img, figure.m-figure a svg {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -1122,6 +1116,12 @@ figure.m-figure.m-fullwidth:after {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  font-size: 1.17rem;
+}
 figure.m-figure.m-default:before { border-color: #34424d; }
 figure.m-figure.m-default figcaption { color: #dcdcdc; }
 figure.m-figure.m-primary:before { border-color: #a5c2db; }
@@ -1291,7 +1291,7 @@ div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-mat
 div.m-button.m-default a:active svg.m-math {
   fill: #a5c9ea;
 }
-div.m-graph { font-size: 16px; }
+.m-graph { font-size: 16px; }
 div.m-plot svg, div.m-graph svg {
   max-width: 100%;
   margin-left: auto;
@@ -1311,246 +1311,241 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: #747474; }
-div.m-graph svg g.m-edge path, div.m-graph svg g.m-node.m-flat ellipse,
-div.m-graph svg g.m-node.m-flat polygon {
+.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
+.m-graph g.m-node.m-flat polygon {
   fill: none;
 }
-div.m-graph svg g.m-node:not(.m-flat) text {
+.m-graph g.m-node:not(.m-flat) text {
   fill: #22272e;
 }
-div.m-math svg, svg.m-math { fill: #dcdcdc; }
-div.m-math.m-default svg, svg.m-math.m-default,
-div.m-math svg g.m-default, svg.m-math g.m-default,
-div.m-math svg rect.m-default, svg.m-math rect.m-default,
+figure.m-figure > svg.m-math:first-child,
+figure.m-figure > svg.m-graph:first-child {
+  padding: 1rem;
+  box-sizing: content-box;
+}
+figure.m-figure:not(.m-flat) > svg.m-math:first-child,
+figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
+  background-color: #405363;
+}
+.m-math { fill: #dcdcdc; }
+.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
-div.m-graph svg g.m-edge polygon,
-div.m-graph svg g.m-node:not(.m-flat) ellipse,
-div.m-graph svg g.m-node:not(.m-flat) polygon,
-div.m-graph svg g.m-edge text,
-div.m-graph svg g.m-node.m-flat text,
-div.m-graph.m-default svg g.m-edge polygon,
-div.m-graph.m-default svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-default svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-default svg g.m-edge text,
-div.m-graph.m-default svg g.m-node.m-flat text {
+.m-graph g.m-edge polygon,
+.m-graph g.m-node:not(.m-flat) ellipse,
+.m-graph g.m-node:not(.m-flat) polygon,
+.m-graph g.m-edge text,
+.m-graph g.m-node.m-flat text,
+.m-graph.m-default g.m-edge polygon,
+.m-graph.m-default g.m-node:not(.m-flat) ellipse,
+.m-graph.m-default g.m-node:not(.m-flat) polygon,
+.m-graph.m-default g.m-edge text,
+.m-graph.m-default g.m-node.m-flat text {
   fill: #dcdcdc;
 }
-div.m-graph svg g.m-edge polygon,
-div.m-graph svg g.m-edge path,
-div.m-graph svg g.m-node ellipse,
-div.m-graph svg g.m-node polygon,
-div.m-graph svg g.m-node polyline,
-div.m-graph.m-default svg g.m-edge polygon,
-div.m-graph.m-default svg g.m-edge path,
-div.m-graph.m-default svg g.m-node ellipse,
-div.m-graph.m-default svg g.m-node polygon,
-div.m-graph.m-default svg g.m-node polyline {
+.m-graph g.m-edge polygon,
+.m-graph g.m-edge path,
+.m-graph g.m-node ellipse,
+.m-graph g.m-node polygon,
+.m-graph g.m-node polyline,
+.m-graph.m-default g.m-edge polygon,
+.m-graph.m-default g.m-edge path,
+.m-graph.m-default g.m-node ellipse,
+.m-graph.m-default g.m-node polygon,
+.m-graph.m-default g.m-node polyline {
   stroke: #dcdcdc;
 }
-div.m-math.m-primary svg, svg.m-math.m-primary,
-div.m-math svg g.m-primary, svg.m-math g.m-primary,
-div.m-math svg rect.m-primary, svg.m-math rect.m-primary,
+.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
 div.m-plot svg .m-bar.m-primary,
-div.m-graph.m-primary svg g.m-edge polygon,
-div.m-graph.m-primary svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-primary svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-primary svg g.m-edge text,
-div.m-graph.m-primary svg g.m-node.m-flat text {
+.m-graph.m-primary g.m-edge polygon,
+.m-graph.m-primary g.m-node:not(.m-flat) ellipse,
+.m-graph.m-primary g.m-node:not(.m-flat) polygon,
+.m-graph.m-primary g.m-edge text,
+.m-graph.m-primary g.m-node.m-flat text {
   fill: #a5c9ea;
 }
-div.m-graph.m-primary svg g.m-edge polygon,
-div.m-graph.m-primary svg g.m-edge path,
-div.m-graph.m-primary svg g.m-node ellipse,
-div.m-graph.m-primary svg g.m-node polygon,
-div.m-graph.m-primary svg g.m-node polyline {
+.m-graph.m-primary g.m-edge polygon,
+.m-graph.m-primary g.m-edge path,
+.m-graph.m-primary g.m-node ellipse,
+.m-graph.m-primary g.m-node polygon,
+.m-graph.m-primary g.m-node polyline {
   stroke: #a5c9ea;
 }
-div.m-math.m-success svg, svg.m-math.m-success,
-div.m-math svg g.m-success, svg.m-math g.m-success,
-div.m-math svg rect.m-success, svg.m-math rect.m-success,
+.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
 div.m-plot svg .m-bar.m-success,
-div.m-graph.m-success svg g.m-edge polygon,
-div.m-graph.m-success svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-success svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-success svg g.m-edge text,
-div.m-graph.m-success svg g.m-node.m-flat text {
+.m-graph.m-success g.m-edge polygon,
+.m-graph.m-success g.m-node:not(.m-flat) ellipse,
+.m-graph.m-success g.m-node:not(.m-flat) polygon,
+.m-graph.m-success g.m-edge text,
+.m-graph.m-success g.m-node.m-flat text {
   fill: #3bd267;
 }
-div.m-graph.m-success svg g.m-edge polygon,
-div.m-graph.m-success svg g.m-edge path,
-div.m-graph.m-success svg g.m-node ellipse,
-div.m-graph.m-success svg g.m-node polygon,
-div.m-graph.m-success svg g.m-node polyline {
+.m-graph.m-success g.m-edge polygon,
+.m-graph.m-success g.m-edge path,
+.m-graph.m-success g.m-node ellipse,
+.m-graph.m-success g.m-node polygon,
+.m-graph.m-success g.m-node polyline {
   stroke: #3bd267;
 }
-div.m-math.m-warning svg, svg.m-math.m-warning,
-div.m-math svg g.m-warning, svg.m-math g.m-warning,
-div.m-math svg rect.m-warning, svg.m-math rect.m-warning,
+.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
 div.m-plot svg .m-bar.m-warning,
-div.m-graph.m-warning svg g.m-edge polygon,
-div.m-graph.m-warning svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-warning svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-warning svg g.m-edge text,
-div.m-graph.m-warning svg g.m-node.m-flat text {
+.m-graph.m-warning g.m-edge polygon,
+.m-graph.m-warning g.m-node:not(.m-flat) ellipse,
+.m-graph.m-warning g.m-node:not(.m-flat) polygon,
+.m-graph.m-warning g.m-edge text,
+.m-graph.m-warning g.m-node.m-flat text {
   fill: #c7cf2f;
 }
-div.m-graph.m-warning svg g.m-edge polygon,
-div.m-graph.m-warning svg g.m-edge path,
-div.m-graph.m-warning svg g.m-node ellipse,
-div.m-graph.m-warning svg g.m-node polygon,
-div.m-graph.m-warning svg g.m-node polyline {
+.m-graph.m-warning g.m-edge polygon,
+.m-graph.m-warning g.m-edge path,
+.m-graph.m-warning g.m-node ellipse,
+.m-graph.m-warning g.m-node polygon,
+.m-graph.m-warning g.m-node polyline {
   stroke: #c7cf2f;
 }
-div.m-math.m-danger svg, svg.m-math.m-danger,
-div.m-math svg g.m-danger, svg.m-math g.m-danger,
-div.m-math svg rect.m-danger, svg.m-math rect.m-danger,
+.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
 div.m-plot svg .m-bar.m-danger,
-div.m-graph.m-danger svg g.m-edge polygon,
-div.m-graph.m-danger svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-danger svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-danger svg g.m-edge text,
-div.m-graph.m-danger svg g.m-node.m-flat text {
+.m-graph.m-danger g.m-edge polygon,
+.m-graph.m-danger g.m-node:not(.m-flat) ellipse,
+.m-graph.m-danger g.m-node:not(.m-flat) polygon,
+.m-graph.m-danger g.m-edge text,
+.m-graph.m-danger g.m-node.m-flat text {
   fill: #cd3431;
 }
-div.m-graph.m-danger svg g.m-edge polygon,
-div.m-graph.m-danger svg g.m-edge path,
-div.m-graph.m-danger svg g.m-node ellipse,
-div.m-graph.m-danger svg g.m-node polygon,
-div.m-graph.m-danger svg g.m-node polyline {
+.m-graph.m-danger g.m-edge polygon,
+.m-graph.m-danger g.m-edge path,
+.m-graph.m-danger g.m-node ellipse,
+.m-graph.m-danger g.m-node polygon,
+.m-graph.m-danger g.m-node polyline {
   stroke: #cd3431;
 }
-div.m-math.m-info svg, svg.m-math.m-info,
-div.m-math svg g.m-info, svg.m-math g.m-info,
-div.m-math svg rect.m-info, svg.m-math rect.m-info,
+.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
 div.m-plot svg .m-bar.m-info,
-div.m-graph.m-info svg g.m-edge polygon,
-div.m-graph.m-info svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-info svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-info svg g.m-edge text,
-div.m-graph.m-info svg g.m-node.m-flat text {
+.m-graph.m-info g.m-edge polygon,
+.m-graph.m-info g.m-node:not(.m-flat) ellipse,
+.m-graph.m-info g.m-node:not(.m-flat) polygon,
+.m-graph.m-info g.m-edge text,
+.m-graph.m-info g.m-node.m-flat text {
   fill: #2f83cc;
 }
-div.m-graph.m-info svg g.m-edge polygon,
-div.m-graph.m-info svg g.m-edge path,
-div.m-graph.m-info svg g.m-node ellipse,
-div.m-graph.m-info svg g.m-node polygon,
-div.m-graph.m-info svg g.m-node polyline {
+.m-graph.m-info g.m-edge polygon,
+.m-graph.m-info g.m-edge path,
+.m-graph.m-info g.m-node ellipse,
+.m-graph.m-info g.m-node polygon,
+.m-graph.m-info g.m-node polyline {
   stroke: #2f83cc;
 }
-div.m-math.m-dim svg, svg.m-math.m-dim,
-div.m-math svg g.m-dim, svg.m-math g.m-dim,
-div.m-math svg rect.m-dim, svg.m-math rect.m-dim,
+.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
 div.m-plot svg .m-bar.m-dim,
-div.m-graph.m-dim svg g.m-edge polygon,
-div.m-graph.m-dim svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-dim svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-dim svg g.m-edge text,
-div.m-graph.m-dim svg g.m-node.m-flat text {
+.m-graph.m-dim g.m-edge polygon,
+.m-graph.m-dim g.m-node:not(.m-flat) ellipse,
+.m-graph.m-dim g.m-node:not(.m-flat) polygon,
+.m-graph.m-dim g.m-edge text,
+.m-graph.m-dim g.m-node.m-flat text {
   fill: #747474;
 }
-div.m-graph.m-dim svg g.m-edge polygon,
-div.m-graph.m-dim svg g.m-edge path,
-div.m-graph.m-dim svg g.m-node ellipse,
-div.m-graph.m-dim svg g.m-node polygon,
-div.m-graph.m-dim svg g.m-node polyline {
+.m-graph.m-dim g.m-edge polygon,
+.m-graph.m-dim g.m-edge path,
+.m-graph.m-dim g.m-node ellipse,
+.m-graph.m-dim g.m-node polygon,
+.m-graph.m-dim g.m-node polyline {
   stroke: #747474;
 }
-div.m-graph svg g.m-edge.m-default polygon,
-div.m-graph svg g.m-node.m-default:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-default:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-default text,
-div.m-graph svg g.m-node.m-default.m-flat text {
+.m-graph g.m-edge.m-default polygon,
+.m-graph g.m-node.m-default:not(.m-flat) ellipse,
+.m-graph g.m-node.m-default:not(.m-flat) polygon,
+.m-graph g.m-edge.m-default text,
+.m-graph g.m-node.m-default.m-flat text {
   fill: #dcdcdc;
 }
-div.m-graph svg g.m-edge.m-default polygon,
-div.m-graph svg g.m-edge.m-default path,
-div.m-graph svg g.m-node.m-default ellipse,
-div.m-graph svg g.m-node.m-default polygon,
-div.m-graph svg g.m-node.m-default polyline {
+.m-graph g.m-edge.m-default polygon,
+.m-graph g.m-edge.m-default path,
+.m-graph g.m-node.m-default ellipse,
+.m-graph g.m-node.m-default polygon,
+.m-graph g.m-node.m-default polyline {
   stroke: #dcdcdc;
 }
-div.m-graph svg g.m-edge.m-primary polygon,
-div.m-graph svg g.m-node.m-primary:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-primary:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-primary text,
-div.m-graph svg g.m-node.m-primary.m-flat text {
+.m-graph g.m-edge.m-primary polygon,
+.m-graph g.m-node.m-primary:not(.m-flat) ellipse,
+.m-graph g.m-node.m-primary:not(.m-flat) polygon,
+.m-graph g.m-edge.m-primary text,
+.m-graph g.m-node.m-primary.m-flat text {
   fill: #a5c9ea;
 }
-div.m-graph svg g.m-edge.m-primary polygon,
-div.m-graph svg g.m-edge.m-primary path,
-div.m-graph svg g.m-node.m-primary ellipse,
-div.m-graph svg g.m-node.m-primary polygon,
-div.m-graph svg g.m-node.m-primary polyline {
+.m-graph g.m-edge.m-primary polygon,
+.m-graph g.m-edge.m-primary path,
+.m-graph g.m-node.m-primary ellipse,
+.m-graph g.m-node.m-primary polygon,
+.m-graph g.m-node.m-primary polyline {
   stroke: #a5c9ea;
 }
-div.m-graph svg g.m-edge.m-success polygon,
-div.m-graph svg g.m-node.m-success:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-success:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-success text,
-div.m-graph svg g.m-node.m-success.m-flat text {
+.m-graph g.m-edge.m-success polygon,
+.m-graph g.m-node.m-success:not(.m-flat) ellipse,
+.m-graph g.m-node.m-success:not(.m-flat) polygon,
+.m-graph g.m-edge.m-success text,
+.m-graph g.m-node.m-success.m-flat text {
   fill: #3bd267;
 }
-div.m-graph svg g.m-edge.m-success polygon,
-div.m-graph svg g.m-edge.m-success path,
-div.m-graph svg g.m-node.m-success ellipse,
-div.m-graph svg g.m-node.m-success polygon,
-div.m-graph svg g.m-node.m-success polyline {
+.m-graph g.m-edge.m-success polygon,
+.m-graph g.m-edge.m-success path,
+.m-graph g.m-node.m-success ellipse,
+.m-graph g.m-node.m-success polygon,
+.m-graph g.m-node.m-success polyline {
   stroke: #3bd267;
 }
-div.m-graph svg g.m-edge.m-warning polygon,
-div.m-graph svg g.m-node.m-warning:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-warning:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-warning text,
-div.m-graph svg g.m-node.m-warning.m-flat text {
+.m-graph g.m-edge.m-warning polygon,
+.m-graph g.m-node.m-warning:not(.m-flat) ellipse,
+.m-graph g.m-node.m-warning:not(.m-flat) polygon,
+.m-graph g.m-edge.m-warning text,
+.m-graph g.m-node.m-warning.m-flat text {
   fill: #c7cf2f;
 }
-div.m-graph svg g.m-edge.m-warning polygon,
-div.m-graph svg g.m-edge.m-warning path,
-div.m-graph svg g.m-node.m-warning ellipse,
-div.m-graph svg g.m-node.m-warning polygon,
-div.m-graph svg g.m-node.m-warning polyline {
+.m-graph g.m-edge.m-warning polygon,
+.m-graph g.m-edge.m-warning path,
+.m-graph g.m-node.m-warning ellipse,
+.m-graph g.m-node.m-warning polygon,
+.m-graph g.m-node.m-warning polyline {
   stroke: #c7cf2f;
 }
-div.m-graph svg g.m-edge.m-danger polygon,
-div.m-graph svg g.m-node.m-danger:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-danger:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-danger text,
-div.m-graph svg g.m-node.m-danger.m-flat text {
+.m-graph g.m-edge.m-danger polygon,
+.m-graph g.m-node.m-danger:not(.m-flat) ellipse,
+.m-graph g.m-node.m-danger:not(.m-flat) polygon,
+.m-graph g.m-edge.m-danger text,
+.m-graph g.m-node.m-danger.m-flat text {
   fill: #cd3431;
 }
-div.m-graph svg g.m-edge.m-danger polygon,
-div.m-graph svg g.m-edge.m-danger path,
-div.m-graph svg g.m-node.m-danger ellipse,
-div.m-graph svg g.m-node.m-danger polygon,
-div.m-graph svg g.m-node.m-danger polyline {
+.m-graph g.m-edge.m-danger polygon,
+.m-graph g.m-edge.m-danger path,
+.m-graph g.m-node.m-danger ellipse,
+.m-graph g.m-node.m-danger polygon,
+.m-graph g.m-node.m-danger polyline {
   stroke: #cd3431;
 }
-div.m-graph svg g.m-edge.m-info polygon,
-div.m-graph svg g.m-node.m-info:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-info:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-info text,
-div.m-graph svg g.m-node.m-info.m-flat text {
+.m-graph g.m-edge.m-info polygon,
+.m-graph g.m-node.m-info:not(.m-flat) ellipse,
+.m-graph g.m-node.m-info:not(.m-flat) polygon,
+.m-graph g.m-edge.m-info text,
+.m-graph g.m-node.m-info.m-flat text {
   fill: #2f83cc;
 }
-div.m-graph svg g.m-edge.m-info polygon,
-div.m-graph svg g.m-edge.m-info path,
-div.m-graph svg g.m-node.m-info ellipse,
-div.m-graph svg g.m-node.m-info polygon,
-div.m-graph svg g.m-node.m-info polyline {
+.m-graph g.m-edge.m-info polygon,
+.m-graph g.m-edge.m-info path,
+.m-graph g.m-node.m-info ellipse,
+.m-graph g.m-node.m-info polygon,
+.m-graph g.m-node.m-info polyline {
   stroke: #2f83cc;
 }
-div.m-graph svg g.m-edge.m-dim polygon,
-div.m-graph svg g.m-node.m-dim:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-dim:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-dim text,
-div.m-graph svg g.m-node.m-dim.m-flat text {
+.m-graph g.m-edge.m-dim polygon,
+.m-graph g.m-node.m-dim:not(.m-flat) ellipse,
+.m-graph g.m-node.m-dim:not(.m-flat) polygon,
+.m-graph g.m-edge.m-dim text,
+.m-graph g.m-node.m-dim.m-flat text {
   fill: #747474;
 }
-div.m-graph svg g.m-edge.m-dim polygon,
-div.m-graph svg g.m-edge.m-dim path,
-div.m-graph svg g.m-node.m-dim ellipse,
-div.m-graph svg g.m-node.m-dim polygon,
-div.m-graph svg g.m-node.m-dim polyline {
+.m-graph g.m-edge.m-dim polygon,
+.m-graph g.m-edge.m-dim path,
+.m-graph g.m-node.m-dim ellipse,
+.m-graph g.m-node.m-dim polygon,
+.m-graph g.m-node.m-dim polyline {
   stroke: #747474;
 }
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index ee65c20b..6229d5f7 100644
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -1063,12 +1063,6 @@ figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
-figure.m-figure figcaption {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  font-weight: normal;
-  font-size: 1.17rem;
-}
 figure.m-figure a img, figure.m-figure a svg {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -1122,6 +1116,12 @@ figure.m-figure.m-fullwidth:after {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: normal;
+  font-size: 1.17rem;
+}
 figure.m-figure.m-default:before { border-color: #fbf0ec; }
 figure.m-figure.m-default figcaption { color: #000000; }
 figure.m-figure.m-primary:before { border-color: #ef9069; }
@@ -1291,7 +1291,7 @@ div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-mat
 div.m-button.m-default a:active svg.m-math {
   fill: #cb4b16;
 }
-div.m-graph { font-size: 14px; }
+.m-graph { font-size: 14px; }
 div.m-plot svg, div.m-graph svg {
   max-width: 100%;
   margin-left: auto;
@@ -1311,246 +1311,241 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: #bdbdbd; }
-div.m-graph svg g.m-edge path, div.m-graph svg g.m-node.m-flat ellipse,
-div.m-graph svg g.m-node.m-flat polygon {
+.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
+.m-graph g.m-node.m-flat polygon {
   fill: none;
 }
-div.m-graph svg g.m-node:not(.m-flat) text {
+.m-graph g.m-node:not(.m-flat) text {
   fill: #ffffff;
 }
-div.m-math svg, svg.m-math { fill: #000000; }
-div.m-math.m-default svg, svg.m-math.m-default,
-div.m-math svg g.m-default, svg.m-math g.m-default,
-div.m-math svg rect.m-default, svg.m-math rect.m-default,
+figure.m-figure > svg.m-math:first-child,
+figure.m-figure > svg.m-graph:first-child {
+  padding: 1rem;
+  box-sizing: content-box;
+}
+figure.m-figure:not(.m-flat) > svg.m-math:first-child,
+figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
+  background-color: #f7e3db;
+}
+.m-math { fill: #000000; }
+.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
-div.m-graph svg g.m-edge polygon,
-div.m-graph svg g.m-node:not(.m-flat) ellipse,
-div.m-graph svg g.m-node:not(.m-flat) polygon,
-div.m-graph svg g.m-edge text,
-div.m-graph svg g.m-node.m-flat text,
-div.m-graph.m-default svg g.m-edge polygon,
-div.m-graph.m-default svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-default svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-default svg g.m-edge text,
-div.m-graph.m-default svg g.m-node.m-flat text {
+.m-graph g.m-edge polygon,
+.m-graph g.m-node:not(.m-flat) ellipse,
+.m-graph g.m-node:not(.m-flat) polygon,
+.m-graph g.m-edge text,
+.m-graph g.m-node.m-flat text,
+.m-graph.m-default g.m-edge polygon,
+.m-graph.m-default g.m-node:not(.m-flat) ellipse,
+.m-graph.m-default g.m-node:not(.m-flat) polygon,
+.m-graph.m-default g.m-edge text,
+.m-graph.m-default g.m-node.m-flat text {
   fill: #000000;
 }
-div.m-graph svg g.m-edge polygon,
-div.m-graph svg g.m-edge path,
-div.m-graph svg g.m-node ellipse,
-div.m-graph svg g.m-node polygon,
-div.m-graph svg g.m-node polyline,
-div.m-graph.m-default svg g.m-edge polygon,
-div.m-graph.m-default svg g.m-edge path,
-div.m-graph.m-default svg g.m-node ellipse,
-div.m-graph.m-default svg g.m-node polygon,
-div.m-graph.m-default svg g.m-node polyline {
+.m-graph g.m-edge polygon,
+.m-graph g.m-edge path,
+.m-graph g.m-node ellipse,
+.m-graph g.m-node polygon,
+.m-graph g.m-node polyline,
+.m-graph.m-default g.m-edge polygon,
+.m-graph.m-default g.m-edge path,
+.m-graph.m-default g.m-node ellipse,
+.m-graph.m-default g.m-node polygon,
+.m-graph.m-default g.m-node polyline {
   stroke: #000000;
 }
-div.m-math.m-primary svg, svg.m-math.m-primary,
-div.m-math svg g.m-primary, svg.m-math g.m-primary,
-div.m-math svg rect.m-primary, svg.m-math rect.m-primary,
+.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
 div.m-plot svg .m-bar.m-primary,
-div.m-graph.m-primary svg g.m-edge polygon,
-div.m-graph.m-primary svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-primary svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-primary svg g.m-edge text,
-div.m-graph.m-primary svg g.m-node.m-flat text {
+.m-graph.m-primary g.m-edge polygon,
+.m-graph.m-primary g.m-node:not(.m-flat) ellipse,
+.m-graph.m-primary g.m-node:not(.m-flat) polygon,
+.m-graph.m-primary g.m-edge text,
+.m-graph.m-primary g.m-node.m-flat text {
   fill: #cb4b16;
 }
-div.m-graph.m-primary svg g.m-edge polygon,
-div.m-graph.m-primary svg g.m-edge path,
-div.m-graph.m-primary svg g.m-node ellipse,
-div.m-graph.m-primary svg g.m-node polygon,
-div.m-graph.m-primary svg g.m-node polyline {
+.m-graph.m-primary g.m-edge polygon,
+.m-graph.m-primary g.m-edge path,
+.m-graph.m-primary g.m-node ellipse,
+.m-graph.m-primary g.m-node polygon,
+.m-graph.m-primary g.m-node polyline {
   stroke: #cb4b16;
 }
-div.m-math.m-success svg, svg.m-math.m-success,
-div.m-math svg g.m-success, svg.m-math g.m-success,
-div.m-math svg rect.m-success, svg.m-math rect.m-success,
+.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
 div.m-plot svg .m-bar.m-success,
-div.m-graph.m-success svg g.m-edge polygon,
-div.m-graph.m-success svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-success svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-success svg g.m-edge text,
-div.m-graph.m-success svg g.m-node.m-flat text {
+.m-graph.m-success g.m-edge polygon,
+.m-graph.m-success g.m-node:not(.m-flat) ellipse,
+.m-graph.m-success g.m-node:not(.m-flat) polygon,
+.m-graph.m-success g.m-edge text,
+.m-graph.m-success g.m-node.m-flat text {
   fill: #31c25d;
 }
-div.m-graph.m-success svg g.m-edge polygon,
-div.m-graph.m-success svg g.m-edge path,
-div.m-graph.m-success svg g.m-node ellipse,
-div.m-graph.m-success svg g.m-node polygon,
-div.m-graph.m-success svg g.m-node polyline {
+.m-graph.m-success g.m-edge polygon,
+.m-graph.m-success g.m-edge path,
+.m-graph.m-success g.m-node ellipse,
+.m-graph.m-success g.m-node polygon,
+.m-graph.m-success g.m-node polyline {
   stroke: #31c25d;
 }
-div.m-math.m-warning svg, svg.m-math.m-warning,
-div.m-math svg g.m-warning, svg.m-math g.m-warning,
-div.m-math svg rect.m-warning, svg.m-math rect.m-warning,
+.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
 div.m-plot svg .m-bar.m-warning,
-div.m-graph.m-warning svg g.m-edge polygon,
-div.m-graph.m-warning svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-warning svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-warning svg g.m-edge text,
-div.m-graph.m-warning svg g.m-node.m-flat text {
+.m-graph.m-warning g.m-edge polygon,
+.m-graph.m-warning g.m-node:not(.m-flat) ellipse,
+.m-graph.m-warning g.m-node:not(.m-flat) polygon,
+.m-graph.m-warning g.m-edge text,
+.m-graph.m-warning g.m-node.m-flat text {
   fill: #c7cf2f;
 }
-div.m-graph.m-warning svg g.m-edge polygon,
-div.m-graph.m-warning svg g.m-edge path,
-div.m-graph.m-warning svg g.m-node ellipse,
-div.m-graph.m-warning svg g.m-node polygon,
-div.m-graph.m-warning svg g.m-node polyline {
+.m-graph.m-warning g.m-edge polygon,
+.m-graph.m-warning g.m-edge path,
+.m-graph.m-warning g.m-node ellipse,
+.m-graph.m-warning g.m-node polygon,
+.m-graph.m-warning g.m-node polyline {
   stroke: #c7cf2f;
 }
-div.m-math.m-danger svg, svg.m-math.m-danger,
-div.m-math svg g.m-danger, svg.m-math g.m-danger,
-div.m-math svg rect.m-danger, svg.m-math rect.m-danger,
+.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
 div.m-plot svg .m-bar.m-danger,
-div.m-graph.m-danger svg g.m-edge polygon,
-div.m-graph.m-danger svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-danger svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-danger svg g.m-edge text,
-div.m-graph.m-danger svg g.m-node.m-flat text {
+.m-graph.m-danger g.m-edge polygon,
+.m-graph.m-danger g.m-node:not(.m-flat) ellipse,
+.m-graph.m-danger g.m-node:not(.m-flat) polygon,
+.m-graph.m-danger g.m-edge text,
+.m-graph.m-danger g.m-node.m-flat text {
   fill: #f60000;
 }
-div.m-graph.m-danger svg g.m-edge polygon,
-div.m-graph.m-danger svg g.m-edge path,
-div.m-graph.m-danger svg g.m-node ellipse,
-div.m-graph.m-danger svg g.m-node polygon,
-div.m-graph.m-danger svg g.m-node polyline {
+.m-graph.m-danger g.m-edge polygon,
+.m-graph.m-danger g.m-edge path,
+.m-graph.m-danger g.m-node ellipse,
+.m-graph.m-danger g.m-node polygon,
+.m-graph.m-danger g.m-node polyline {
   stroke: #f60000;
 }
-div.m-math.m-info svg, svg.m-math.m-info,
-div.m-math svg g.m-info, svg.m-math g.m-info,
-div.m-math svg rect.m-info, svg.m-math rect.m-info,
+.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
 div.m-plot svg .m-bar.m-info,
-div.m-graph.m-info svg g.m-edge polygon,
-div.m-graph.m-info svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-info svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-info svg g.m-edge text,
-div.m-graph.m-info svg g.m-node.m-flat text {
+.m-graph.m-info g.m-edge polygon,
+.m-graph.m-info g.m-node:not(.m-flat) ellipse,
+.m-graph.m-info g.m-node:not(.m-flat) polygon,
+.m-graph.m-info g.m-edge text,
+.m-graph.m-info g.m-node.m-flat text {
   fill: #2e7dc5;
 }
-div.m-graph.m-info svg g.m-edge polygon,
-div.m-graph.m-info svg g.m-edge path,
-div.m-graph.m-info svg g.m-node ellipse,
-div.m-graph.m-info svg g.m-node polygon,
-div.m-graph.m-info svg g.m-node polyline {
+.m-graph.m-info g.m-edge polygon,
+.m-graph.m-info g.m-edge path,
+.m-graph.m-info g.m-node ellipse,
+.m-graph.m-info g.m-node polygon,
+.m-graph.m-info g.m-node polyline {
   stroke: #2e7dc5;
 }
-div.m-math.m-dim svg, svg.m-math.m-dim,
-div.m-math svg g.m-dim, svg.m-math g.m-dim,
-div.m-math svg rect.m-dim, svg.m-math rect.m-dim,
+.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
 div.m-plot svg .m-bar.m-dim,
-div.m-graph.m-dim svg g.m-edge polygon,
-div.m-graph.m-dim svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-dim svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-dim svg g.m-edge text,
-div.m-graph.m-dim svg g.m-node.m-flat text {
+.m-graph.m-dim g.m-edge polygon,
+.m-graph.m-dim g.m-node:not(.m-flat) ellipse,
+.m-graph.m-dim g.m-node:not(.m-flat) polygon,
+.m-graph.m-dim g.m-edge text,
+.m-graph.m-dim g.m-node.m-flat text {
   fill: #bdbdbd;
 }
-div.m-graph.m-dim svg g.m-edge polygon,
-div.m-graph.m-dim svg g.m-edge path,
-div.m-graph.m-dim svg g.m-node ellipse,
-div.m-graph.m-dim svg g.m-node polygon,
-div.m-graph.m-dim svg g.m-node polyline {
+.m-graph.m-dim g.m-edge polygon,
+.m-graph.m-dim g.m-edge path,
+.m-graph.m-dim g.m-node ellipse,
+.m-graph.m-dim g.m-node polygon,
+.m-graph.m-dim g.m-node polyline {
   stroke: #bdbdbd;
 }
-div.m-graph svg g.m-edge.m-default polygon,
-div.m-graph svg g.m-node.m-default:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-default:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-default text,
-div.m-graph svg g.m-node.m-default.m-flat text {
+.m-graph g.m-edge.m-default polygon,
+.m-graph g.m-node.m-default:not(.m-flat) ellipse,
+.m-graph g.m-node.m-default:not(.m-flat) polygon,
+.m-graph g.m-edge.m-default text,
+.m-graph g.m-node.m-default.m-flat text {
   fill: #000000;
 }
-div.m-graph svg g.m-edge.m-default polygon,
-div.m-graph svg g.m-edge.m-default path,
-div.m-graph svg g.m-node.m-default ellipse,
-div.m-graph svg g.m-node.m-default polygon,
-div.m-graph svg g.m-node.m-default polyline {
+.m-graph g.m-edge.m-default polygon,
+.m-graph g.m-edge.m-default path,
+.m-graph g.m-node.m-default ellipse,
+.m-graph g.m-node.m-default polygon,
+.m-graph g.m-node.m-default polyline {
   stroke: #000000;
 }
-div.m-graph svg g.m-edge.m-primary polygon,
-div.m-graph svg g.m-node.m-primary:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-primary:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-primary text,
-div.m-graph svg g.m-node.m-primary.m-flat text {
+.m-graph g.m-edge.m-primary polygon,
+.m-graph g.m-node.m-primary:not(.m-flat) ellipse,
+.m-graph g.m-node.m-primary:not(.m-flat) polygon,
+.m-graph g.m-edge.m-primary text,
+.m-graph g.m-node.m-primary.m-flat text {
   fill: #cb4b16;
 }
-div.m-graph svg g.m-edge.m-primary polygon,
-div.m-graph svg g.m-edge.m-primary path,
-div.m-graph svg g.m-node.m-primary ellipse,
-div.m-graph svg g.m-node.m-primary polygon,
-div.m-graph svg g.m-node.m-primary polyline {
+.m-graph g.m-edge.m-primary polygon,
+.m-graph g.m-edge.m-primary path,
+.m-graph g.m-node.m-primary ellipse,
+.m-graph g.m-node.m-primary polygon,
+.m-graph g.m-node.m-primary polyline {
   stroke: #cb4b16;
 }
-div.m-graph svg g.m-edge.m-success polygon,
-div.m-graph svg g.m-node.m-success:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-success:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-success text,
-div.m-graph svg g.m-node.m-success.m-flat text {
+.m-graph g.m-edge.m-success polygon,
+.m-graph g.m-node.m-success:not(.m-flat) ellipse,
+.m-graph g.m-node.m-success:not(.m-flat) polygon,
+.m-graph g.m-edge.m-success text,
+.m-graph g.m-node.m-success.m-flat text {
   fill: #31c25d;
 }
-div.m-graph svg g.m-edge.m-success polygon,
-div.m-graph svg g.m-edge.m-success path,
-div.m-graph svg g.m-node.m-success ellipse,
-div.m-graph svg g.m-node.m-success polygon,
-div.m-graph svg g.m-node.m-success polyline {
+.m-graph g.m-edge.m-success polygon,
+.m-graph g.m-edge.m-success path,
+.m-graph g.m-node.m-success ellipse,
+.m-graph g.m-node.m-success polygon,
+.m-graph g.m-node.m-success polyline {
   stroke: #31c25d;
 }
-div.m-graph svg g.m-edge.m-warning polygon,
-div.m-graph svg g.m-node.m-warning:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-warning:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-warning text,
-div.m-graph svg g.m-node.m-warning.m-flat text {
+.m-graph g.m-edge.m-warning polygon,
+.m-graph g.m-node.m-warning:not(.m-flat) ellipse,
+.m-graph g.m-node.m-warning:not(.m-flat) polygon,
+.m-graph g.m-edge.m-warning text,
+.m-graph g.m-node.m-warning.m-flat text {
   fill: #c7cf2f;
 }
-div.m-graph svg g.m-edge.m-warning polygon,
-div.m-graph svg g.m-edge.m-warning path,
-div.m-graph svg g.m-node.m-warning ellipse,
-div.m-graph svg g.m-node.m-warning polygon,
-div.m-graph svg g.m-node.m-warning polyline {
+.m-graph g.m-edge.m-warning polygon,
+.m-graph g.m-edge.m-warning path,
+.m-graph g.m-node.m-warning ellipse,
+.m-graph g.m-node.m-warning polygon,
+.m-graph g.m-node.m-warning polyline {
   stroke: #c7cf2f;
 }
-div.m-graph svg g.m-edge.m-danger polygon,
-div.m-graph svg g.m-node.m-danger:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-danger:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-danger text,
-div.m-graph svg g.m-node.m-danger.m-flat text {
+.m-graph g.m-edge.m-danger polygon,
+.m-graph g.m-node.m-danger:not(.m-flat) ellipse,
+.m-graph g.m-node.m-danger:not(.m-flat) polygon,
+.m-graph g.m-edge.m-danger text,
+.m-graph g.m-node.m-danger.m-flat text {
   fill: #f60000;
 }
-div.m-graph svg g.m-edge.m-danger polygon,
-div.m-graph svg g.m-edge.m-danger path,
-div.m-graph svg g.m-node.m-danger ellipse,
-div.m-graph svg g.m-node.m-danger polygon,
-div.m-graph svg g.m-node.m-danger polyline {
+.m-graph g.m-edge.m-danger polygon,
+.m-graph g.m-edge.m-danger path,
+.m-graph g.m-node.m-danger ellipse,
+.m-graph g.m-node.m-danger polygon,
+.m-graph g.m-node.m-danger polyline {
   stroke: #f60000;
 }
-div.m-graph svg g.m-edge.m-info polygon,
-div.m-graph svg g.m-node.m-info:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-info:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-info text,
-div.m-graph svg g.m-node.m-info.m-flat text {
+.m-graph g.m-edge.m-info polygon,
+.m-graph g.m-node.m-info:not(.m-flat) ellipse,
+.m-graph g.m-node.m-info:not(.m-flat) polygon,
+.m-graph g.m-edge.m-info text,
+.m-graph g.m-node.m-info.m-flat text {
   fill: #2e7dc5;
 }
-div.m-graph svg g.m-edge.m-info polygon,
-div.m-graph svg g.m-edge.m-info path,
-div.m-graph svg g.m-node.m-info ellipse,
-div.m-graph svg g.m-node.m-info polygon,
-div.m-graph svg g.m-node.m-info polyline {
+.m-graph g.m-edge.m-info polygon,
+.m-graph g.m-edge.m-info path,
+.m-graph g.m-node.m-info ellipse,
+.m-graph g.m-node.m-info polygon,
+.m-graph g.m-node.m-info polyline {
   stroke: #2e7dc5;
 }
-div.m-graph svg g.m-edge.m-dim polygon,
-div.m-graph svg g.m-node.m-dim:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-dim:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-dim text,
-div.m-graph svg g.m-node.m-dim.m-flat text {
+.m-graph g.m-edge.m-dim polygon,
+.m-graph g.m-node.m-dim:not(.m-flat) ellipse,
+.m-graph g.m-node.m-dim:not(.m-flat) polygon,
+.m-graph g.m-edge.m-dim text,
+.m-graph g.m-node.m-dim.m-flat text {
   fill: #bdbdbd;
 }
-div.m-graph svg g.m-edge.m-dim polygon,
-div.m-graph svg g.m-edge.m-dim path,
-div.m-graph svg g.m-node.m-dim ellipse,
-div.m-graph svg g.m-node.m-dim polygon,
-div.m-graph svg g.m-node.m-dim polyline {
+.m-graph g.m-edge.m-dim polygon,
+.m-graph g.m-edge.m-dim path,
+.m-graph g.m-node.m-dim ellipse,
+.m-graph g.m-node.m-dim polygon,
+.m-graph g.m-node.m-dim polyline {
   stroke: #bdbdbd;
 }
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index ec58b592..cd2cd85b 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1063,12 +1063,6 @@ figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
-figure.m-figure figcaption {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  font-weight: normal;
-  font-size: 1.17rem;
-}
 figure.m-figure a img, figure.m-figure a svg {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -1122,6 +1116,12 @@ figure.m-figure.m-fullwidth:after {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: normal;
+  font-size: 1.17rem;
+}
 figure.m-figure.m-default:before { border-color: #fbf0ec; }
 figure.m-figure.m-default figcaption { color: #000000; }
 figure.m-figure.m-primary:before { border-color: #ef9069; }
@@ -1291,7 +1291,7 @@ div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-mat
 div.m-button.m-default a:active svg.m-math {
   fill: #cb4b16;
 }
-div.m-graph { font-size: 14px; }
+.m-graph { font-size: 14px; }
 div.m-plot svg, div.m-graph svg {
   max-width: 100%;
   margin-left: auto;
@@ -1311,246 +1311,241 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: #bdbdbd; }
-div.m-graph svg g.m-edge path, div.m-graph svg g.m-node.m-flat ellipse,
-div.m-graph svg g.m-node.m-flat polygon {
+.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse,
+.m-graph g.m-node.m-flat polygon {
   fill: none;
 }
-div.m-graph svg g.m-node:not(.m-flat) text {
+.m-graph g.m-node:not(.m-flat) text {
   fill: #ffffff;
 }
-div.m-math svg, svg.m-math { fill: #000000; }
-div.m-math.m-default svg, svg.m-math.m-default,
-div.m-math svg g.m-default, svg.m-math g.m-default,
-div.m-math svg rect.m-default, svg.m-math rect.m-default,
+figure.m-figure > svg.m-math:first-child,
+figure.m-figure > svg.m-graph:first-child {
+  padding: 1rem;
+  box-sizing: content-box;
+}
+figure.m-figure:not(.m-flat) > svg.m-math:first-child,
+figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
+  background-color: #f7e3db;
+}
+.m-math { fill: #000000; }
+.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
-div.m-graph svg g.m-edge polygon,
-div.m-graph svg g.m-node:not(.m-flat) ellipse,
-div.m-graph svg g.m-node:not(.m-flat) polygon,
-div.m-graph svg g.m-edge text,
-div.m-graph svg g.m-node.m-flat text,
-div.m-graph.m-default svg g.m-edge polygon,
-div.m-graph.m-default svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-default svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-default svg g.m-edge text,
-div.m-graph.m-default svg g.m-node.m-flat text {
+.m-graph g.m-edge polygon,
+.m-graph g.m-node:not(.m-flat) ellipse,
+.m-graph g.m-node:not(.m-flat) polygon,
+.m-graph g.m-edge text,
+.m-graph g.m-node.m-flat text,
+.m-graph.m-default g.m-edge polygon,
+.m-graph.m-default g.m-node:not(.m-flat) ellipse,
+.m-graph.m-default g.m-node:not(.m-flat) polygon,
+.m-graph.m-default g.m-edge text,
+.m-graph.m-default g.m-node.m-flat text {
   fill: #000000;
 }
-div.m-graph svg g.m-edge polygon,
-div.m-graph svg g.m-edge path,
-div.m-graph svg g.m-node ellipse,
-div.m-graph svg g.m-node polygon,
-div.m-graph svg g.m-node polyline,
-div.m-graph.m-default svg g.m-edge polygon,
-div.m-graph.m-default svg g.m-edge path,
-div.m-graph.m-default svg g.m-node ellipse,
-div.m-graph.m-default svg g.m-node polygon,
-div.m-graph.m-default svg g.m-node polyline {
+.m-graph g.m-edge polygon,
+.m-graph g.m-edge path,
+.m-graph g.m-node ellipse,
+.m-graph g.m-node polygon,
+.m-graph g.m-node polyline,
+.m-graph.m-default g.m-edge polygon,
+.m-graph.m-default g.m-edge path,
+.m-graph.m-default g.m-node ellipse,
+.m-graph.m-default g.m-node polygon,
+.m-graph.m-default g.m-node polyline {
   stroke: #000000;
 }
-div.m-math.m-primary svg, svg.m-math.m-primary,
-div.m-math svg g.m-primary, svg.m-math g.m-primary,
-div.m-math svg rect.m-primary, svg.m-math rect.m-primary,
+.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
 div.m-plot svg .m-bar.m-primary,
-div.m-graph.m-primary svg g.m-edge polygon,
-div.m-graph.m-primary svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-primary svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-primary svg g.m-edge text,
-div.m-graph.m-primary svg g.m-node.m-flat text {
+.m-graph.m-primary g.m-edge polygon,
+.m-graph.m-primary g.m-node:not(.m-flat) ellipse,
+.m-graph.m-primary g.m-node:not(.m-flat) polygon,
+.m-graph.m-primary g.m-edge text,
+.m-graph.m-primary g.m-node.m-flat text {
   fill: #cb4b16;
 }
-div.m-graph.m-primary svg g.m-edge polygon,
-div.m-graph.m-primary svg g.m-edge path,
-div.m-graph.m-primary svg g.m-node ellipse,
-div.m-graph.m-primary svg g.m-node polygon,
-div.m-graph.m-primary svg g.m-node polyline {
+.m-graph.m-primary g.m-edge polygon,
+.m-graph.m-primary g.m-edge path,
+.m-graph.m-primary g.m-node ellipse,
+.m-graph.m-primary g.m-node polygon,
+.m-graph.m-primary g.m-node polyline {
   stroke: #cb4b16;
 }
-div.m-math.m-success svg, svg.m-math.m-success,
-div.m-math svg g.m-success, svg.m-math g.m-success,
-div.m-math svg rect.m-success, svg.m-math rect.m-success,
+.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
 div.m-plot svg .m-bar.m-success,
-div.m-graph.m-success svg g.m-edge polygon,
-div.m-graph.m-success svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-success svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-success svg g.m-edge text,
-div.m-graph.m-success svg g.m-node.m-flat text {
+.m-graph.m-success g.m-edge polygon,
+.m-graph.m-success g.m-node:not(.m-flat) ellipse,
+.m-graph.m-success g.m-node:not(.m-flat) polygon,
+.m-graph.m-success g.m-edge text,
+.m-graph.m-success g.m-node.m-flat text {
   fill: #31c25d;
 }
-div.m-graph.m-success svg g.m-edge polygon,
-div.m-graph.m-success svg g.m-edge path,
-div.m-graph.m-success svg g.m-node ellipse,
-div.m-graph.m-success svg g.m-node polygon,
-div.m-graph.m-success svg g.m-node polyline {
+.m-graph.m-success g.m-edge polygon,
+.m-graph.m-success g.m-edge path,
+.m-graph.m-success g.m-node ellipse,
+.m-graph.m-success g.m-node polygon,
+.m-graph.m-success g.m-node polyline {
   stroke: #31c25d;
 }
-div.m-math.m-warning svg, svg.m-math.m-warning,
-div.m-math svg g.m-warning, svg.m-math g.m-warning,
-div.m-math svg rect.m-warning, svg.m-math rect.m-warning,
+.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
 div.m-plot svg .m-bar.m-warning,
-div.m-graph.m-warning svg g.m-edge polygon,
-div.m-graph.m-warning svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-warning svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-warning svg g.m-edge text,
-div.m-graph.m-warning svg g.m-node.m-flat text {
+.m-graph.m-warning g.m-edge polygon,
+.m-graph.m-warning g.m-node:not(.m-flat) ellipse,
+.m-graph.m-warning g.m-node:not(.m-flat) polygon,
+.m-graph.m-warning g.m-edge text,
+.m-graph.m-warning g.m-node.m-flat text {
   fill: #c7cf2f;
 }
-div.m-graph.m-warning svg g.m-edge polygon,
-div.m-graph.m-warning svg g.m-edge path,
-div.m-graph.m-warning svg g.m-node ellipse,
-div.m-graph.m-warning svg g.m-node polygon,
-div.m-graph.m-warning svg g.m-node polyline {
+.m-graph.m-warning g.m-edge polygon,
+.m-graph.m-warning g.m-edge path,
+.m-graph.m-warning g.m-node ellipse,
+.m-graph.m-warning g.m-node polygon,
+.m-graph.m-warning g.m-node polyline {
   stroke: #c7cf2f;
 }
-div.m-math.m-danger svg, svg.m-math.m-danger,
-div.m-math svg g.m-danger, svg.m-math g.m-danger,
-div.m-math svg rect.m-danger, svg.m-math rect.m-danger,
+.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
 div.m-plot svg .m-bar.m-danger,
-div.m-graph.m-danger svg g.m-edge polygon,
-div.m-graph.m-danger svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-danger svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-danger svg g.m-edge text,
-div.m-graph.m-danger svg g.m-node.m-flat text {
+.m-graph.m-danger g.m-edge polygon,
+.m-graph.m-danger g.m-node:not(.m-flat) ellipse,
+.m-graph.m-danger g.m-node:not(.m-flat) polygon,
+.m-graph.m-danger g.m-edge text,
+.m-graph.m-danger g.m-node.m-flat text {
   fill: #f60000;
 }
-div.m-graph.m-danger svg g.m-edge polygon,
-div.m-graph.m-danger svg g.m-edge path,
-div.m-graph.m-danger svg g.m-node ellipse,
-div.m-graph.m-danger svg g.m-node polygon,
-div.m-graph.m-danger svg g.m-node polyline {
+.m-graph.m-danger g.m-edge polygon,
+.m-graph.m-danger g.m-edge path,
+.m-graph.m-danger g.m-node ellipse,
+.m-graph.m-danger g.m-node polygon,
+.m-graph.m-danger g.m-node polyline {
   stroke: #f60000;
 }
-div.m-math.m-info svg, svg.m-math.m-info,
-div.m-math svg g.m-info, svg.m-math g.m-info,
-div.m-math svg rect.m-info, svg.m-math rect.m-info,
+.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
 div.m-plot svg .m-bar.m-info,
-div.m-graph.m-info svg g.m-edge polygon,
-div.m-graph.m-info svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-info svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-info svg g.m-edge text,
-div.m-graph.m-info svg g.m-node.m-flat text {
+.m-graph.m-info g.m-edge polygon,
+.m-graph.m-info g.m-node:not(.m-flat) ellipse,
+.m-graph.m-info g.m-node:not(.m-flat) polygon,
+.m-graph.m-info g.m-edge text,
+.m-graph.m-info g.m-node.m-flat text {
   fill: #2e7dc5;
 }
-div.m-graph.m-info svg g.m-edge polygon,
-div.m-graph.m-info svg g.m-edge path,
-div.m-graph.m-info svg g.m-node ellipse,
-div.m-graph.m-info svg g.m-node polygon,
-div.m-graph.m-info svg g.m-node polyline {
+.m-graph.m-info g.m-edge polygon,
+.m-graph.m-info g.m-edge path,
+.m-graph.m-info g.m-node ellipse,
+.m-graph.m-info g.m-node polygon,
+.m-graph.m-info g.m-node polyline {
   stroke: #2e7dc5;
 }
-div.m-math.m-dim svg, svg.m-math.m-dim,
-div.m-math svg g.m-dim, svg.m-math g.m-dim,
-div.m-math svg rect.m-dim, svg.m-math rect.m-dim,
+.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
 div.m-plot svg .m-bar.m-dim,
-div.m-graph.m-dim svg g.m-edge polygon,
-div.m-graph.m-dim svg g.m-node:not(.m-flat) ellipse,
-div.m-graph.m-dim svg g.m-node:not(.m-flat) polygon,
-div.m-graph.m-dim svg g.m-edge text,
-div.m-graph.m-dim svg g.m-node.m-flat text {
+.m-graph.m-dim g.m-edge polygon,
+.m-graph.m-dim g.m-node:not(.m-flat) ellipse,
+.m-graph.m-dim g.m-node:not(.m-flat) polygon,
+.m-graph.m-dim g.m-edge text,
+.m-graph.m-dim g.m-node.m-flat text {
   fill: #bdbdbd;
 }
-div.m-graph.m-dim svg g.m-edge polygon,
-div.m-graph.m-dim svg g.m-edge path,
-div.m-graph.m-dim svg g.m-node ellipse,
-div.m-graph.m-dim svg g.m-node polygon,
-div.m-graph.m-dim svg g.m-node polyline {
+.m-graph.m-dim g.m-edge polygon,
+.m-graph.m-dim g.m-edge path,
+.m-graph.m-dim g.m-node ellipse,
+.m-graph.m-dim g.m-node polygon,
+.m-graph.m-dim g.m-node polyline {
   stroke: #bdbdbd;
 }
-div.m-graph svg g.m-edge.m-default polygon,
-div.m-graph svg g.m-node.m-default:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-default:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-default text,
-div.m-graph svg g.m-node.m-default.m-flat text {
+.m-graph g.m-edge.m-default polygon,
+.m-graph g.m-node.m-default:not(.m-flat) ellipse,
+.m-graph g.m-node.m-default:not(.m-flat) polygon,
+.m-graph g.m-edge.m-default text,
+.m-graph g.m-node.m-default.m-flat text {
   fill: #000000;
 }
-div.m-graph svg g.m-edge.m-default polygon,
-div.m-graph svg g.m-edge.m-default path,
-div.m-graph svg g.m-node.m-default ellipse,
-div.m-graph svg g.m-node.m-default polygon,
-div.m-graph svg g.m-node.m-default polyline {
+.m-graph g.m-edge.m-default polygon,
+.m-graph g.m-edge.m-default path,
+.m-graph g.m-node.m-default ellipse,
+.m-graph g.m-node.m-default polygon,
+.m-graph g.m-node.m-default polyline {
   stroke: #000000;
 }
-div.m-graph svg g.m-edge.m-primary polygon,
-div.m-graph svg g.m-node.m-primary:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-primary:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-primary text,
-div.m-graph svg g.m-node.m-primary.m-flat text {
+.m-graph g.m-edge.m-primary polygon,
+.m-graph g.m-node.m-primary:not(.m-flat) ellipse,
+.m-graph g.m-node.m-primary:not(.m-flat) polygon,
+.m-graph g.m-edge.m-primary text,
+.m-graph g.m-node.m-primary.m-flat text {
   fill: #cb4b16;
 }
-div.m-graph svg g.m-edge.m-primary polygon,
-div.m-graph svg g.m-edge.m-primary path,
-div.m-graph svg g.m-node.m-primary ellipse,
-div.m-graph svg g.m-node.m-primary polygon,
-div.m-graph svg g.m-node.m-primary polyline {
+.m-graph g.m-edge.m-primary polygon,
+.m-graph g.m-edge.m-primary path,
+.m-graph g.m-node.m-primary ellipse,
+.m-graph g.m-node.m-primary polygon,
+.m-graph g.m-node.m-primary polyline {
   stroke: #cb4b16;
 }
-div.m-graph svg g.m-edge.m-success polygon,
-div.m-graph svg g.m-node.m-success:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-success:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-success text,
-div.m-graph svg g.m-node.m-success.m-flat text {
+.m-graph g.m-edge.m-success polygon,
+.m-graph g.m-node.m-success:not(.m-flat) ellipse,
+.m-graph g.m-node.m-success:not(.m-flat) polygon,
+.m-graph g.m-edge.m-success text,
+.m-graph g.m-node.m-success.m-flat text {
   fill: #31c25d;
 }
-div.m-graph svg g.m-edge.m-success polygon,
-div.m-graph svg g.m-edge.m-success path,
-div.m-graph svg g.m-node.m-success ellipse,
-div.m-graph svg g.m-node.m-success polygon,
-div.m-graph svg g.m-node.m-success polyline {
+.m-graph g.m-edge.m-success polygon,
+.m-graph g.m-edge.m-success path,
+.m-graph g.m-node.m-success ellipse,
+.m-graph g.m-node.m-success polygon,
+.m-graph g.m-node.m-success polyline {
   stroke: #31c25d;
 }
-div.m-graph svg g.m-edge.m-warning polygon,
-div.m-graph svg g.m-node.m-warning:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-warning:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-warning text,
-div.m-graph svg g.m-node.m-warning.m-flat text {
+.m-graph g.m-edge.m-warning polygon,
+.m-graph g.m-node.m-warning:not(.m-flat) ellipse,
+.m-graph g.m-node.m-warning:not(.m-flat) polygon,
+.m-graph g.m-edge.m-warning text,
+.m-graph g.m-node.m-warning.m-flat text {
   fill: #c7cf2f;
 }
-div.m-graph svg g.m-edge.m-warning polygon,
-div.m-graph svg g.m-edge.m-warning path,
-div.m-graph svg g.m-node.m-warning ellipse,
-div.m-graph svg g.m-node.m-warning polygon,
-div.m-graph svg g.m-node.m-warning polyline {
+.m-graph g.m-edge.m-warning polygon,
+.m-graph g.m-edge.m-warning path,
+.m-graph g.m-node.m-warning ellipse,
+.m-graph g.m-node.m-warning polygon,
+.m-graph g.m-node.m-warning polyline {
   stroke: #c7cf2f;
 }
-div.m-graph svg g.m-edge.m-danger polygon,
-div.m-graph svg g.m-node.m-danger:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-danger:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-danger text,
-div.m-graph svg g.m-node.m-danger.m-flat text {
+.m-graph g.m-edge.m-danger polygon,
+.m-graph g.m-node.m-danger:not(.m-flat) ellipse,
+.m-graph g.m-node.m-danger:not(.m-flat) polygon,
+.m-graph g.m-edge.m-danger text,
+.m-graph g.m-node.m-danger.m-flat text {
   fill: #f60000;
 }
-div.m-graph svg g.m-edge.m-danger polygon,
-div.m-graph svg g.m-edge.m-danger path,
-div.m-graph svg g.m-node.m-danger ellipse,
-div.m-graph svg g.m-node.m-danger polygon,
-div.m-graph svg g.m-node.m-danger polyline {
+.m-graph g.m-edge.m-danger polygon,
+.m-graph g.m-edge.m-danger path,
+.m-graph g.m-node.m-danger ellipse,
+.m-graph g.m-node.m-danger polygon,
+.m-graph g.m-node.m-danger polyline {
   stroke: #f60000;
 }
-div.m-graph svg g.m-edge.m-info polygon,
-div.m-graph svg g.m-node.m-info:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-info:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-info text,
-div.m-graph svg g.m-node.m-info.m-flat text {
+.m-graph g.m-edge.m-info polygon,
+.m-graph g.m-node.m-info:not(.m-flat) ellipse,
+.m-graph g.m-node.m-info:not(.m-flat) polygon,
+.m-graph g.m-edge.m-info text,
+.m-graph g.m-node.m-info.m-flat text {
   fill: #2e7dc5;
 }
-div.m-graph svg g.m-edge.m-info polygon,
-div.m-graph svg g.m-edge.m-info path,
-div.m-graph svg g.m-node.m-info ellipse,
-div.m-graph svg g.m-node.m-info polygon,
-div.m-graph svg g.m-node.m-info polyline {
+.m-graph g.m-edge.m-info polygon,
+.m-graph g.m-edge.m-info path,
+.m-graph g.m-node.m-info ellipse,
+.m-graph g.m-node.m-info polygon,
+.m-graph g.m-node.m-info polyline {
   stroke: #2e7dc5;
 }
-div.m-graph svg g.m-edge.m-dim polygon,
-div.m-graph svg g.m-node.m-dim:not(.m-flat) ellipse,
-div.m-graph svg g.m-node.m-dim:not(.m-flat) polygon,
-div.m-graph svg g.m-edge.m-dim text,
-div.m-graph svg g.m-node.m-dim.m-flat text {
+.m-graph g.m-edge.m-dim polygon,
+.m-graph g.m-node.m-dim:not(.m-flat) ellipse,
+.m-graph g.m-node.m-dim:not(.m-flat) polygon,
+.m-graph g.m-edge.m-dim text,
+.m-graph g.m-node.m-dim.m-flat text {
   fill: #bdbdbd;
 }
-div.m-graph svg g.m-edge.m-dim polygon,
-div.m-graph svg g.m-edge.m-dim path,
-div.m-graph svg g.m-node.m-dim ellipse,
-div.m-graph svg g.m-node.m-dim polygon,
-div.m-graph svg g.m-node.m-dim polyline {
+.m-graph g.m-edge.m-dim polygon,
+.m-graph g.m-edge.m-dim path,
+.m-graph g.m-node.m-dim ellipse,
+.m-graph g.m-node.m-dim polygon,
+.m-graph g.m-node.m-dim polyline {
   stroke: #bdbdbd;
 }
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 6bf6b215..8fb8d6af 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -928,7 +928,7 @@ consists of a :html:`<figure>` (or :html:`<div>`) element with the
 you want to put in as the result. The :html:`<pre>` element has to be the very
 first child of the :html:`<figure>` for the markup to work correctly. Similar
 to image figure, you can apply the :css:`.m-flat` CSS class to remove the
-border.
+border, the :html:`<figcaption>` element is styled as well.
 
 Example (note that this page uses code figure for all code examples, so it's a
 bit of a figure inception shown here):
@@ -1069,6 +1069,58 @@ inside :html:`<svg>` for highlighting parts of formulas.
     integrates LaTeX math directly into your :abbr:`reST <reStructuredText>`
     markup for convenient content authoring.
 
+`Math figure`_
+--------------
+
+Similarly to `code figure`_, math can be also put in a :html:`<figure>` with
+assigned caption and description. It behaves the same as `image figures`_, the
+figure width being defined by the math equation size. Create a
+:html:`<figure class="m-figure">` element and put :html:`<svg class="m-math">`
+as a first child. The remaining content of the figure can be :html:`<figcaption>`
+and/or arbitrary other markup. Add the :css:`.m-flat` class to the
+:html:`<figure>` to remove the outer border and equation background,
+`CSS color classes`_ on the :html:`<figure>` affect the figure, on the
+:html:`<svg>` affect the equation.
+
+.. code-figure::
+
+    .. code:: html
+
+        <figure class="m-figure">
+          <svg class="m-math">
+            <title>a^2 = b^2 + c^2</title>
+            <g>...</g>
+          </svg>
+          <figcaption>Pythagorean theorem</figcaption>
+        </figure>
+
+    .. raw:: html
+
+        <figure class="m-figure">
+          <svg class="m-math" height='13.7321pt' version='1.1' viewBox='164.011 -10.9857 60.0231 10.9857' width='75.0289pt'>
+            <title>a^2 = b^2 + c^2</title>
+            <defs>
+              <path d='M3.59851 -1.42267C3.53873 -1.21943 3.53873 -1.19552 3.37136 -0.968369C3.10834 -0.633624 2.58232 -0.119552 2.02042 -0.119552C1.53026 -0.119552 1.25529 -0.561893 1.25529 -1.26725C1.25529 -1.92478 1.6259 -3.26376 1.85305 -3.76588C2.25953 -4.60274 2.82142 -5.03313 3.28767 -5.03313C4.07671 -5.03313 4.23213 -4.0528 4.23213 -3.95716C4.23213 -3.94521 4.19626 -3.78979 4.18431 -3.76588L3.59851 -1.42267ZM4.36364 -4.48319C4.23213 -4.79402 3.90934 -5.27223 3.28767 -5.27223C1.93674 -5.27223 0.478207 -3.52677 0.478207 -1.75741C0.478207 -0.573848 1.17161 0.119552 1.98456 0.119552C2.64209 0.119552 3.20399 -0.394521 3.53873 -0.789041C3.65828 -0.0836862 4.22017 0.119552 4.57883 0.119552S5.22441 -0.0956413 5.4396 -0.526027C5.63088 -0.932503 5.79826 -1.66177 5.79826 -1.70959C5.79826 -1.76936 5.75044 -1.81719 5.6787 -1.81719C5.57111 -1.81719 5.55915 -1.75741 5.51133 -1.57808C5.332 -0.872727 5.10486 -0.119552 4.61469 -0.119552C4.268 -0.119552 4.24408 -0.430386 4.24408 -0.669489C4.24408 -0.944458 4.27995 -1.07597 4.38755 -1.54222C4.47123 -1.8411 4.53101 -2.10411 4.62665 -2.45081C5.06899 -4.24408 5.17659 -4.67447 5.17659 -4.7462C5.17659 -4.91357 5.04508 -5.04508 4.86575 -5.04508C4.48319 -5.04508 4.38755 -4.62665 4.36364 -4.48319Z' id='math1-g0-97'/>
+              <path d='M2.76164 -7.99801C2.7736 -8.04583 2.79751 -8.11756 2.79751 -8.17733C2.79751 -8.29689 2.67796 -8.29689 2.65405 -8.29689C2.64209 -8.29689 2.21171 -8.26102 1.99651 -8.23711C1.79328 -8.22516 1.61395 -8.20125 1.39875 -8.18929C1.11183 -8.16538 1.02814 -8.15342 1.02814 -7.93823C1.02814 -7.81868 1.1477 -7.81868 1.26725 -7.81868C1.87696 -7.81868 1.87696 -7.71108 1.87696 -7.59153C1.87696 -7.50785 1.78132 -7.16115 1.7335 -6.94595L1.44658 -5.79826C1.32702 -5.32005 0.645579 -2.60623 0.597758 -2.39103C0.537983 -2.09215 0.537983 -1.88892 0.537983 -1.7335C0.537983 -0.514072 1.21943 0.119552 1.99651 0.119552C3.38331 0.119552 4.81793 -1.66177 4.81793 -3.39527C4.81793 -4.49514 4.19626 -5.27223 3.29963 -5.27223C2.67796 -5.27223 2.11606 -4.75816 1.88892 -4.51905L2.76164 -7.99801ZM2.00847 -0.119552C1.6259 -0.119552 1.20747 -0.406476 1.20747 -1.33898C1.20747 -1.7335 1.24334 -1.96065 1.45853 -2.79751C1.4944 -2.95293 1.68568 -3.71806 1.7335 -3.87347C1.75741 -3.96912 2.46276 -5.03313 3.27572 -5.03313C3.80174 -5.03313 4.04085 -4.5071 4.04085 -3.88543C4.04085 -3.31158 3.7061 -1.96065 3.40722 -1.33898C3.10834 -0.6934 2.55841 -0.119552 2.00847 -0.119552Z' id='math1-g0-98'/>
+              <path d='M4.67447 -4.49514C4.44732 -4.49514 4.33973 -4.49514 4.17235 -4.35168C4.10062 -4.29191 3.96912 -4.11258 3.96912 -3.9213C3.96912 -3.68219 4.14844 -3.53873 4.37559 -3.53873C4.66252 -3.53873 4.98531 -3.77783 4.98531 -4.25604C4.98531 -4.82989 4.43537 -5.27223 3.61046 -5.27223C2.04433 -5.27223 0.478207 -3.56264 0.478207 -1.86501C0.478207 -0.824907 1.12379 0.119552 2.34321 0.119552C3.96912 0.119552 4.99726 -1.1477 4.99726 -1.30311C4.99726 -1.37484 4.92553 -1.43462 4.87771 -1.43462C4.84184 -1.43462 4.82989 -1.42267 4.72229 -1.31507C3.95716 -0.298879 2.82142 -0.119552 2.36712 -0.119552C1.54222 -0.119552 1.2792 -0.836862 1.2792 -1.43462C1.2792 -1.85305 1.48244 -3.0127 1.91283 -3.82565C2.22366 -4.38755 2.86924 -5.03313 3.62242 -5.03313C3.77783 -5.03313 4.43537 -5.00922 4.67447 -4.49514Z' id='math1-g0-99'/>
+              <path d='M4.77011 -2.76164H8.06974C8.23711 -2.76164 8.4523 -2.76164 8.4523 -2.97684C8.4523 -3.20399 8.24907 -3.20399 8.06974 -3.20399H4.77011V-6.50361C4.77011 -6.67098 4.77011 -6.88618 4.55492 -6.88618C4.32777 -6.88618 4.32777 -6.68294 4.32777 -6.50361V-3.20399H1.02814C0.860772 -3.20399 0.645579 -3.20399 0.645579 -2.98879C0.645579 -2.76164 0.848817 -2.76164 1.02814 -2.76164H4.32777V0.537983C4.32777 0.705355 4.32777 0.920548 4.54296 0.920548C4.77011 0.920548 4.77011 0.71731 4.77011 0.537983V-2.76164Z' id='math1-g2-43'/>
+              <path d='M8.06974 -3.87347C8.23711 -3.87347 8.4523 -3.87347 8.4523 -4.08867C8.4523 -4.31582 8.24907 -4.31582 8.06974 -4.31582H1.02814C0.860772 -4.31582 0.645579 -4.31582 0.645579 -4.10062C0.645579 -3.87347 0.848817 -3.87347 1.02814 -3.87347H8.06974ZM8.06974 -1.64981C8.23711 -1.64981 8.4523 -1.64981 8.4523 -1.86501C8.4523 -2.09215 8.24907 -2.09215 8.06974 -2.09215H1.02814C0.860772 -2.09215 0.645579 -2.09215 0.645579 -1.87696C0.645579 -1.64981 0.848817 -1.64981 1.02814 -1.64981H8.06974Z' id='math1-g2-61'/>
+              <path d='M2.24757 -1.6259C2.37509 -1.74545 2.70984 -2.00847 2.83736 -2.12005C3.33151 -2.57435 3.80174 -3.0127 3.80174 -3.73798C3.80174 -4.68643 3.00473 -5.30012 2.00847 -5.30012C1.05205 -5.30012 0.422416 -4.57484 0.422416 -3.8655C0.422416 -3.47497 0.73325 -3.41918 0.844832 -3.41918C1.0122 -3.41918 1.25928 -3.53873 1.25928 -3.84159C1.25928 -4.25604 0.860772 -4.25604 0.765131 -4.25604C0.996264 -4.83786 1.53026 -5.03711 1.9208 -5.03711C2.66202 -5.03711 3.04458 -4.40747 3.04458 -3.73798C3.04458 -2.90909 2.46276 -2.30336 1.52229 -1.33898L0.518057 -0.302864C0.422416 -0.215193 0.422416 -0.199253 0.422416 0H3.57061L3.80174 -1.42665H3.55467C3.53076 -1.26725 3.467 -0.868742 3.37136 -0.71731C3.32354 -0.653549 2.71781 -0.653549 2.59029 -0.653549H1.17161L2.24757 -1.6259Z' id='math1-g1-50'/>
+            </defs>
+            <g id='math1-page1'>
+              <use x='164.011' xlink:href='#math1-g0-97' y='-0.913201'/>
+              <use x='170.156' xlink:href='#math1-g1-50' y='-5.84939'/>
+              <use x='178.209' xlink:href='#math1-g2-61' y='-0.913201'/>
+              <use x='190.634' xlink:href='#math1-g0-98' y='-0.913201'/>
+              <use x='195.612' xlink:href='#math1-g1-50' y='-5.84939'/>
+              <use x='203.001' xlink:href='#math1-g2-43' y='-0.913201'/>
+              <use x='214.762' xlink:href='#math1-g0-99' y='-0.913201'/>
+              <use x='219.8' xlink:href='#math1-g1-50' y='-5.84939'/>
+            </g>
+          </svg>
+          <figcaption>Pythagorean theorem</figcaption>
+        </figure>
+
 `Plots`_
 ========
 
@@ -1188,6 +1240,57 @@ on a :css:`.m-node` to make it just an outline instead of filled.
     allows you to produce plots using :rst:`.. graph::` directives directly in
     your :abbr:`reST <reStructuredText>` markup.
 
+`Graph figure`_
+---------------
+
+Similarly to `math figure`_, graphs also can be :html:`<figure>`\ s. The
+behavior is almost identical, create a :html:`<figure class="m-figure m-graph">`
+element and put the :html:`<svg>` as a first child, all other content after.
+
+.. code-figure::
+
+    .. code:: html
+
+        <figure class="m-figure">
+          <svg class="m-graph m-warning">
+            ...
+          </svg>
+          <figcaption>Impenetrable logic</figcaption>
+        </figure>
+
+    .. raw:: html
+
+        <figure class="m-figure">
+        <svg class="m-graph m-warning" style="width: 10.500rem; height: 6.000rem;" viewBox="0.00 0.00 167.65 96.33">
+        <g transform="scale(1 1) rotate(0) translate(4 92.3259)">
+        <title>FSM</title>
+        <g class="m-node">
+        <title>yes</title>
+        <ellipse cx="27.5772" cy="-27.5772" rx="27.6545" ry="27.6545"/>
+        <text text-anchor="middle" x="27.5772" y="-23.7772">yes</text>
+        </g>
+        <g class="m-node m-flat">
+        <title>no</title>
+        <ellipse cx="134.9031" cy="-27.5772" rx="25" ry="25"/>
+        <text text-anchor="middle" x="134.9031" y="-23.7772">no</text>
+        </g>
+        <g class="m-edge">
+        <title>yes&#45;&gt;no</title>
+        <path d="M55.2163,-27.5772C68.8104,-27.5772 85.3444,-27.5772 99.8205,-27.5772"/>
+        <polygon points="99.9261,-31.0773 109.9261,-27.5772 99.9261,-24.0773 99.9261,-31.0773"/>
+        <text text-anchor="middle" x="82.6543" y="-32.7772">no</text>
+        </g>
+        <g class="m-edge m-dim">
+        <title>no&#45;&gt;no</title>
+        <path d="M125.3459,-50.4471C124.3033,-61.0564 127.489,-70.3259 134.9031,-70.3259 139.7685,-70.3259 142.813,-66.3338 144.0365,-60.5909"/>
+        <polygon points="147.5398,-60.5845 144.4603,-50.4471 140.5459,-60.2923 147.5398,-60.5845"/>
+        <text text-anchor="middle" x="134.9031" y="-75.5259">no</text>
+        </g>
+        </g>
+        </svg>
+        <figcaption>Impenetrable logic</figcaption>
+        </figure>
+
 `Padding`_
 ==========
 
diff --git a/doc/plugins/math-and-code-test.rst b/doc/plugins/math-and-code-test.rst
new file mode 100644
index 00000000..4cd7b884
--- /dev/null
+++ b/doc/plugins/math-and-code-test.rst
@@ -0,0 +1,182 @@
+..
+    This file is part of m.css.
+
+    Copyright © 2017, 2018 Vladimír Vondruš <mosra@centrum.cz>
+
+    Permission is hereby granted, free of charge, to any person obtaining a
+    copy of this software and associated documentation files (the "Software"),
+    to deal in the Software without restriction, including without limitation
+    the rights to use, copy, modify, merge, publish, distribute, sublicense,
+    and/or sell copies of the Software, and to permit persons to whom the
+    Software is furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included
+    in all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+    DEALINGS IN THE SOFTWARE.
+..
+
+Test
+####
+
+:save_as: plugins/math-and-code/test/index.html
+:breadcrumb: {filename}/plugins.rst Pelican plugins
+             {filename}/plugins/math-and-code.rst Math and code
+
+Math
+====
+
+First is colored except :math:`c^2`, second is colored globally, third is
+colored globally with overrides except for :math:`c^2`.
+
+.. container:: m-row
+
+    .. container:: m-col-m-4
+
+        .. math::
+
+            {\color{m-default} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-default
+
+            a^2 + b^2 = c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-danger
+
+            {\color{m-default} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+
+            {\color{m-primary} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-primary
+
+            a^2 + b^2 = c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-danger
+
+            {\color{m-primary} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+
+            {\color{m-success} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-success
+
+            a^2 + b^2 = c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-danger
+
+            {\color{m-success} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+
+            {\color{m-warning} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-warning
+
+            a^2 + b^2 = c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-danger
+
+            {\color{m-warning} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+
+            {\color{m-danger} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-danger
+
+            a^2 + b^2 = c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-success
+
+            {\color{m-danger} a^2 + b^2 =} ~ c^2
+
+.. container:: m-row
+
+    .. container:: m-col-m-4
+
+        .. math::
+
+            {\color{m-info} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-info
+
+            a^2 + b^2 = c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-danger
+
+            {\color{m-info} a^2 + b^2 =} ~ c^2
+
+.. container:: m-row
+
+    .. container:: m-col-m-4
+
+        .. math::
+
+            {\color{m-dim} a^2 + b^2 =} ~ c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-dim
+
+            a^2 + b^2 = c^2
+
+    .. container:: m-col-m-4
+
+        .. math::
+            :class: m-danger
+
+            {\color{m-dim} a^2 + b^2 =} ~ c^2
diff --git a/doc/plugins/plots-and-graphs-test.rst b/doc/plugins/plots-and-graphs-test.rst
index cc2f4488..33ccc53d 100644
--- a/doc/plugins/plots-and-graphs-test.rst
+++ b/doc/plugins/plots-and-graphs-test.rst
@@ -63,7 +63,7 @@ Graphs
 ======
 
 First is colored except the self-pointing "no", second is colored globally,
-third is colored globally with overrides except for for the self-pointing "no".
+third is colored globally with overrides except for the self-pointing "no".
 
 .. container:: m-row