adjust CSS for figures

Edirom · Apr 22, 2024 · 1f07868 · 1f07868
1 parent 68a3a26
commit 1f07868
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 14 deletions.
diff --git a/resources/sass/base/_helpers.scss b/resources/sass/base/_helpers.scss
@@ -37,20 +37,6 @@
     background-color: $gray-dark;
 }
 
-.float-left img {
-    float:left;
-    margin: 0px 2em 1em 0px;
-    padding: .5em 1em;
-    max-width: 100%;
-}
-
-.float-right img {
-    float:right;
-    margin: 0px 0px 1em 2em;
-    padding: .5em 1em;
-    max-width: 100%;
-}
-
 .inline {
     display:inline !important;
     margin: 0px 1em;

diff --git a/resources/sass/components/_text.scss b/resources/sass/components/_text.scss
@@ -51,6 +51,35 @@ div.table-wrapper {
     margin: $line-height-computed auto;
 }
 
+figure {
+    &.align-horizontally, 
+    &.float-left,
+    &.float-right {
+        text-align:center;
+    }
+}
+
+.float-left img {
+    margin: 0px 2em 1em 0px;
+    padding: .5em 1em;
+    max-width: 100%;
+}
+
+.float-right img {
+    margin: 0px 0px 1em 2em;
+    padding: .5em 1em;
+    max-width: 100%;
+}
+
+/* caption text below images */
+figcaption {
+    font-style: italic;
+    text-align: center;
+    font-size: smaller;
+    margin: auto;
+    max-width:75%;
+}
+
 /*
  * Animated highlighting, used e.g. for historic footnotes (see https://github.com/Edirom/WeGA-WebApp/issues/226)
  */