Improve left/right/center image positions in rich text (#638)

Adds a bit of custom CSS to better align images in rich text in a way
that looks more natural/expected.
* Left and right images are capped at 40% width. This looks a bit more
natural, as large images could potentially fill the full width and don't
look left/right aligned.
* "Full width" image is not forced to 100%. Small images or icons look
too big and blurry. This is a bit more natural. Additionally, small
images which do not fill 100% are block positioned and centered.
* Headings in the rich text field will clear left/right floating
alignment. This looks a bit more natural and is an expected break after
an image.

coderedcms/static/coderedcms/css/crx-front.css

@@ -314,16 +314,29 @@ License: https://github.com/coderedcorp/coderedcms/blob/main/LICENSE
 .richtext-image.left {
   float: left;
   margin: 0 1em 1em 0;
+  max-width: 40%;
+  width: auto;
+  height: auto;
 }
 
 .richtext-image.right {
   float: right;
   margin: 0 0 1em 1em;
+  max-width: 40%;
+  width: auto;
+  height: auto;
 }
 
 .richtext-image.full-width {
-  width: 100%;
+  max-width: 100%;
+  width: auto;
   height: auto;
+  display: block;
+  margin: 1em auto;
+}
+
+h2[data-block-key], h3[data-block-key], h4[data-block-key], h5[data-block-key], h6[data-block-key] {
+  clear: both;
 }
 
-/*# sourceMappingURL=crx-front.css.map */
+/*# sourceMappingURL=crx-front.css.map */

coderedcms/static/coderedcms/scss/_crx-richtext.scss

@@ -4,15 +4,31 @@
   &.left {
     float: left;
     margin: 0 1em 1em 0;
+    max-width: 40%;
+    width: auto;
+    height: auto;
   }
 
   &.right {
     float: right;
     margin: 0 0 1em 1em;
+    max-width: 40%;
+    width: auto;
+    height: auto;
   }
 
   &.full-width {
-    width: 100%;
+    max-width: 100%;
+    width: auto;
     height: auto;
+    display: block;
+    margin: 1em auto;
+  }
+}
+
+// Headings after a floating image should break onto a new line.
+h2, h3, h4, h5, h6 {
+  &[data-block-key] {
+    clear: both;
   }
 }