restyle figures and captions for more flexibility

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 {

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;
+}

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;
+}