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 a81b6d4344af64b6a18426a33dec91bed9997bf8 Author: ZiyuTao <[email protected]> AuthorDate: Wed Sep 14 16:32:07 2022 +0800 feat: feature section mobile adapt --- src/components/Sections/Components.tsx | 19 +++++++++++-------- src/components/Sections/HomepageHeader.tsx | 2 +- src/components/Sections/UseCases.tsx | 2 +- src/components/Sections/WhyDevlake.tsx | 28 ++++++++++++++-------------- src/css/custom.css | 4 ++-- src/pages/index.js | 3 ++- tailwind.config.js | 2 +- 7 files changed, 32 insertions(+), 28 deletions(-) diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx index eb658ce03..96131cb70 100644 --- a/src/components/Sections/Components.tsx +++ b/src/components/Sections/Components.tsx @@ -4,7 +4,7 @@ import ArrowRight from "@site/static/img/Homepage/arrow-right.svg"; export const TextTitle = ({ children }: { children: React.ReactNode }) => <span className="block font-inter text-heading2 text-primary-800 font-semibold mb-[16px] - mobile:text-heading4 mobile:text-neutral-600 mobile:mb-2 mobile:mt-5"> + mobile:text-heading4 sm:mb-2 sm:mt-5"> {children} </span> @@ -17,13 +17,13 @@ export const H3Title = ({ children }: { children: React.ReactNode }) => export const TextDescription = ({ children }: { children: React.ReactNode }) => <div className="font-inter pr-[20px] mobile:pr-[0] text-label18 text-neutral-500 - mobile:w-[260px] mobile:text-label14"> + mobile:text-label16 mobile:text-start"> {children} </div> export const TextLink = ({ link, children }: { link: string, children: React.ReactNode }) => <a className="text-label16 text-secondary-500 flex items-center mt-[16px] - mobile:hidden" + mobile:justify-center hover:text-secondary-500" href={link}>{children} <ArrowRight width={20} height={20} /> </a> @@ -41,7 +41,7 @@ export const SvgImg = ({ svg: Svg }: { svg: React.ComponentType<React.SVGProps<S </div> export const SectionImg = ({ src }: { src: string }) => <img src={src} alt="" className=" w-[384px] h-[288px] - mobile:w-[160px] mobile:h-[124px] + mobile:w-[200px] mobile:h-[150px] " /> export const InlineLink = ({ link, children }: { link: string, children: React.ReactNode }) => @@ -50,17 +50,20 @@ export const InlineLink = ({ link, children }: { link: string, children: React.R </a> export const BreakLine = () => <div className=" - h-[2px] bg-neutral-100 mobile:hidden + h-[2px] bg-neutral-100 " /> export const Sup = ({ children, title }: { children: React.ReactNode, title: string }) => - <span className="w-[100px] flex flex-col items-center"> + <span className="w-[100px] flex flex-col items-center + sm:w-[60px]"> {children} - <span className="font-inter text-label14 - flex items-center h-[24px] + <span className="font-inter text-label14 text-center + flex h-[24px] text-neutral-500 mt-[4px] + sm:text-[12px] sm:leading-[12px] sm:mt-1 ">{title}</span> </span> export const SupImg = ({ src }: { src: string }) => <img src={src} className=' w-[80px] h-[80px] + sm:w-[48px] sm:h-[48px] '/> \ No newline at end of file diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx index 36acffd7b..64864764f 100644 --- a/src/components/Sections/HomepageHeader.tsx +++ b/src/components/Sections/HomepageHeader.tsx @@ -42,7 +42,7 @@ export function HomepageHeader() { </div> <div className="text-primary-800 text-label24 font-inter font-normal mb-[48px] - mobile:text-label16 mobile:leading-[22px] mobile:text-start mobile:mb-3 + mobile:text-label16 mobile:text-start mobile:mb-3 "> Apache DevLake (Incubating) ingests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering excellence. </div> diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx index 7e1165a10..6f0912223 100644 --- a/src/components/Sections/UseCases.tsx +++ b/src/components/Sections/UseCases.tsx @@ -63,7 +63,7 @@ export function UseCases() { </UCCard> <UCCard lead="Tech Leads" - title="Bring Out the Best in Your Team" + title="Bring out the Best in Your Team" desc="Gain insights into the development and delivery process. Remove blockers and risks to establish best practices." > <UCIcon src={UC3} /> diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx index 76415e284..f3c18823e 100644 --- a/src/components/Sections/WhyDevlake.tsx +++ b/src/components/Sections/WhyDevlake.tsx @@ -17,7 +17,6 @@ import SupA from "@site/static/img/Homepage/sup-A-feishu.png"; function Feature({ className, children }: { className?: string, children: React.ReactNode }) { return ( <div className={`flex w-full justify-between items-center - mobile:text-center mobile:flex-col ${className}`}> {children} </div> @@ -27,23 +26,24 @@ function Feature({ className, children }: { className?: string, children: React. function Supports() { return ( <div className=" flex flex-col items-center - mt-[48px] mb-[72px] mobile:hidden + mt-[48px] mb-[72px] "> <C.H3Title>Supported Data Sources</C.H3Title> - <div className="grid grid-cols-5 gap-x-[24px] gap-y-[16px]"> + <div className="grid grid-cols-5 gap-x-[24px] gap-y-[16px] + sm:gap-x-1"> <C.Sup title="Jira"><C.SupImg src={Sup1} /></C.Sup> - <C.Sup title="TAPD"><Sup2 /></C.Sup> - <C.Sup title="GitHub"><Sup3 /></C.Sup> - <C.Sup title="GitLab"><Sup4 /></C.Sup> - <C.Sup title="BitBucket"><Sup5 /></C.Sup> - <C.Sup title="Gitee"><Sup6 /></C.Sup> - <C.Sup title="Jenkins"><Sup7 /></C.Sup> - <C.Sup title="GitHub Action"><Sup8 /></C.Sup> - <C.Sup title="GitLab CI"><Sup9 /></C.Sup> + <C.Sup title="TAPD"><Sup2 className="sm:w-[48px] sm:h-[48px]" /></C.Sup> + <C.Sup title="GitHub"><Sup3 className="sm:w-[48px] sm:h-[48px]" /></C.Sup> + <C.Sup title="GitLab"><Sup4 className="sm:w-[48px] sm:h-[48px]" /></C.Sup> + <C.Sup title="BitBucket"><Sup5 className="sm:w-[48px] sm:h-[48px]" /></C.Sup> + <C.Sup title="Gitee"><Sup6 className="sm:w-[48px] sm:h-[48px]" /></C.Sup> + <C.Sup title="Jenkins"><Sup7 className="sm:w-[48px] sm:h-[48px]" /></C.Sup> + <C.Sup title="GitHub Action"><Sup8 className="sm:w-[48px] sm:h-[48px]" /></C.Sup> + <C.Sup title="GitLab CI"><Sup9 className="sm:w-[48px] sm:h-[48px]" /></C.Sup> <C.Sup title="Feishu"><C.SupImg src={SupA} /></C.Sup> </div> - <div className="text-label18 font-inter text-neutral-500 - mt-[48px]"> + <div className="text-label18 font-inter text-neutral-500 mt-6 + sm:text-label16 sm:mt-4"> <C.InlineLink link="https://devlake.apache.org/docs/Overview/Roadmap";>More data sources</C.InlineLink> comming soon... </div> </div> @@ -56,7 +56,7 @@ export function WhyDevlake() { <span className="section-title text-center" > - Why Apache DevLake<span className="mobile:hidden"> (Incubating)</span> + Why Apache DevLake (Incubating) </span> <div className=" flex flex-col diff --git a/src/css/custom.css b/src/css/custom.css index c61236557..c544fa9c7 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -48,8 +48,8 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { .section-title { @apply text-heading1 mb-[64px]; @apply text-primary-800 font-semibold; - @apply mobile:text-heading2 mobile:leading-[32px] mobile:text-neutral-600; - @apply mobile:py-6 mobile:mb-[0]; + @apply mobile:text-heading3; + @apply mobile:mb-4 mobile:mt-3; } .floating-link-icon { diff --git a/src/pages/index.js b/src/pages/index.js index 2ef77a781..4dbf41d47 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -18,7 +18,8 @@ export default function Home() { <div className='bg-[#f8f8f8]'> <div className=' mx-auto bg-white'> <HomepageHeader /> - <main className='max-w-[1128px] xl:mx-auto mx-[140px] sm:mx-[0px]'> + <main className='max-w-[1128px] xl:mx-auto mx-[140px] + sm:max-w-[90%] sm:mx-auto'> <WhyDevlake /> <UseCases /> <UserFlow /> diff --git a/tailwind.config.js b/tailwind.config.js index 89503d69e..7c552d8cc 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,9 +11,9 @@ module.exports = { inter: ['"Inter"', ...defaultTheme.fontFamily.sans], }, screens: { - 'mobile': { 'max': '390px' }, 'xl': '1280px', 'sm': { 'max': '744px' }, + 'mobile': { 'max': '390px' }, }, spacing: { 1: '8px',
