From 9ce8e9a1cc5b0fce763b14468db670ca34e1b389 Mon Sep 17 00:00:00 2001
From: "Brian S. Stephan" <bss@incorporeal.org>
Date: Thu, 14 Apr 2022 06:05:29 -0500
Subject: [PATCH] restyle figures and captions for more flexibility

---
 incorporealcms/static/css/base.css  | 26 ++++++++++++++++++--------
 incorporealcms/static/css/dark.css  |  9 +++++++++
 incorporealcms/static/css/light.css |  9 +++++++++
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/incorporealcms/static/css/base.css b/incorporealcms/static/css/base.css
index f772e37..69811cb 100644
--- a/incorporealcms/static/css/base.css
+++ b/incorporealcms/static/css/base.css
@@ -140,11 +140,25 @@ img {
 }
 
 figure {
-    max-width: 400px;
     padding: 5px;
-    margin: 10px;
-    margin-top: 0;
+    margin: 0;
     margin-bottom: 5px;
+    text-align: center;
+    max-width: 30%;
+    min-width: 10em;
+    display: inline-block;
+}
+
+figure.right {
+    float: right;
+    margin-left: 10px;
+    display: block;
+}
+
+figure.left {
+    float: left;
+    margin-right: 10px;
+    display: block;
 }
 
 figure img {
@@ -153,12 +167,8 @@ figure img {
 }
 
 figcaption {
-    font-family: "Times New Roman", serif;
-    color: #777777;
     text-align: center;
-    font-style: italic;
-    line-height: 1.3em;
-    margin-top: 5px;
+    font-size: 0.9em;
 }
 
 .footnote {
diff --git a/incorporealcms/static/css/dark.css b/incorporealcms/static/css/dark.css
index 1985482..554a808 100644
--- a/incorporealcms/static/css/dark.css
+++ b/incorporealcms/static/css/dark.css
@@ -62,3 +62,12 @@ blockquote {
     background-color: rgba(255, 255, 255, 0.1);
     border: 1px solid #333;
 }
+
+figure {
+    background-color: rgba(255, 255, 255, 0.1);
+    border: 1px solid #333;
+}
+
+figcaption {
+    color: #AAAAAA;
+}
diff --git a/incorporealcms/static/css/light.css b/incorporealcms/static/css/light.css
index 7aad7bf..3468df6 100644
--- a/incorporealcms/static/css/light.css
+++ b/incorporealcms/static/css/light.css
@@ -62,3 +62,12 @@ blockquote {
     background-color: rgba(0, 0, 0, 0.1);
     border: 1px solid #CCC;
 }
+
+figure {
+    background-color: rgba(0, 0, 0, 0.1);
+    border: 1px solid #CCC;
+}
+
+figcaption {
+    color: #666666;
+}