From 542c44642f2115f5d3c843936c376f5cb6d92cb1 Mon Sep 17 00:00:00 2001
From: Ze Bateira <jose.bateira@protonmail.com>
Date: Thu, 15 Apr 2021 11:56:50 +0100
Subject: [PATCH 1/3] fix: use aspect ratio to correctly size iframes

---
 src/.vuepress/theme/layouts/BlogPost.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/.vuepress/theme/layouts/BlogPost.vue b/src/.vuepress/theme/layouts/BlogPost.vue
index 8c954a05..d2fc876e 100644
--- a/src/.vuepress/theme/layouts/BlogPost.vue
+++ b/src/.vuepress/theme/layouts/BlogPost.vue
@@ -76,4 +76,18 @@ export default {
   padding-bottom: 0.5rem;
   border-bottom: 2px solid #d1d1d663;
 }
+
+.blog > iframe {
+  @apply mx-auto;
+  @apply max-w-full;
+  height: auto;
+  aspect-ratio: 16 / 9;
+}
+
+@supports not (aspect-ratio: 1 / 1) {
+  .blog > iframe {
+    @apply h-52;
+    @apply sm:h-80;
+  }
+}
 </style>

From 9bc7b75c8276a83324e5ef299985d713ce208a29 Mon Sep 17 00:00:00 2001
From: Ze Bateira <jose.bateira@protonmail.com>
Date: Fri, 16 Apr 2021 14:56:50 +0100
Subject: [PATCH 2/3] fix: do not target other iframes besides video embeds

---
 src/.vuepress/theme/layouts/BlogPost.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/.vuepress/theme/layouts/BlogPost.vue b/src/.vuepress/theme/layouts/BlogPost.vue
index d2fc876e..d2b5a6c9 100644
--- a/src/.vuepress/theme/layouts/BlogPost.vue
+++ b/src/.vuepress/theme/layouts/BlogPost.vue
@@ -79,13 +79,18 @@ export default {
 
 .blog > iframe {
   @apply mx-auto;
+}
+
+.blog > iframe[src*='youtube'],
+.blog > iframe[src*='vimeo'] {
   @apply max-w-full;
   height: auto;
   aspect-ratio: 16 / 9;
 }
 
 @supports not (aspect-ratio: 1 / 1) {
-  .blog > iframe {
+  .blog > iframe[src*='youtube'],
+  .blog > iframe[src*='vimeo'] {
     @apply h-52;
     @apply sm:h-80;
   }

From edca539b87fadd4cc99d0bd3995821a60c5e1c05 Mon Sep 17 00:00:00 2001
From: Ze Bateira <jose.bateira@protonmail.com>
Date: Fri, 16 Apr 2021 15:07:14 +0100
Subject: [PATCH 3/3] fix: allow scroll on code blocks to avoid text wrap

---
 src/.vuepress/theme/styles/index.css | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/.vuepress/theme/styles/index.css b/src/.vuepress/theme/styles/index.css
index 157f6989..4110d612 100644
--- a/src/.vuepress/theme/styles/index.css
+++ b/src/.vuepress/theme/styles/index.css
@@ -9,16 +9,7 @@ pre {
   padding: 1.25rem 1.5rem;
   background-color: #0e2333;
   border-radius: 6px;
-}
-
-pre > code {
-  padding: 0;
-  background-color: transparent;
-  border-radius: 0;
-  color: #fff;
-  font-size: 0.85em;
-  white-space: pre-wrap;
-  word-break: break-all;
+  overflow-x: auto;
 }
 
 code {
@@ -28,4 +19,16 @@ code {
   border-radius: 3px;
   color: rgba(51, 51, 51, 0.8);
   font-size: 0.85em;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+pre > code {
+  padding: 0;
+  background-color: transparent;
+  border-radius: 0;
+  color: #fff;
+  font-size: 0.85em;
+  white-space: unset;
+  word-break: unset;
 }