From 0a2b481b156b616b0d82bd32e73308d17a3a975d Mon Sep 17 00:00:00 2001
From: Nikita Tchayka <nikitatchayka@gmail.com>
Date: Fri, 15 Sep 2023 20:16:03 +0100
Subject: Fix stuff

---
 src/components/HomepageFeatures/index.tsx |  4 ++--
 src/pages/index.tsx                       | 22 +++++++++++-----------
 tailwind.config.js                        |  3 +++
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index f4471f3..753e895 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -127,11 +127,11 @@ export default function HomepageFeatures(): JSX.Element {
             {/* horrible hack to hide the vertical bar */}
             <span className="absolute w-full h-full py-36 bg-lightbackground -z-20" />
             <img
-              className="absolute sm:h-36 h-24 bottom-1/4 right-2/3 -z-10"
+              className="absolute sm:h-36 h-24 bottom-1/4 lg:right-2/3 right-3/4 -z-10"
               src="img/Star2.svg"
             />
             <img
-              className="absolute sm:h-36 h-24 top-1/4 left-2/3 -z-10 "
+              className="absolute sm:h-36 h-24 top-1/4 lg:left-2/3 left-3/4 -z-10 "
               src="img/Star1.svg"
             />
             <h1 className="text-center">
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 60e7a7d..5106ee9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -49,18 +49,18 @@ function HomepageHeader() {
           </p>
         </Frame>
       </div>
-      <div className="width-full my-20">
-        <iframe
-          className="mx-auto"
-          width="560"
-          height="315"
-          src="https://www.youtube.com/embed/VM-2OVNt-eQ?si=A7JKcVobgEpi1fvt"
-          title="YouTube video player"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          allowFullScreen
-        />
+      <div className="mx-auto mt-24 width-full max-w-6xl">
+        <div className="relative overflow-hidden h-0 pb-16-9">
+          <iframe
+            className="absolute top-0 left-0 w-full h-full max-w-full"
+            src="https://www.youtube.com/embed/VM-2OVNt-eQ?si=A7JKcVobgEpi1fvt"
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+          />
+        </div>
       </div>
-      <div className="relative text-center mx-auto my-24">
+      <div className="relative text-center mx-auto my-10">
         <Link to="/docs/intro">
           <Button color="yellow" rounded="full" size="lg">
             <h2 className="mx-4 my-2 text-2xl">Read the Dogma</h2>
diff --git a/tailwind.config.js b/tailwind.config.js
index b0639a8..77f5ee7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -58,6 +58,9 @@ module.exports = {
       zIndex: {
         999: 999,
       },
+      padding: {
+        "16-9": "56.25%",
+      },
       colors: {
         codeBg: "#2D2A55",
         ...light,
-- 
cgit