Custom CSS for subfigures

2026-09-27 22:44:45 +02:00
parent 0ac269c786
commit acb04cdfba
5 changed files with 666 additions and 451 deletions
@@ -0,0 +1,58 @@
+/* LaTeX-style subfigures across the site */
+
+.subfigures {
+  margin: 1em 0;
+}
+
+.subfigure-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;       /* bottom-align like LaTeX [b] */
+  justify-content: center;
+  gap: 1em;
+}
+
+.subfigure {
+  flex: 0 1 auto;              /* use the inline flex-basis, but allow shrinking */
+  min-width: 0;                /* let items shrink below their content width */
+  box-sizing: border-box;
+}
+
+.subfigure img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+
+.subfigure-caption {
+  text-align: center;
+  font-size: 0.85em;
+  color: #555;
+  margin-top: 0.4em;
+}
+
+.subfigure-label {
+  font-weight: 600;
+  margin-right: 0.25em;
+}
+
+/* Main caption styled like the theme's normal figure figcaption */
+.subfigures > figcaption {
+  text-align: center;
+  margin-top: 0.75em;
+}
+
+/* Stack subfigures on narrow screens */
+@media (max-width: 600px) {
+  .subfigure-row {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .subfigure {
+    flex-basis: auto !important;
+    width: 100%;
+    max-width: 100%;
+  }
+}