From f988bf708e1f85e1597edab30c1a6d4b0868a5b1 Mon Sep 17 00:00:00 2001
From: itzmeowww <winthanasan@gmail.com>
Date: Thu, 17 Mar 2022 23:50:01 +0700
Subject: [PATCH] Fix YouTube and  text overflow on mobile

---
 web/src/components/youtube.svelte | 40 +++++++++++++++++++++++--------
 web/src/routes/index.svelte       |  2 +-
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/web/src/components/youtube.svelte b/web/src/components/youtube.svelte
index 6dc12e8..817e8cb 100644
--- a/web/src/components/youtube.svelte
+++ b/web/src/components/youtube.svelte
@@ -2,13 +2,33 @@
   export let src: string;
 </script>
 
-<iframe
-  class="mx-auto"
-  width="640"
-  height="360"
-  {src}
-  title="YouTube video player"
-  frameborder="0"
-  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-/>
+<div class="container mx-auto">
+  <iframe
+    class="mx-auto responsive-iframe"
+    {src}
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen
+  />
+</div>
+
+<style lang="css">
+  .container {
+    max-width: 640px;
+    max-height: 360px;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 56.25%;
+  }
+  .responsive-iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/web/src/routes/index.svelte b/web/src/routes/index.svelte
index 837c907..5e179e2 100644
--- a/web/src/routes/index.svelte
+++ b/web/src/routes/index.svelte
@@ -119,7 +119,7 @@
 
   <div class="t-40" />
 
-  <h1>Introducing...</h1>
+  <h1 class="text-5xl sm:text-6xl">Introducing...</h1>
   <div class="t-5" />
   <h2>You are a Failure!</h2>
   <div class="t-10" />