From 1fe561a4dec01c6af559e8ac435e0fe7eb4d84db Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Sun, 17 Oct 2021 21:31:27 +0100
Subject: [PATCH] Style diagrams based on intended size

---
 assets/scss/_custom.scss | 42 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index 20a36b6175..90153beeb8 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -673,3 +673,45 @@ body.td-documentation {
     font-size: inherit !important;
   }
 }
+
+/* Force size constraints on figures */
+figure {
+  &.diagram-small img {
+    max-height: clamp(20mm,12em,80vh);
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+  &.diagram-medium img {
+    max-height: clamp(25mm,20em,80vh);
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+  &.diagram-large img {
+    max-width: clamp(0vw, 95vw, 100%);
+    max-height: calc(80vh - 8rem);
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  figure {
+    &.diagram-small, &.diagram-medium {
+      max-width: 80%;
+    }
+    &.diagram-large {
+      max-width: 100%;
+      width: 100%;
+    }
+    &.diagram-small img {
+      max-width: clamp(30rem, 45ch, 100mm);
+    }
+    &.diagram-medium img {
+      max-width: clamp(50rem, 20ch, 160mm);
+    }
+    &.diagram-large img {
+      max-width: clamp(25vw, 95vw, 100%);
+      max-height: calc(100vh - 10rem);
+    }
+  }
+}