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 ed9e9139d8cb9e52e2d19e7ee306b72746e2f51e Author: ZiyuTao <[email protected]> AuthorDate: Wed Sep 14 15:56:04 2022 +0800 feat: header mobile adaption --- src/components/Sections/HomepageHeader.tsx | 47 +++++++++++------------------ src/pages/index.js | 2 +- static/img/Homepage/HeaderBG-MB.png | Bin 0 -> 7017 bytes tailwind.config.js | 2 +- 4 files changed, 19 insertions(+), 32 deletions(-) diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx index 8e2830b70..36acffd7b 100644 --- a/src/components/Sections/HomepageHeader.tsx +++ b/src/components/Sections/HomepageHeader.tsx @@ -3,22 +3,24 @@ import React from "react"; import Link from '@docusaurus/Link'; import HeaderSvg from '@site/static/img/Homepage/HeaderIcon.svg'; import HeaderBG from '@site/static/img/Homepage/HeaderBG.png'; +import HeaderBGMB from '@site/static/img/Homepage/HeaderBG-MB.png'; export function HomepageHeader() { return ( <div> <img src={HeaderBG} alt='' className=" absolute top-[0px] left-[0px] max-h-[580px] - xl:w-screen - mobile:hidden" /> + xl:w-screen mobile:hidden" /> + <img src={HeaderBGMB} alt='' className=" + absolute top-[0px] left-[0px] h-[526px] + hidden mobile:block" /> <header className="relative pt-[64px] pb-[90px] px-[80px] mobile:pt-5 mobile:px-[32px] mobile:pb-[0px] flex mobile:flex-col justify-between items-center - max-w-[1320px] mx-auto - mobile:bg-primary-100" + max-w-[80vw] mx-auto sm:max-w-none" > <div className=" z-10 flex flex-col flex-nowrap @@ -26,51 +28,36 @@ export function HomepageHeader() { mobile:flex-wrap mobile:w-auto mobile:text-center mobile:justify-center " > - <div className="hidden mobile:block - text-primary text-center - font-bold font-inter - text-heading2 - mb-[16px]"> - Apache DevLake (Incubating) - </div> <div className="text-primary font-bold font-inter text-heading0 - mobile:text-label16 mobile:leading-[20px] - mobile:font-normal mobile:text-center + mobile:text-heading2 + mobile:font-semibold mobile:text-center mb-[32px] mobile:mb-3" > Debug Your Software{' '} - <br className="mobile:hidden" /> + <br /> Engineering Process </div> - <Link - className="hidden primary-button mobile:flex w-[160px] h-5 p-[0px] - whitespace-nowrap mx-auto rounded-[5px] mb-4" - to="https://devlake.apache.org/docs/GettingStarted"; - > - Getting Started - </Link> - <HeaderSvg className="hidden mobile:block - w-[240px] h-[240px] mx-auto mb-5" /> <div className="text-primary-800 - text-label24 font-inter font-normal mb-[48px] - mobile:text-heading3 mobile:font-semibold - mobile:text-primary-500 + text-label24 font-inter font-normal mb-[48px] + mobile:text-label16 mobile:leading-[22px] mobile:text-start mobile:mb-3 "> - <span className="hidden mobile:inline">I</span> - <span className="mobile:hidden">Apache DevLake (Incubating) i</span>ngests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering excellence. + 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:hidden" + className="primary-button + mobile:flex mobile:w-[160px] mobile:h-5 p-[0px] + whitespace-nowrap mobile:mx-auto mobile:rounded-[5px] mobile:mb-4" to="https://devlake.apache.org/docs/GettingStarted"; > Getting Started </Link> </div> <HeaderSvg className=" - w-auto h-auto z-10 mobile:hidden + w-auto h-auto z-10 + mobile:w-[260px] mobile:h-[228px] mobile:mx-auto mobile:mb-5 "/> </header> </div> diff --git a/src/pages/index.js b/src/pages/index.js index 8b2a31e4c..2ef77a781 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -18,7 +18,7 @@ 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]'> + <main className='max-w-[1128px] xl:mx-auto mx-[140px] sm:mx-[0px]'> <WhyDevlake /> <UseCases /> <UserFlow /> diff --git a/static/img/Homepage/HeaderBG-MB.png b/static/img/Homepage/HeaderBG-MB.png new file mode 100644 index 000000000..705337ad7 Binary files /dev/null and b/static/img/Homepage/HeaderBG-MB.png differ diff --git a/tailwind.config.js b/tailwind.config.js index c0b5f29cc..89503d69e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,7 +11,7 @@ module.exports = { inter: ['"Inter"', ...defaultTheme.fontFamily.sans], }, screens: { - 'mobile': { 'max': '375px' }, + 'mobile': { 'max': '390px' }, 'xl': '1280px', 'sm': { 'max': '744px' }, },
