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 060d5d6c14365b9fd16bc1344fac5b11039d0819 Author: ZiyuTao <[email protected]> AuthorDate: Mon Sep 12 02:07:48 2022 +0800 feat: mobile remove oversized asset --- src/components/Sections/HomepageHeader.tsx | 4 +++- src/components/Sections/UseCases.tsx | 7 ++++--- src/components/Sections/UserFlow.tsx | 4 ++-- src/components/Sections/WhyDevlake.tsx | 1 + src/css/custom.css | 4 ++-- tailwind.config.js | 3 +++ 6 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx index ef77e7de3..90f78767e 100644 --- a/src/components/Sections/HomepageHeader.tsx +++ b/src/components/Sections/HomepageHeader.tsx @@ -12,7 +12,9 @@ export function HomepageHeader() { flex justify-between items-center" > - <HeaderBgSvg className='absolute top-[0px] left-[0px]' /> + <HeaderBgSvg className=' + absolute top-[0px] left-[0px] + mobile:hidden' /> <div className=" z-10 flex flex-col flex-nowrap diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx index 659ae6af5..030d275ff 100644 --- a/src/components/Sections/UseCases.tsx +++ b/src/components/Sections/UseCases.tsx @@ -32,12 +32,13 @@ const UCIcon = ({ src }: { src: string }) => <img src={src} alt='' className=" export function UseCases() { return (<div className="flex flex-col relative items-center - h-[1206px] "> - <BG className='absolute z-0' /> + h-[1206px] mobile:h-auto"> + <BG className='absolute z-0 mobile:hidden' /> <span className="section-title text-center mt-7" >Use Cases</span> - <div className="grid grid-cols-2 gap-x-[72px] gap-y-6"> + <div className="grid grid-cols-2 gap-x-[72px] gap-y-6 + mobile:grid-cols-1"> <UCCard lead="Open-source Software Maintainers" title="Contribution Analysis for Community Growth" diff --git a/src/components/Sections/UserFlow.tsx b/src/components/Sections/UserFlow.tsx index 3393529ac..a58dce0a8 100644 --- a/src/components/Sections/UserFlow.tsx +++ b/src/components/Sections/UserFlow.tsx @@ -22,7 +22,7 @@ const Card = ({ icon, text, children }: { <div className="mt-5 text-label18 font-inter pr-3">{children}</div> </div>) -const Arrow = () => <div className="h-[140px] flex items-center"><BlueArrow /></div> +const Arrow = () => <div className="h-[140px] flex items-center mobile:hidden"><BlueArrow /></div> export function UserFlow() { return ( @@ -30,7 +30,7 @@ export function UserFlow() { <span className="section-title text-center mt-[72px] mb-6" >User Flow</span> - <div className="flex mb-[72px]"> + <div className="flex mb-[72px] mobile:flex-col"> <Card icon={<UF1 width={40} height={40} />} text="Set up DevLake" diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx index a5405660c..ff71a1814 100644 --- a/src/components/Sections/WhyDevlake.tsx +++ b/src/components/Sections/WhyDevlake.tsx @@ -60,6 +60,7 @@ export function WhyDevlake() { flex flex-col px-[140px] mb-[72px] space-y-7 + mobile:px-[0px] "> <Feature> <C.SectionImg src={WAD1} /> diff --git a/src/css/custom.css b/src/css/custom.css index 20b071b41..9b8bef00b 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -41,8 +41,8 @@ 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-[4.9px] lg:rounded-[10px]; - @apply shadow-sm shadow-primary/20 lg:shadow-lg lg:shadow-primary/20; + @apply rounded-[10px]; + @apply shadow-sm shadow-primary/20 ; } .section-title { diff --git a/tailwind.config.js b/tailwind.config.js index cd66e41e2..788fb62d2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,6 +10,9 @@ module.exports = { fontFamily: { inter: ['"Inter"', ...defaultTheme.fontFamily.sans], }, + screens: { + 'mobile': { 'max': '375px' }, + }, spacing: { 1: '8px', 2: '12px',
