diff --git a/www/src/components/footer/footer.astro b/www/src/components/footer/footer.astro index f750105f98..1c5983a150 100644 --- a/www/src/components/footer/footer.astro +++ b/www/src/components/footer/footer.astro @@ -7,9 +7,7 @@ export interface Props { const { path, isBlog } = Astro.props; --- -<footer - class="transition-colors mt-auto pb-8 pt-8 flex flex-col bg-transparent" -> +<footer class="transition-colors mt-auto flex flex-col bg-transparent"> {isBlog && <AvatarList path={path} />} <div class="container px-6 mx-auto divide-gray-400 divide-opacity-50 pt-6"> <div class="flex flex-col items-center justify-between w-full"> diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro index ea0be936b7..548a268b28 100644 --- a/www/src/components/landingPage/about.astro +++ b/www/src/components/landingPage/about.astro @@ -4,22 +4,28 @@ import PageSection from "./pageSection.astro"; --- <PageSection - className="grid grid-cols-1 xl:grid-cols-2 gap-8 items-center mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 lg:grid lg:gap-x-8 xl:gap-x-12" + className="grid grid-cols-1 xl:grid-cols-2 gap-8 items-center mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8 lg:grid lg:gap-x-8 xl:gap-x-12" size={"24"} id="about" > <div class="flex flex-col gap-2 md:gap-4 max-w-[800px] xl:max-w-full mx-auto"> - <h2 class="text-t3-purple-50 font-bold text-5xl w-full mb-2"> + <h2 + class="text-t3-purple-50 font-bold text-3xl lg:text-5xl md:text-5xl w-full mb-2" + > What is this? Some kinda template? </h2> - <p class="mt-4 text-xl text-t3-purple-200 max-w-3xl mx-auto"> + <p + class="mt-4 text-base lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto" + > Kind of. We love all of the technologies that create-t3-app includes - check out <a href="https://init.tips" class="text-t3-purple-400" - >init.tips - </a> for even more info on topics such as state management and deployment - - but we do not believe these are needed on every project. + >init.tips</a + > for even more info on topics such as state management and deployment - but + we do not believe these are needed on every project. </p> - <p class="mt-4 text-xl text-t3-purple-200 max-w-3xl mx-auto"> + <p + class="mt-4 text-base lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto" + > So we made create-t3-app to do one thing: Simplify complex boilerplate around the core T3 Stack tech without compromising the pieces modularity. This is NOT an all-inclusive template and we expect you to bring your own diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro index d73617262b..a19c30da15 100644 --- a/www/src/components/landingPage/banner.astro +++ b/www/src/components/landingPage/banner.astro @@ -2,28 +2,30 @@ import Button from "./button.astro"; --- -<div class="py-4 sm:py-8 md:py-12 lg:py-14 xl:py-12 2xl:py-28"> +<div class="py-12 sm:py-8 md:py-12 lg:py-14 xl:py-12 2xl:py-28"> <div class="max-w-[800px] xl:max-w-7xl mx-auto"> <div class="lg:px-8"> <div class="flex flex-col items-center"> <div class="max-w-md px-4 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl sm:px-6 lg:px-0" > - <div class="flex flex-col items-start justify-between"> - <h1 - class="text-5xl text-center tracking-tight font-bold text-white sm:text-6xl sm:tracking-tight lg:text-[4rem] xl:text-[6rem] 2xl:text-[6.5rem] xl:tracking-tight" - > - The best way to setup an - <span class="text-[hsl(200,100%,60%)]"> opinionated,</span> - <span class="text-[hsl(240,100%,70%)] whitespace-nowrap"> - full-stack,</span + <div class="flex flex-col gap-4 w-full items-center"> + <div class="flex flex-col items-start justify-between"> + <h1 + class="text-4xl text-center tracking-tight font-bold text-white sm:text-6xl sm:tracking-tight lg:text-[4rem] xl:text-[6rem] 2xl:text-[6.5rem] xl:tracking-tight" > - <span class="text-[hsl(280,100%,60%)]"> typesafe</span> - Next.js project - </h1> + The best way to setup an + <span class="text-[hsl(200,100%,60%)]"> opinionated,</span> + <span class="text-[hsl(240,100%,70%)] whitespace-nowrap"> + full-stack,</span + > + <span class="text-[hsl(280,100%,60%)]"> typesafe</span> + Next.js project + </h1> - <div class="flex flex-col mt-8 w-full items-center"> - <div class="flex justify-center w-full gap-4 max-w-xs"> + <div + class="flex justify-center items-center w-full gap-4 xl:mt-8 mt-4" + > <Button href="/en/introduction" openInNewTab={false} @@ -65,88 +67,91 @@ import Button from "./button.astro"; </svg> </Button> </div> - <div class="flex justify-center mt-4 xl:mt-8 h-full relative"> - <button - class="px-3 py-3 text-base md:text-lg md:px-3 md:py-3 lg:px-5 lg:py-4 lg:text-xl rounded-md cursor-pointer bg-white/10 hover:bg-white/20 transition-all duration-300 relative flex flex-row items-center gap-2 border border-t3-purple-200/20 hover:border-t3-purple-300/50" - title="Copy the command to get started" - id="command" - > - <code id="command-text">npx create-t3-app@latest</code> - <svg - id="copy-icon" - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - ><rect x="9" y="9" width="13" height="13" rx="2" ry="2" - ></rect><path - d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" - ></path> - </svg> - <svg - id="check-icon" - class="hidden" - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - ><polyline points="20 6 9 17 4 12"></polyline> - </svg> - </button> + + <div class="flex flex-col w-full items-center"> + <div class="flex mt-4 xl:mt-8 h-full relative"> + <button + class="px-2 py-2 text-sm md:text-lg md:px-3 md:py-3 lg:px-5 lg:py-4 lg:text-xl rounded-md cursor-pointer bg-t3-purple-100/10 hover:bg-t3-purple-100/20 transition-all duration-300 relative flex flex-row items-center gap-2 border border-t3-purple-200/20 hover:border-t3-purple-300/50" + title="Copy the command to get started" + id="command" + > + <code id="command-text">npx create-t3-app@latest</code> + <svg + id="copy-icon" + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + ><rect x="9" y="9" width="13" height="13" rx="2" ry="2" + ></rect><path + d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" + ></path> + </svg> + <svg + id="check-icon" + class="hidden" + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + ><polyline points="20 6 9 17 4 12"></polyline> + </svg> + </button> + </div> </div> </div> </div> </div> </div> </div> - </div> - <script is:inline> - const command = document.querySelector("#command"); - const commandText = document.querySelector("#command-text"); - const copyIcon = document.querySelector("#copy-icon"); - const checkIcon = document.querySelector("#check-icon"); - let cooldown = false; - - function toggleIcons() { - copyIcon.classList.toggle("hidden"); - checkIcon.classList.toggle("hidden"); - } + <script is:inline> + const command = document.querySelector("#command"); + const commandText = document.querySelector("#command-text"); + const copyIcon = document.querySelector("#copy-icon"); + const checkIcon = document.querySelector("#check-icon"); + let cooldown = false; - command.addEventListener("click", () => { - if (cooldown === false) { - cooldown = true; - navigator.clipboard.writeText(commandText.innerText); - toggleIcons(); + function toggleIcons() { + copyIcon.classList.toggle("hidden"); + checkIcon.classList.toggle("hidden"); + } - setTimeout(() => { + command.addEventListener("click", () => { + if (cooldown === false) { + cooldown = true; + navigator.clipboard.writeText(commandText.innerText); toggleIcons(); - cooldown = false; - }, 2000); - } - }); - </script> -</div> -<style> - #check-icon { - stroke-dasharray: 450; - stroke-dashoffset: -30; - animation: draw 2s linear normal; - } + setTimeout(() => { + toggleIcons(); + cooldown = false; + }, 2000); + } + }); + </script> + </div> + + <style> + #check-icon { + stroke-dasharray: 450; + stroke-dashoffset: -30; + animation: draw 2s linear normal; + } - @keyframes draw { - to { - stroke-dashoffset: 200; + @keyframes draw { + to { + stroke-dashoffset: 200; + } } - } -</style> + </style> +</div> diff --git a/www/src/components/landingPage/button.astro b/www/src/components/landingPage/button.astro index f2c250a13b..6c07689fd4 100644 --- a/www/src/components/landingPage/button.astro +++ b/www/src/components/landingPage/button.astro @@ -33,7 +33,7 @@ const specialHoverClass = specialHover href={href} target={openInNewTab ? "_blank" : "_self"} rel="noopener noreferrer" - class={`${specialHoverClass} ${roundedClass} ${variantClass} ${className} inline-flex items-center px-4 md:px-5 py-3 text-sm md:text-base font-semibold cursor-pointer hover:no-underline transition-all`} + class={`${specialHoverClass} ${roundedClass} ${variantClass} ${className} inline-flex items-center px-3 lg:px-4 lg:py-3 md:px-5 py-2 text-sm md:text-base font-semibold cursor-pointer hover:no-underline transition-all`} > <slot /> </a> diff --git a/www/src/components/landingPage/community/community.astro b/www/src/components/landingPage/community/community.astro index b43592de42..0ea528922b 100644 --- a/www/src/components/landingPage/community/community.astro +++ b/www/src/components/landingPage/community/community.astro @@ -10,10 +10,14 @@ export interface Props {} <div class="flex flex-col items-center justify-center max-w-7xl text-t3-purple-100 mx-auto px-4 sm:px-6 lg:px-8" > - <h3 class="mt-2 text-5xl tracking-tight font-bold text-t3-purple-50"> + <h3 + class="w-full mt-2 text-3xl lg:text-5xl md:text-5xl text-left lg:text-center md:text-center tracking-tight font-bold text-t3-purple-50" + > Community </h3> - <p class="mt-4 text-xl text-t3-purple-200 mb-10 max-w-3xl text-center"> + <p + class="mt-4 lg:text-center md:text-center text-base lg:text-xl md:text-xl text-t3-purple-200 mb-10 max-w-3xl" + > Join our community to get help, share your projects, and even contribute to the project! </p> diff --git a/www/src/components/landingPage/community/communityCard.astro b/www/src/components/landingPage/community/communityCard.astro index 4a6c88d642..60ef4003a0 100644 --- a/www/src/components/landingPage/community/communityCard.astro +++ b/www/src/components/landingPage/community/communityCard.astro @@ -12,7 +12,7 @@ const { text, title, href } = Astro.props; href={href} target="_blank" rel="noopener noreferrer" - class="rounded-lg hover:bg-white/20 bg-white/10 transition-colors cursor-pointer w-full sm:h-64 hover:no-underline border border-t3-purple-200/20 hover:border-t3-purple-300/50" + class="rounded-lg hover:bg-t3-purple-200/20 bg-t3-purple-200/10 transition-colors cursor-pointer w-full sm:h-64 hover:no-underline border border-t3-purple-200/20 hover:border-t3-purple-300/50" > <div class="p-4 sm:p-2 md:p-4 flex flex-col items-center justify-center space-y-3 h-full" diff --git a/www/src/components/landingPage/stack/stack.astro b/www/src/components/landingPage/stack/stack.astro index 6d674aa6d0..de7bd43d82 100644 --- a/www/src/components/landingPage/stack/stack.astro +++ b/www/src/components/landingPage/stack/stack.astro @@ -5,16 +5,22 @@ import Feature from "./card.astro"; --- <PageSection size={"24"} id="stack"> - <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-t3-purple-100"> - <div class="text-center mb-10"> - <h2 class="text-2xl font-semibold text-t3-purple-200"> + <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 text-t3-purple-100"> + <div class="lg:text-center md:text-center mb-10"> + <h2 + class="text-xl lg:text-2xl md:text-2xl font-semibold text-t3-purple-200" + > Libraries that work </h2> - <h3 class="mt-2 text-5xl tracking-tight font-bold text-t3-purple-50"> + <h3 + class="mt-2 text-3xl lg:text-5xl md:text-5xl tracking-tight font-bold text-t3-purple-50" + > Without the complex setup </h3> - <p class="mt-4 text-xl text-t3-purple-200 max-w-[40ch] mx-auto"> + <p + class="mt-4 text-base lg:text-lg md:text-lg text-t3-purple-200 max-w-[40ch] mx-auto" + > create-t3-app gives you the option to install libraries that you need without the hassle of scaffolding it all yourself. </p> diff --git a/www/src/components/landingPage/tweets/tweets.astro b/www/src/components/landingPage/tweets/tweets.astro index 68d64f0409..6b6d9064d6 100644 --- a/www/src/components/landingPage/tweets/tweets.astro +++ b/www/src/components/landingPage/tweets/tweets.astro @@ -64,19 +64,25 @@ if (import.meta.env.MODE === "CI" || !token) { <PageSection size={"24"} - className="grid grid-cols-1 md:grid-cols-2 max-w-7xl mx-auto gap-4 md:gap-10 px-4 sm:px-6 lg:px-8" + className="grid grid-cols-1 md:grid-cols-2 max-w-7xl mx-auto gap-4 md:gap-10 px-4 pb-12 sm:px-6 lg:px-8" id="love" > <div class="flex flex-col items-start text-left order-first md:order-last mb-10" > - <h2 class="text-2xl font-semibold text-t3-purple-200"> + <h2 + class="text-xl lg:text-2xl md:text-2xl font-semibold text-t3-purple-200" + > Loved by the community </h2> - <h3 class="mt-2 text-5xl tracking-tight font-bold text-t3-purple-50"> + <h3 + class="mt-2 text-3xl lg:text-5xl md:text-5xl tracking-tight font-bold text-t3-purple-50" + > What others have to say about create-t3-app </h3> - <p class="mt-4 text-xl text-t3-purple-200 max-w-3xl"> + <p + class="mt-4 text-base lg:text-lg md:text-lg text-t3-purple-200 max-w-3xl" + > Want to be listed here? Mention <a href="twitter.com" rel="noopener noreferrer" diff --git a/www/src/components/navigation/Search.tsx b/www/src/components/navigation/Search.tsx index c2131a6d4a..e73d2ba84e 100644 --- a/www/src/components/navigation/Search.tsx +++ b/www/src/components/navigation/Search.tsx @@ -55,9 +55,9 @@ export default function Search({ isLanding }: { isLanding: boolean }) { className={clsx( "transition-500 flex w-full cursor-text items-center justify-between rounded-lg px-4 py-2 text-sm font-medium transition-all", { - "border border-t3-purple-200/20 bg-white/10 hover:border-t3-purple-300/50 hover:bg-white/20": + "hover:bg-t3-purple/20 border border-t3-purple-200/20 bg-t3-purple-200/10 duration-300 hover:border-t3-purple-200/50": isLanding, - "bg-t3-purple-200/50 hover:bg-t3-purple-200/75 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-800": + "dark:hover:bg-t3-purple/20 border bg-t3-purple-200/50 duration-300 hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:text-slate-100 dark:hover:border-t3-purple-200/50": !isLanding, }, )} diff --git a/www/src/components/navigation/leftSidebar.astro b/www/src/components/navigation/leftSidebar.astro index 161285faab..e609e71f90 100644 --- a/www/src/components/navigation/leftSidebar.astro +++ b/www/src/components/navigation/leftSidebar.astro @@ -18,7 +18,7 @@ const sidebar = SIDEBAR[langCode]; aria-labelledby="grid-left" class="flex flex-col gap-4 pb-4 pt-6 md:pt-0 w-full md:w-auto max-h-full overflow-y-hidden hover:overflow-y-auto fixed top-20 bottom-0" > - <div class="w-full mx-auto p6-4 md:px-8 md:hidden"> + <div class="w-full mx-auto px-6 md:px-8 md:hidden"> <Search isLanding={isLanding} client:idle /> </div> <div class="t3-scrollbar"> diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro index 5568d008c0..05c989d940 100644 --- a/www/src/components/navigation/navbar.astro +++ b/www/src/components/navigation/navbar.astro @@ -34,7 +34,7 @@ const navbarLinks: Array<{ href: string; label: string }> = [ })} aria-label="Global" > - <div class="flex items-center justify-between w-full px-10"> + <div class="flex items-center justify-between w-full px-4 lg:px-10 md:px-10"> <div class="flex justify-between items-center w-full md:w-auto"> <div> <a href="/"> @@ -47,15 +47,18 @@ const navbarLinks: Array<{ href: string; label: string }> = [ /> </a> </div> - <div class="hidden -space-x-1 md:flex md:ml-10"> + <div class="hidden -space-x-1 md:flex md:ml-10 gap-2"> { navbarLinks.map((navbarLink) => ( <a class={clsx( "relative inline-flex items-center rounded-md border border-transparent px-3 py-2 transition-colors hover:no-underline", { - "text-t3-purple-100 hover:text-t3-purple-300": isLanding, - "text-t3-purple-500 hover:text-t3-purple-400 dark:text-t3-purple-100": + "bg-t3-purple-200/10 text-t3-purple-300": + navbarLink.href === currentPage, + "rounded-lg text-t3-purple-100 hover:bg-t3-purple-200/10 hover:text-t3-purple-300": + isLanding, + "rounded-lg text-t3-purple-500 hover:bg-t3-purple-200/30 hover:text-t3-purple-400 dark:text-t3-purple-100 dark:hover:bg-t3-purple-200/10 dark:hover:text-t3-purple-300": !isLanding, }, )} diff --git a/www/src/components/navigation/sidebarToggle.astro b/www/src/components/navigation/sidebarToggle.astro index 4001f38be8..cfc45aaeee 100644 --- a/www/src/components/navigation/sidebarToggle.astro +++ b/www/src/components/navigation/sidebarToggle.astro @@ -39,5 +39,9 @@ const isLanding = currentPage === "/"; button.addEventListener("click", () => { body.classList.toggle("mobile-sidebar-toggle"); button.toggleAttribute("aria-pressed"); + button.innerHTML = + button.getAttribute("aria-pressed") === null + ? `<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 stroke-current fill-transparent" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg><span class="sr-only">Close sidebar</span>` + : `<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 stroke-current fill-transparent" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg><span class="sr-only">Toggle sidebar</span>`; }); </script> diff --git a/www/src/components/navigation/themeToggleButton.astro b/www/src/components/navigation/themeToggleButton.astro index 50cf1d1cfc..320bf46718 100644 --- a/www/src/components/navigation/themeToggleButton.astro +++ b/www/src/components/navigation/themeToggleButton.astro @@ -1,5 +1,5 @@ <div - class="flex bg-t3-purple-200/50 dark:bg-slate-700 p-2 w-fit mx-auto rounded-lg gap-3" + class="flex bg-t3-purple-200/50 dark:bg-t3-purple-200/10 border dark:border-t3-purple-200/20 dark:hover:border-t3-purple-200/50 duration-300 p-2 w-fit mx-auto rounded-lg gap-3" > <label class="cursor-pointer text-t3-purple-500 dark:text-slate-50"> <!-- Sun --> @@ -72,8 +72,8 @@ const toggleTheme = (t) => { localStorage.setItem("theme", t); - html.classList.toggle("light"); - html.classList.toggle("dark"); + html.classList.add(t === "dark" ? "dark" : "light"); + html.classList.remove(t === "dark" ? "light" : "dark"); }; lightToggle.addEventListener("change", () => toggleTheme("light")); diff --git a/www/src/styles/global.css b/www/src/styles/global.css index a6375d31d7..05e6cec9e5 100644 --- a/www/src/styles/global.css +++ b/www/src/styles/global.css @@ -39,10 +39,11 @@ html { scroll-padding-top: 7rem; scroll-behavior: smooth; + @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-t3-purple-300 dark:scrollbar-track-transparent dark:scrollbar-thumb-t3-purple-300 ; } .t3-scrollbar { - @apply scrollbar-thin scrollbar-track-slate-300 scrollbar-thumb-t3-purple-300 scrollbar-track-rounded-sm scrollbar-thumb-rounded-sm dark:scrollbar-track-slate-600 dark:scrollbar-thumb-t3-purple-50; + @apply scrollbar-thin scrollbar-track-slate-300 scrollbar-thumb-t3-purple-300 dark:scrollbar-track-t3-purple-200/10 dark:scrollbar-thumb-t3-purple-300; } /* Typewriter */