From 4a8424aded44862c6cfe1b1658b0c80f5db8b92f Mon Sep 17 00:00:00 2001 From: asrvd <asheeshh@duck.com> Date: Sun, 2 Oct 2022 20:37:45 +0530 Subject: [PATCH 1/9] refactor: nav & landing --- www/src/components/landingPage/about.astro | 16 +- www/src/components/landingPage/banner.astro | 177 +++++++++--------- .../landingPage/community/communityCard.astro | 2 +- www/src/components/navigation/Search.tsx | 4 +- .../components/navigation/leftSidebar.astro | 2 +- www/src/components/navigation/navbar.astro | 8 +- .../navigation/themeToggleButton.astro | 6 +- www/src/styles/global.css | 2 +- 8 files changed, 113 insertions(+), 104 deletions(-) diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro index ea0be936b7..b0cef9c131 100644 --- a/www/src/components/landingPage/about.astro +++ b/www/src/components/landingPage/about.astro @@ -8,18 +8,20 @@ import PageSection from "./pageSection.astro"; 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"> + <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 text-center sm:text-center lg:text-left md:text-left 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-lg 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-lg 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..07b931f760 100644 --- a/www/src/components/landingPage/banner.astro +++ b/www/src/components/landingPage/banner.astro @@ -9,21 +9,23 @@ import Button from "./button.astro"; <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-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" > - <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 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-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/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/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 89b0acbdbc..73a01c3834 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 93a2f0aa41..02576cec5a 100644 --- a/www/src/components/navigation/navbar.astro +++ b/www/src/components/navigation/navbar.astro @@ -47,15 +47,17 @@ 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 dark:text-t3-purple-100 hover:text-t3-purple-400": + "bg-t3-purple-200/10 text-t3-purple-300": navbarLink.href === currentPage, + "text-t3-purple-100 hover:text-t3-purple-300 hover:bg-t3-purple-200/10 rounded-lg": + isLanding, + "text-t3-purple-500 dark:text-t3-purple-100 dark:hover:text-t3-purple-300 hover:text-t3-purple-400 dark:hover:bg-t3-purple-200/10 hover:bg-t3-purple-200/30 rounded-lg": !isLanding, }, )} 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..ae549165f6 100644 --- a/www/src/styles/global.css +++ b/www/src/styles/global.css @@ -42,7 +42,7 @@ } .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 scrollbar-track-rounded-sm scrollbar-thumb-rounded-sm dark:scrollbar-track-slate-600 dark:scrollbar-thumb-t3-purple-200; } /* Typewriter */ From 9c4c77dfc9478440a23c4e5c80227793072abe4a Mon Sep 17 00:00:00 2001 From: asrvd <asheeshh@duck.com> Date: Sun, 2 Oct 2022 20:47:40 +0530 Subject: [PATCH 2/9] fix: format again --- www/src/components/landingPage/about.astro | 16 ++++++++++------ www/src/components/navigation/navbar.astro | 3 ++- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro index b0cef9c131..2d32cc6dfb 100644 --- a/www/src/components/landingPage/about.astro +++ b/www/src/components/landingPage/about.astro @@ -8,20 +8,24 @@ import PageSection from "./pageSection.astro"; 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 text-center sm:text-center lg:text-left md:text-left font-bold text-3xl lg:text-5xl md:text-5xl w-full mb-2"> + <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 text-center sm:text-center lg:text-left md:text-left 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-lg lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto"> + <p + class="mt-4 text-lg 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. </p> - <p class="mt-4 text-lg lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto"> + <p + class="mt-4 text-lg 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/navigation/navbar.astro b/www/src/components/navigation/navbar.astro index 02576cec5a..bf8fa5866b 100644 --- a/www/src/components/navigation/navbar.astro +++ b/www/src/components/navigation/navbar.astro @@ -54,7 +54,8 @@ const navbarLinks: Array<{ href: string; label: string }> = [ class={clsx( "relative inline-flex items-center rounded-md border border-transparent px-3 py-2 transition-colors hover:no-underline", { - "bg-t3-purple-200/10 text-t3-purple-300": navbarLink.href === currentPage, + "bg-t3-purple-200/10 text-t3-purple-300": + navbarLink.href === currentPage, "text-t3-purple-100 hover:text-t3-purple-300 hover:bg-t3-purple-200/10 rounded-lg": isLanding, "text-t3-purple-500 dark:text-t3-purple-100 dark:hover:text-t3-purple-300 hover:text-t3-purple-400 dark:hover:bg-t3-purple-200/10 hover:bg-t3-purple-200/30 rounded-lg": From 6c562374e679df179824e93102e6f83b6b4b46c8 Mon Sep 17 00:00:00 2001 From: asrvd <asheeshh@duck.com> Date: Mon, 3 Oct 2022 16:20:04 +0530 Subject: [PATCH 3/9] feat: better toggle button --- www/src/components/landingPage/about.astro | 2 +- www/src/components/landingPage/banner.astro | 4 +++- www/src/components/landingPage/community/community.astro | 4 ++-- www/src/components/landingPage/stack/stack.astro | 2 +- www/src/components/navigation/navbar.astro | 2 +- www/src/components/navigation/sidebarToggle.astro | 4 ++++ 6 files changed, 12 insertions(+), 6 deletions(-) diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro index 2d32cc6dfb..8e8d73f2d6 100644 --- a/www/src/components/landingPage/about.astro +++ b/www/src/components/landingPage/about.astro @@ -10,7 +10,7 @@ import PageSection from "./pageSection.astro"; > <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 text-center sm:text-center lg:text-left md:text-left font-bold text-3xl lg:text-5xl md:text-5xl w-full mb-2" + class="text-t3-purple-50 font-bold text-5xl w-full mb-2" > What is this? Some kinda template? </h2> diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro index 07b931f760..61d2010ac8 100644 --- a/www/src/components/landingPage/banner.astro +++ b/www/src/components/landingPage/banner.astro @@ -69,7 +69,9 @@ import Button from "./button.astro"; </div> <div class="flex flex-col w-full items-center"> - <div class="flex justify-center mt-4 xl:mt-8 h-full relative"> + <div + class="flex 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-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" diff --git a/www/src/components/landingPage/community/community.astro b/www/src/components/landingPage/community/community.astro index b43592de42..7c2e6f10c9 100644 --- a/www/src/components/landingPage/community/community.astro +++ b/www/src/components/landingPage/community/community.astro @@ -10,10 +10,10 @@ 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-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-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/stack/stack.astro b/www/src/components/landingPage/stack/stack.astro index 210cc5ba59..28d46d0e7a 100644 --- a/www/src/components/landingPage/stack/stack.astro +++ b/www/src/components/landingPage/stack/stack.astro @@ -6,7 +6,7 @@ import NextAuthIcon from "./nextauth.png"; <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"> + <div class="lg:text-center md:text-center mb-10"> <h2 class="text-2xl font-semibold text-t3-purple-200"> Libraries that work </h2> diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro index bf8fa5866b..6470f89692 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="/"> 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> From da4110d4b8f3839fb53cb59a5e576c630fefb883 Mon Sep 17 00:00:00 2001 From: asrvd <asheeshh@duck.com> Date: Mon, 3 Oct 2022 16:24:28 +0530 Subject: [PATCH 4/9] refactor: global scrollbar --- www/src/styles/global.css | 1 + 1 file changed, 1 insertion(+) diff --git a/www/src/styles/global.css b/www/src/styles/global.css index ae549165f6..d8225521d4 100644 --- a/www/src/styles/global.css +++ b/www/src/styles/global.css @@ -39,6 +39,7 @@ html { scroll-padding-top: 7rem; scroll-behavior: smooth; + @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-t3-purple-300 scrollbar-track-rounded-sm scrollbar-thumb-rounded-sm dark:scrollbar-track-transparent dark:scrollbar-thumb-t3-purple-200; } .t3-scrollbar { From a7fd53117bab1fbe42c2c7b77cc09dcb86c28aa2 Mon Sep 17 00:00:00 2001 From: asrvd <asheeshh@duck.com> Date: Mon, 3 Oct 2022 16:26:47 +0530 Subject: [PATCH 5/9] fix: forgor prettier --- www/src/components/landingPage/about.astro | 4 +--- www/src/components/landingPage/banner.astro | 4 +--- www/src/components/landingPage/community/community.astro | 8 ++++++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro index 8e8d73f2d6..0202ac33e0 100644 --- a/www/src/components/landingPage/about.astro +++ b/www/src/components/landingPage/about.astro @@ -9,9 +9,7 @@ import PageSection from "./pageSection.astro"; 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-5xl w-full mb-2"> What is this? Some kinda template? </h2> <p diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro index 61d2010ac8..0339cece2e 100644 --- a/www/src/components/landingPage/banner.astro +++ b/www/src/components/landingPage/banner.astro @@ -69,9 +69,7 @@ import Button from "./button.astro"; </div> <div class="flex flex-col w-full items-center"> - <div - class="flex mt-4 xl:mt-8 h-full relative" - > + <div class="flex 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-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" diff --git a/www/src/components/landingPage/community/community.astro b/www/src/components/landingPage/community/community.astro index 7c2e6f10c9..57baf33a54 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="w-full mt-2 text-5xl text-left lg:text-center md:text-center tracking-tight font-bold text-t3-purple-50"> + <h3 + class="w-full mt-2 text-5xl text-left lg:text-center md:text-center tracking-tight font-bold text-t3-purple-50" + > Community </h3> - <p class="mt-4 lg:text-center md:text-center text-xl text-t3-purple-200 mb-10 max-w-3xl"> + <p + class="mt-4 lg:text-center md:text-center 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> From 133829bd86a1643fd2ccce3a95056d1afe01b40a Mon Sep 17 00:00:00 2001 From: asrvd <asheeshh@duck.com> Date: Mon, 3 Oct 2022 16:45:05 +0530 Subject: [PATCH 6/9] refactor: make the scrollbar thumb colors same --- www/src/styles/global.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/src/styles/global.css b/www/src/styles/global.css index d8225521d4..b4cf395870 100644 --- a/www/src/styles/global.css +++ b/www/src/styles/global.css @@ -39,11 +39,11 @@ html { scroll-padding-top: 7rem; scroll-behavior: smooth; - @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-t3-purple-300 scrollbar-track-rounded-sm scrollbar-thumb-rounded-sm dark:scrollbar-track-transparent dark:scrollbar-thumb-t3-purple-200; + @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-t3-purple-300 scrollbar-track-rounded-sm scrollbar-thumb-rounded-sm 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-200; + @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-300; } /* Typewriter */ From 7965f94b3e62a205d41b4153c54129a025582552 Mon Sep 17 00:00:00 2001 From: asrvd <asheeshh@duck.com> Date: Mon, 3 Oct 2022 16:52:31 +0530 Subject: [PATCH 7/9] refactor: more scrollbar changes --- www/src/styles/global.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/src/styles/global.css b/www/src/styles/global.css index b4cf395870..05e6cec9e5 100644 --- a/www/src/styles/global.css +++ b/www/src/styles/global.css @@ -39,11 +39,11 @@ html { scroll-padding-top: 7rem; scroll-behavior: smooth; - @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-t3-purple-300 scrollbar-track-rounded-sm scrollbar-thumb-rounded-sm dark:scrollbar-track-transparent dark:scrollbar-thumb-t3-purple-300; + @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-300; + @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 */ From 0ed3bb1a004065274bc3109a205ccfc5257dfe81 Mon Sep 17 00:00:00 2001 From: asrvd <asheeshh@duck.com> Date: Mon, 3 Oct 2022 17:36:17 +0530 Subject: [PATCH 8/9] refactor: more refactoring --- www/src/components/footer/footer.astro | 4 +--- www/src/components/landingPage/about.astro | 10 ++++++---- www/src/components/landingPage/banner.astro | 6 +++--- www/src/components/landingPage/button.astro | 2 +- .../landingPage/community/community.astro | 4 ++-- www/src/components/landingPage/stack/stack.astro | 14 ++++++++++---- www/src/components/landingPage/tweets/tweets.astro | 14 ++++++++++---- www/src/layouts/landingPage.astro | 2 +- 8 files changed, 34 insertions(+), 22 deletions(-) diff --git a/www/src/components/footer/footer.astro b/www/src/components/footer/footer.astro index 60204abfff..cf86442992 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-16 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 space-y-3 divide-y divide-gray-400 md:space-y-12 divide-opacity-50 pt-6" diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro index 0202ac33e0..548a268b28 100644 --- a/www/src/components/landingPage/about.astro +++ b/www/src/components/landingPage/about.astro @@ -4,16 +4,18 @@ 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-lg lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto" + 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" @@ -22,7 +24,7 @@ import PageSection from "./pageSection.astro"; we do not believe these are needed on every project. </p> <p - class="mt-4 text-lg lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto" + 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. diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro index 0339cece2e..a19c30da15 100644 --- a/www/src/components/landingPage/banner.astro +++ b/www/src/components/landingPage/banner.astro @@ -2,7 +2,7 @@ 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"> @@ -12,7 +12,7 @@ import Button from "./button.astro"; <div class="flex flex-col gap-4 w-full items-center"> <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" + 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" > The best way to setup an <span class="text-[hsl(200,100%,60%)]"> opinionated,</span> @@ -71,7 +71,7 @@ import Button from "./button.astro"; <div class="flex flex-col w-full items-center"> <div class="flex 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-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" + 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" > 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 57baf33a54..0ea528922b 100644 --- a/www/src/components/landingPage/community/community.astro +++ b/www/src/components/landingPage/community/community.astro @@ -11,12 +11,12 @@ export interface Props {} 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="w-full mt-2 text-5xl text-left lg:text-center md:text-center tracking-tight font-bold text-t3-purple-50" + 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 lg:text-center md:text-center text-xl text-t3-purple-200 mb-10 max-w-3xl" + 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! diff --git a/www/src/components/landingPage/stack/stack.astro b/www/src/components/landingPage/stack/stack.astro index 28d46d0e7a..40ef22d43e 100644 --- a/www/src/components/landingPage/stack/stack.astro +++ b/www/src/components/landingPage/stack/stack.astro @@ -5,16 +5,22 @@ import NextAuthIcon from "./nextauth.png"; --- <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="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-2xl font-semibold text-t3-purple-200"> + <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/layouts/landingPage.astro b/www/src/layouts/landingPage.astro index 5f2e316fa9..54f44c9df1 100644 --- a/www/src/layouts/landingPage.astro +++ b/www/src/layouts/landingPage.astro @@ -26,7 +26,7 @@ const currentPage = Astro.url.pathname; <JumpToContent /> <img src="/images/background-pattern.svg" - class="absolute inset-0 opacity-5 h-max w-max object-cover" + class="absolute inset-0 opacity-5 h-min w-min object-cover" /> <div class="relative"> <Navbar /> From 1cde649d1c28571f217aaad84214c6b913f6d97e Mon Sep 17 00:00:00 2001 From: asrvd <asheeshh@duck.com> Date: Wed, 5 Oct 2022 19:55:04 +0530 Subject: [PATCH 9/9] fix: idk what happened --- www/src/components/navigation/navbar.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro index 641e17358c..8a429787c4 100644 --- a/www/src/components/navigation/navbar.astro +++ b/www/src/components/navigation/navbar.astro @@ -56,9 +56,9 @@ const navbarLinks: Array<{ href: string; label: string }> = [ { "bg-t3-purple-200/10 text-t3-purple-300": navbarLink.href === currentPage, - "text-t3-purple-100 hover:text-t3-purple-300 hover:bg-t3-purple-200/10 rounded-lg": + "rounded-lg text-t3-purple-100 hover:bg-t3-purple-200/10 hover:text-t3-purple-300": isLanding, - "text-t3-purple-500 dark:text-t3-purple-100 dark:hover:text-t3-purple-300 hover:text-t3-purple-400 dark:hover:bg-t3-purple-200/10 hover:bg-t3-purple-200/30 rounded-lg": + "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, }, )}