Add responsive intermediate steps

This commit is contained in:
aronmal 2023-02-12 16:03:15 +01:00
parent 41d152f0e3
commit d2594f51d5
Signed by: aronmal
GPG key ID: 816B7707426FC612

View file

@ -16,14 +16,14 @@ export default function Home() {
<BurgerMenu />
{!heWantsToPlay ? (
<>
<div className="flex h-36 w-64 items-center justify-center rounded-xl border-4 border-black bg-[#2227] lg:h-[18rem] lg:w-[32rem] lg:border-[6px] xl:h-[26rem] xl:w-[48rem]">
<div className="flex h-36 w-64 items-center justify-center rounded-xl border-4 border-black bg-[#2227] sm:h-48 sm:w-96 md:h-72 md:w-[32rem] md:border-[6px] xl:h-[26rem] xl:w-[48rem]">
<FontAwesomeIcon
className="text-6xl lg:text-8xl"
className="text-6xl sm:text-7xl md:text-8xl"
icon={faCirclePlay}
/>
</div>
<button
className="font-farro rounded-lg border-b-4 border-orange-400 bg-warn px-12 pt-5 pb-4 text-2xl font-bold duration-100 active:border-t-4 active:border-b-0 xl:rounded-2xl xl:border-b-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl xl:active:border-t-8"
className="font-farro rounded-lg border-b-4 border-orange-400 bg-warn px-12 pt-5 pb-4 text-2xl font-bold duration-100 active:border-t-4 active:border-b-0 sm:rounded-xl sm:border-b-[6px] sm:px-14 sm:pt-6 sm:pb-5 sm:text-3xl sm:active:border-t-[6px] md:rounded-2xl md:border-b-8 md:px-20 md:pt-7 md:pb-6 md:text-4xl md:active:border-t-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl"
onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)}
>
START