diff options
| -rw-r--r-- | src/components/HomepageFeatures/index.tsx | 4 | ||||
| -rw-r--r-- | src/pages/index.tsx | 22 | ||||
| -rw-r--r-- | 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, |