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 513246539c1bc1a9e61f8818983607539f410810 Author: ZiyuTao <[email protected]> AuthorDate: Wed Sep 14 17:50:38 2022 +0800 feat: adapt for narrow screen --- src/components/Sections/Components.tsx | 12 +++++----- src/components/Sections/Discover.tsx | 13 +++++------ src/components/Sections/HomepageHeader.tsx | 35 +++++++++++++++-------------- src/components/Sections/JoinCommunity.tsx | 13 +++++------ src/components/Sections/UseCases.tsx | 32 ++++++++++++++------------ src/components/Sections/WhyDevlake.tsx | 11 +++++---- src/css/custom.css | 7 +++--- src/pages/index.js | 6 ++--- static/img/Homepage/UCBG-MB.png | Bin 0 -> 22922 bytes tailwind.config.js | 2 +- 10 files changed, 69 insertions(+), 62 deletions(-) diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx index 96131cb70..ee3a8f0f0 100644 --- a/src/components/Sections/Components.tsx +++ b/src/components/Sections/Components.tsx @@ -4,32 +4,33 @@ 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 sm:mb-2 sm:mt-5"> + sm:text-heading4 sm:mb-2 sm:mt-5"> {children} </span> export const H3Title = ({ children }: { children: React.ReactNode }) => <span className="block font-inter - text-heading3 text-primary-800 font-semibold mb-[24px]"> + text-heading3 text-primary-800 font-semibold mb-[24px] + sm:text-heading4"> {children} </span> export const TextDescription = ({ children }: { children: React.ReactNode }) => <div className="font-inter pr-[20px] mobile:pr-[0] text-label18 text-neutral-500 - mobile:text-label16 mobile:text-start"> + sm:text-label16 sm: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:justify-center hover:text-secondary-500" + sm:justify-center hover:text-secondary-500" href={link}>{children} <ArrowRight width={20} height={20} /> </a> export const TextSection = ({ children }: { children: React.ReactNode }) => - <div className={`text-start mobile:text-center w-[448px] mobile:w-auto`}> + <div className={`text-start sm:text-center w-[448px] sm:w-auto`}> {children} </div> @@ -41,6 +42,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] + sm:w-[240px] sm:h-[182px] mobile:w-[200px] mobile:h-[150px] " /> diff --git a/src/components/Sections/Discover.tsx b/src/components/Sections/Discover.tsx index db2ee03b8..903c0443e 100644 --- a/src/components/Sections/Discover.tsx +++ b/src/components/Sections/Discover.tsx @@ -5,17 +5,16 @@ import BG from "@site/static/img/Homepage/discover.png"; export function Discover() { return (<div className="flex flex-col items-center relative h-[324px] font-inter bg-primary-100 - mobile:px-6 mobile:h-[260px]"> + sm:px-6 sm:h-[260px] "> <img src={BG} alt='' className="absolute bottom-[0px] z-0" /> <div className="font-medium text-primary-800 text-[32px] leading-[48px] mt-[72px] - mobile:mt-5 - mobile:text-center mobile:font-normal mobile:text-heading3 mobile:text-primary-500 - ">Discover more engineering insights with</div> + sm:mt-5 sm:text-center sm:text-heading3 sm:leading-[30px] + ">Discover more engineering <br className="hidden sm:block" /> insights with</div> <div className="font-semibold text-primary-500 text-[40px] leading-[60px] mt-1 mb-3 - mobile:text-label24 mobile:leading-[30px] mobile:text-center">Apache DevLake (Incubating)</div> + sm:text-label24 sm:leading-[30px] sm:text-center">Apache DevLake (Incubating)</div> <Link - className="primary-button z-10 mobile:flex mobile:w-[160px] mobile:h-5 mobile:p-[0px] - whitespace-nowrap mobile:mx-auto mobile:rounded-[5px] mobile:mb-4" + className="primary-button z-10 sm:flex sm:w-[137px] sm:h-5 sm:p-[0px] + whitespace-nowrap sm:mx-auto sm:rounded-[5px] sm:mb-4" to="https://devlake.apache.org/docs/GettingStarted"; > Getting Started diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx index 64864764f..7f3c43794 100644 --- a/src/components/Sections/HomepageHeader.tsx +++ b/src/components/Sections/HomepageHeader.tsx @@ -10,46 +10,47 @@ export function HomepageHeader() { <div> <img src={HeaderBG} alt='' className=" absolute top-[0px] left-[0px] max-h-[580px] - xl:w-screen mobile:hidden" /> + xl:w-screen sm:hidden" /> <img src={HeaderBGMB} alt='' className=" - absolute top-[0px] left-[0px] h-[526px] - hidden mobile:block" /> + absolute top-[0px] left-[0px] w-screen z-0 + sm:h-[496px] mobile:h-[526px] + hidden sm:block" /> <header className="relative - pt-[64px] pb-[90px] px-[80px] - mobile:pt-5 mobile:px-[32px] mobile:pb-[0px] - flex mobile:flex-col + pt-[64px] pb-[90px] + sm:pt-5 sm:pb-[0px] + flex sm:flex-col justify-between items-center - max-w-[80vw] mx-auto sm:max-w-none" + max-w-[80%] mx-auto sm:max-w-[90%]" > <div className=" z-10 flex flex-col flex-nowrap justify-start w-[590px] - mobile:flex-wrap mobile:w-auto - mobile:text-center mobile:justify-center + sm:flex-wrap sm:w-auto + sm:text-center mobile:justify-center " > <div className="text-primary font-bold font-inter text-heading0 - mobile:text-heading2 - mobile:font-semibold mobile:text-center - mb-[32px] mobile:mb-3" + sm:text-heading2 + sm:font-semibold sm:text-center + mb-[32px] sm:mb-3" > Debug Your Software{' '} - <br /> + <br className="sm:hidden mobile:block" /> Engineering Process </div> <div className="text-primary-800 text-label24 font-inter font-normal mb-[48px] - mobile:text-label16 mobile:text-start mobile:mb-3 + sm:text-label16 sm:text-start sm:mb-3 "> Apache DevLake (Incubating) ingests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering excellence. </div> <Link className="primary-button - mobile:flex mobile:w-[160px] mobile:h-5 p-[0px] - whitespace-nowrap mobile:mx-auto mobile:rounded-[5px] mobile:mb-4" + sm:flex sm:w-[137px] sm:h-5 p-[0px] sm:text-[14px] + whitespace-nowrap sm:mx-auto sm:rounded-[5px] sm:mb-4" to="https://devlake.apache.org/docs/GettingStarted"; > Getting Started @@ -57,7 +58,7 @@ export function HomepageHeader() { </div> <HeaderSvg className=" w-auto h-auto z-10 - mobile:w-[260px] mobile:h-[228px] mobile:mx-auto mobile:mb-5 + sm:w-[260px] sm:h-[228px] sm:mx-auto sm:mb-5 "/> </header> </div> diff --git a/src/components/Sections/JoinCommunity.tsx b/src/components/Sections/JoinCommunity.tsx index adce60a73..02e2fe0cf 100644 --- a/src/components/Sections/JoinCommunity.tsx +++ b/src/components/Sections/JoinCommunity.tsx @@ -5,20 +5,19 @@ import Join from "@site/static/img/Homepage/Join.png"; import { InlineLink } from "./Components"; export function JoinCommunity() { - return (<div className="flex justify-between mobile:flex-col-reverse + return (<div className="flex justify-between sm:flex-col-reverse my-[72px] rounded-[20px] bg-primary-200 px-6 py-[36px] font-inter - mobile:mx-5 mobile:my-6 mobile:px-3 mobile:py-4"> - <div className="w-[600px] pr-3 - mobile:w-auto"> + sm:w-[87vw] sm:my-6 sm:p-4"> + <div className="w-[600px] pr-3 sm:pr-[0] sm:w-auto"> <div className="text-heading1 mb-3 text-primary-800 font-semibold - mobile:text-heading2 mobile:text-primary-500">Join the Community</div> + sm:text-heading2">Join the Community</div> <div className="text-label18 mb-4 text-neutral-500 - mobile:text-label14 mobile:mb-3">Join our community to stay up to date on the latest news, ask and answer questions, make contributions, and connect with fellow community members!</div> + sm:text-label16 sm:mb-3">Join our community to stay up to date on the latest news, ask and answer questions, make contributions, and connect with fellow community members!</div> <div className="text-label16 space-y-[8px] flex flex-col"> <InlineLink link="https://join.slack.com/t/devlake-io/shared_invite/zt-17b6vuvps-x98pqseoUagM7EAmKC82xQ";>Join Slack</InlineLink> <InlineLink link="https://devlake.apache.org/community/subscribe";>Subscribe to Mailing List</InlineLink> </div> </div> - <img src={Join} alt='' className="w-[216px] h-[200px] mobile:mx-auto mobile:mb-4" /> + <img src={Join} alt='' className="w-[216px] h-[200px] sm:mx-auto sm:mb-4" /> </div>) } \ No newline at end of file diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx index 6f0912223..c22ff7170 100644 --- a/src/components/Sections/UseCases.tsx +++ b/src/components/Sections/UseCases.tsx @@ -1,6 +1,7 @@ import React from "react"; import BG from '@site/static/img/Homepage/UCBG.png'; +import BGMB from '@site/static/img/Homepage/UCBG-MB.png'; import UC1 from '@site/static/img/Homepage/UC1.png'; import UC2 from '@site/static/img/Homepage/UC2.png'; import UC3 from '@site/static/img/Homepage/UC3.png'; @@ -13,40 +14,43 @@ function UCCard({ lead, title, desc, children }: { children: React.ReactNode, }) { return (<div className='use-case-card relative shadow-card overflow-hidden - w-[460px] h-[468px] rounded-[16px] - mobile:w-[312px] mobile:shadow-hide - '> + w-[30%] 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 - mobile:h-auto mobile:mb-4"> + sm:h-[182px]"> {children} </div> - <div className="bg-white px-4 py-2 h-[240px] mobile:bg-transparent mobile:h-auto mobile:p-[0]"> + <div className="bg-white px-4 py-2 h-[240px] sm:h-[152px] sm:p-2 mobile:h-[208px]"> <div className="font-inter text-neutral-300 text-label18 font-medium mb-2 pr-1 - mobile:text-heading4 mobile:text-neutral-600 mobile:font-semibold mobile:mb-3">{lead}</div> + sm:text-label16 sm:font-normal sm:mb-[4px]">{lead}</div> <div className="font-inter text-primary-800 text-heading2 font-semibold mb-2 pr-1 - mobile:text-neutral-600 mobile:mb-3">{title}</div> + sm:text-[20px] sm:leading-[28px] sm:mb-[4px] sm:pr-[0]">{title}</div> <div className="font-inter text-neutral-500 text-label18 font-normal pr-1 - mobile:text-label14 mobile:text-neutral-400">{desc}</div> + sm:text-label16 sm:pr-[0]">{desc}</div> </div> </div>) } const UCIcon = ({ src }: { src: string }) => <img src={src} alt='' className=" w-[240px] h-[180px] - mobile:w-[308px] mobile:h-[250px] + mobile:w-[212px] mobile:h-[160px] " /> export function UseCases() { return ( - <div className="h-[1206px]"> - <img src={BG} alt='' className='absolute z-0 mobile:hidden + <div className="h-[1206px] sm:h-[1590px] mobile:h-[1816px]"> + <img src={BG} alt='' className='absolute z-0 sm:hidden xl:w-screen h-[1206px] left-[0px]' /> + <img src={BGMB} alt='' className='absolute z-0 hidden + sm:block sm:w-full + xl:w-screen left-[0px] h-[1590px] mobile:h-[1816px]' /> <div className="flex flex-col relative items-center - mobile:h-auto mobile:bg-primary-100 mobile:pb-6"> + mobile:pb-6"> <span className="section-title text-center mt-7 - mobile:mt-[0]">Use Cases</span> + sm:mt-[0] sm:text-heading2">Use Cases</span> <div className="grid grid-cols-2 gap-x-[72px] gap-y-6 - mobile:grid-cols-1"> + sm:grid-cols-1"> <UCCard lead="Open-source Software Maintainers" title="Contribution Analysis for Community Growth" diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx index f3c18823e..f307cc6eb 100644 --- a/src/components/Sections/WhyDevlake.tsx +++ b/src/components/Sections/WhyDevlake.tsx @@ -17,7 +17,7 @@ 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:flex-col ${className}`}> + sm:flex-col ${className}`}> {children} </div> ); @@ -27,6 +27,8 @@ function Supports() { return ( <div className=" flex flex-col items-center mt-[48px] mb-[72px] + sm:mt-[36px] + mobile:mt-4 "> <C.H3Title>Supported Data Sources</C.H3Title> <div className="grid grid-cols-5 gap-x-[24px] gap-y-[16px] @@ -52,7 +54,7 @@ function Supports() { export function WhyDevlake() { return (<section className="flex flex-col flex-nowrap py-5 items-stretch - mobile:py-[0px]"> + sm:py-[0px]"> <span className="section-title text-center" > @@ -61,7 +63,8 @@ export function WhyDevlake() { <div className=" flex flex-col mb-[72px] space-y-7 - mobile:px-[0px] mobile:space-y-6 mobile:mb-6 + sm:px-[0px] sm:space-y-[36px] sm:mb-[36px] + mobile:mb-4 mobile:space-y-4 "> <Feature> <C.SectionImg src={WAD1} /> @@ -74,7 +77,7 @@ export function WhyDevlake() { </C.TextDescription> </C.TextSection> </Feature> - <Feature className="mobile:flex-col-reverse"> + <Feature className="sm:flex-col-reverse"> <C.TextSection> <C.TextTitle>Out-of-the-box Analysis</C.TextTitle> <C.TextDescription> diff --git a/src/css/custom.css b/src/css/custom.css index c544fa9c7..93e84c855 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -41,15 +41,15 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { @apply flex items-center justify-center w-[160px] h-[48px]; @apply hover:no-underline hover:text-neutral-invert; @apply text-neutral-invert text-[16px] leading-[20px] font-semibold; - @apply rounded-[10px]; + @apply rounded-[10px] sm:text-[14px]; @apply shadow-sm shadow-primary/20 ; } .section-title { @apply text-heading1 mb-[64px]; @apply text-primary-800 font-semibold; - @apply mobile:text-heading3; - @apply mobile:mb-4 mobile:mt-3; + @apply sm:text-heading3; + @apply mobile:mb-4 sm:mt-3 sm:mb-[36px]; } .floating-link-icon { @@ -62,6 +62,5 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { .use-case-card { background: linear-gradient(105.48deg, #DBE4FD 16.79%, #F0F4FE 93.34%); - @apply mobile:bg-none; } } \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 4dbf41d47..021f06d1b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -18,14 +18,14 @@ 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:max-w-[90%] sm:mx-auto'> + <main className='max-w-[70%] xl:mx-auto + sm:max-w-[90%] mx-auto'> <WhyDevlake /> <UseCases /> <UserFlow /> <JoinCommunity /> - <Discover /> </main> + <Discover /> </div> </div> </Layout> diff --git a/static/img/Homepage/UCBG-MB.png b/static/img/Homepage/UCBG-MB.png new file mode 100644 index 000000000..5abf9e3ce Binary files /dev/null and b/static/img/Homepage/UCBG-MB.png differ diff --git a/tailwind.config.js b/tailwind.config.js index 7c552d8cc..aa74c97af 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,7 +12,7 @@ module.exports = { }, screens: { 'xl': '1280px', - 'sm': { 'max': '744px' }, + 'sm': { 'max': '750px' }, 'mobile': { 'max': '390px' }, }, spacing: {
