From a0ddf1c4349726d5dea63f771e81830d95864802 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Tue, 28 Jun 2022 22:14:23 +0100
Subject: [PATCH] Show embedded blocks full width on mobile

---
 static/src/scss/_blocks.scss    | 16 +++++++++++-----
 static/src/scss/_variables.scss |  1 -
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/static/src/scss/_blocks.scss b/static/src/scss/_blocks.scss
index eafc923..8e6b0cb 100644
--- a/static/src/scss/_blocks.scss
+++ b/static/src/scss/_blocks.scss
@@ -1,9 +1,15 @@
-@mixin center-block {
-  width: $embed-width;
+@mixin center-block($width: 85%, $mobile-width: 90%) {
+  width: $width;
   margin: 0 auto;
 
-  max-width: $embed-width;
-  min-width: $embed-width;
+  max-width: $width;
+  min-width: $width;
+
+  @include touch {
+    max-width: $mobile-width;
+    min-width: $mobile-width;
+    width: $mobile-width;
+  }
 }
 
 div.block-image {
@@ -25,6 +31,6 @@ div.block-image {
 
 div.block-embed {
   lite-youtube {
-    @include center-block;
+    @include center-block(50%);
   }
 }
diff --git a/static/src/scss/_variables.scss b/static/src/scss/_variables.scss
index 30436be..e69de29 100644
--- a/static/src/scss/_variables.scss
+++ b/static/src/scss/_variables.scss
@@ -1 +0,0 @@
-$embed-width: 85%;