This is an automated email from the ASF dual-hosted git repository. yumeng pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/incubator-devlake-website.git
commit 604a52faf873cbaee87c83ad316723b98df18ed6 Author: ZiyuTao <[email protected]> AuthorDate: Wed Sep 14 18:13:17 2022 +0800 fix: minor fix --- src/components/Sections/UseCases.tsx | 4 ++-- src/components/Sections/UserFlow.tsx | 18 ++++++++---------- tailwind.config.js | 2 +- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx index 010f2b2ba..40e31214d 100644 --- a/src/components/Sections/UseCases.tsx +++ b/src/components/Sections/UseCases.tsx @@ -14,7 +14,7 @@ function UCCard({ lead, title, desc, children }: { children: React.ReactNode, }) { return (<div className='use-case-card relative shadow-card overflow-hidden - w-[30%] h-[468px] rounded-[16px] + xl:w-[30vw] h-[468px] rounded-[16px] sm:w-[62vw] sm:h-[336px] sm:mx-auto mobile:w-auto mobile:h-[392px]'> <div className="flex items-center h-[228px] justify-center @@ -49,7 +49,7 @@ export function UseCases() { mobile:pb-6"> <span className="section-title text-center mt-7 sm:mt-[0] sm:text-heading2">Use Cases</span> - <div className="grid grid-cols-2 gap-x-[72px] gap-y-6 + <div className="grid grid-cols-2 gap-x-[72px] xl:gap-x-[10vw] gap-y-6 sm:grid-cols-1 sm:gap-y-4"> <UCCard lead="Open-source Software Maintainers" diff --git a/src/components/Sections/UserFlow.tsx b/src/components/Sections/UserFlow.tsx index 660ac62bf..30080eb2d 100644 --- a/src/components/Sections/UserFlow.tsx +++ b/src/components/Sections/UserFlow.tsx @@ -11,29 +11,27 @@ const Card = ({ icon, text, children }: { icon: React.ReactNode, text: String, children: React.ReactNode, -}) => (<div className="w-[220px] mobile:mb-6 mobile:text-center"> +}) => (<div className="w-[220px] xl:w-[15vw] mobile:mb-6 mobile:text-center"> <div className="flex flex-col items-center - bg-primary-100 w-[220px] h-[140px] rounded-[6px] + bg-primary-100 w-[220px] xl:w-[15vw] h-[140px] rounded-[6px] border-primary-500 border-[1px] border-solid "> <div className="mt-[40px]">{icon}</div> <div className="mt-[10px] text-heading4 font-inter font-semibold text-primary-800">{text}</div> </div> - <div className="mt-5 text-label18 font-inter pr-3 - mobile:text-label14 mobile:mt-3">{children}</div> + <div className="mt-5 text-label18 font-inter pl-1 text-neutral-500">{children}</div> </div>) -const Arrow = () => <div className="h-[140px] flex items-center mobile:hidden"><BlueArrow /></div> +const Arrow = () => <div className="h-[140px] flex items-center"><BlueArrow className="xl:w-[3.33vw]" /></div> export function UserFlow() { return ( - <div className="flex flex-col relative items-center - sm:hidden"> + <div className="hidden flex-col relative items-center + xl:flex"> <span - className="section-title text-center mt-[72px] mb-6 - mobile:m-[0]" + className="section-title text-center mt-[72px] mb-6" >User Flow</span> - <div className="flex mb-[72px] mobile:flex-col"> + <div className="flex mb-[72px]"> <Card icon={<UF1 width={40} height={40} />} text="Set up DevLake" diff --git a/tailwind.config.js b/tailwind.config.js index aa74c97af..b1697a4d1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,7 +12,7 @@ module.exports = { }, screens: { 'xl': '1280px', - 'sm': { 'max': '750px' }, + 'sm': { 'max': '850px' }, 'mobile': { 'max': '390px' }, }, spacing: {
