From aaced9d0e11185bbaebaf79cce7fd2f12608210a Mon Sep 17 00:00:00 2001
From: "Brian S. Stephan" <bss@incorporeal.org>
Date: Mon, 14 Dec 2020 16:25:35 -0600
Subject: [PATCH] add polycephaly-style figure support

this is really pushing my patience for CSS, but I've always thought this
looked nice, so I'm going to try to retain it
---
 incorporealcms/static/css/dark.css  |  9 +++++
 incorporealcms/static/css/light.css |  9 +++++
 incorporealcms/static/css/style.css | 52 +++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+)

diff --git a/incorporealcms/static/css/dark.css b/incorporealcms/static/css/dark.css
index ec3c00f..bf20437 100644
--- a/incorporealcms/static/css/dark.css
+++ b/incorporealcms/static/css/dark.css
@@ -50,3 +50,12 @@ blockquote {
     background-color: rgba(120, 120, 120, 0.3);
     border: 1px solid #222;
 }
+
+figure {
+    background: #222;
+    border: 1px solid #333;
+}
+
+figcaption {
+    color: #BBB;
+}
diff --git a/incorporealcms/static/css/light.css b/incorporealcms/static/css/light.css
index b38dd6a..c1bcad3 100644
--- a/incorporealcms/static/css/light.css
+++ b/incorporealcms/static/css/light.css
@@ -50,3 +50,12 @@ blockquote {
     background-color: rgba(120, 120, 120, 0.1);
     border: 1px solid #CCC;
 }
+
+figure {
+    background: #EFEFEF;
+    border: 1px solid #CCCCCC;
+}
+
+figcaption {
+    color: #777777;
+}
diff --git a/incorporealcms/static/css/style.css b/incorporealcms/static/css/style.css
index 850f5da..b8332d9 100644
--- a/incorporealcms/static/css/style.css
+++ b/incorporealcms/static/css/style.css
@@ -115,3 +115,55 @@ blockquote {
 .img-50 {
     max-width: 50%;
 }
+
+/* For screens with width smaller than 400px */
+.figure-left .figure-right {
+    max-width: 95%;
+    float: none;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+/* For larger screens */
+@media only screen and (min-width: 400px) {
+    .figure-left {
+        float: left;
+        margin-top: 0;
+        margin-left: 0;
+    }
+
+    .figure-right {
+        float: right;
+        margin-top: 0;
+        margin-right: 0;
+    }
+}
+
+figure {
+    max-width: 400px;
+    padding: 5px;
+    margin: 10px;
+    margin-top: 0;
+    margin-bottom: 5px;
+}
+
+figure img {
+    max-width: 100%;
+    height: auto;
+}
+
+figcaption {
+    font-family: "Times New Roman", serif;
+    color: #777777;
+    text-align: center;
+    font-style: italic;
+    line-height: 1.3em;
+    margin-top: 5px;
+}
+
+.thumbnail-image {
+    width: 150px;
+    height: auto;
+    margin: 5px;
+    display: inline;
+}