From e6c854612904cc857862be965bad8d6008129e85 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Tue, 28 Jun 2022 21:59:38 +0100
Subject: [PATCH] Constrain images to 16:9

---
 static/src/scss/_blocks.scss                  | 23 +++++++++++++++----
 static/src/scss/_variables.scss               |  2 +-
 .../common/blocks/image-caption.html          |  4 +++-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/static/src/scss/_blocks.scss b/static/src/scss/_blocks.scss
index 611737b..eafc923 100644
--- a/static/src/scss/_blocks.scss
+++ b/static/src/scss/_blocks.scss
@@ -1,17 +1,30 @@
+@mixin center-block {
+  width: $embed-width;
+  margin: 0 auto;
+
+  max-width: $embed-width;
+  min-width: $embed-width;
+}
+
 div.block-image {
   figcaption {
     font-size: 85%;
+    margin-top: 5px;
+  }
+
+  figure {
+    @include center-block;
   }
 }
 
-.content > div:not(:last-child) {
-  margin-bottom: $content-block-margin-bottom;
+.content > div[class^="block-"] {
+  &:not(:last-child) {
+    margin-bottom: $content-block-margin-bottom;
+  }
 }
 
 div.block-embed {
   lite-youtube {
-    max-width: $embed_width;
-    min-width: $embed_width;
-    margin: 0 auto;
+    @include center-block;
   }
 }
diff --git a/static/src/scss/_variables.scss b/static/src/scss/_variables.scss
index 667c787..30436be 100644
--- a/static/src/scss/_variables.scss
+++ b/static/src/scss/_variables.scss
@@ -1 +1 @@
-$embed_width: 85%;
+$embed-width: 85%;
diff --git a/website/common/templates/common/blocks/image-caption.html b/website/common/templates/common/blocks/image-caption.html
index f0713d6..b547cb6 100644
--- a/website/common/templates/common/blocks/image-caption.html
+++ b/website/common/templates/common/blocks/image-caption.html
@@ -1,7 +1,9 @@
 {% load wagtailimages_tags wagtailcore_tags %}
 
 <figure>
-  <img src="{% image_url value.image 'width-1500' %}" alt="" />
+  <div class="image is-16by9">
+    <img src="{% image_url value.image 'width-1500' %}" alt="" />
+  </div>
   <figcaption>
     {{ value.caption|richtext }}
   </figcaption>