Remove legacy rich text image styles

The `<div class="rich-text">` wrapper around rich text was disabled by default in Wagtail 2.10 (https://docs.wagtail.io/en/stable/releases/2.10.html#div-class-rich-text-wrappers-removed-from-rich-text) and we'd prefer not to enable the legacy handler, to encourage Wagtail developers to follow current best practice.

There is already a `width: 100%` rule in place for all img elements, and since an image with `width: 100%` but no `height: auto` would render with the wrong aspect ratio, it's reasonable to assume that no images on the site rely on `height: auto` being absent. Adding this to the `img` rule therefore makes the `rich-text` rule redundant.

The `width: 100%` also meant that the left/right-alignment options for rich text images had no effect - we add a `width: 50%` to those to make them meaningful again.

Finally, the responsive-object wrapper for media embeds was dropped in 2.9, so those rules are unused since then. Anyone who feels strongly about restoring responsive embeds is welcome to contribute a PR :-)

bakerydemo/settings/base.py

@@ -37,7 +37,6 @@ INSTALLED_APPS = [
     'bakerydemo.locations',
     'bakerydemo.search',
 
-    'wagtail.contrib.legacy.richtext',
     'wagtail.contrib.search_promotions',
     'wagtail.contrib.forms',
     'wagtail.contrib.redirects',

bakerydemo/static/css/main.css

@@ -160,6 +160,7 @@ figcaption {
 img {
   display: block;
   width: 100%;
+  height: auto;
 }
 figure img {
   display: block;
@@ -1054,26 +1055,11 @@ span.outline {
 }
 
 /* From Wagtail core */
-/* Responsive image/video classes */
-.rich-text img {
-    max-width: 100%;
-    height: auto;
-}
 .richtext-image.left{
     float:left;
+    width: 50%;
 }
 .richtext-image.right{
     float:right;
-}
-.responsive-object {
-    position: relative;
-}
-.responsive-object iframe,
-.responsive-object object,
-.responsive-object embed {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    width: 50%;
 }