[incubator-devlake-website] 19/25: fix: minor style for mobile

[yu...@apache.org]

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 c52597134278173f2d9ba0fcb4ba25820e3434dd
Author: ZiyuTao <zi...@merico.dev>
AuthorDate: Wed Sep 14 17:58:35 2022 +0800

    fix: minor style for mobile
---
 src/components/Sections/Discover.tsx      | 2 +-
 src/components/Sections/JoinCommunity.tsx | 2 +-
 src/components/Sections/UseCases.tsx      | 6 +++---
 src/components/Sections/WhyDevlake.tsx    | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Sections/Discover.tsx b/src/components/Sections/Discover.tsx
index 903c0443e..5b938ff4a 100644
--- a/src/components/Sections/Discover.tsx
+++ b/src/components/Sections/Discover.tsx
@@ -11,7 +11,7 @@ export function Discover() {
       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
-      sm:text-label24 sm:leading-[30px] sm:text-center">Apache DevLake (Incubating)</div>
+      sm:text-label24 sm:leading-[30px] sm:text-center sm:whitespace-nowrap">Apache DevLake (Incubating)</div>
     <Link
       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"
diff --git a/src/components/Sections/JoinCommunity.tsx b/src/components/Sections/JoinCommunity.tsx
index 02e2fe0cf..c51bfbc27 100644
--- a/src/components/Sections/JoinCommunity.tsx
+++ b/src/components/Sections/JoinCommunity.tsx
@@ -7,7 +7,7 @@ import { InlineLink } from "./Components";
 export function JoinCommunity() {
   return (<div className="flex justify-between sm:flex-col-reverse
     my-[72px] rounded-[20px] bg-primary-200 px-6 py-[36px] font-inter
-    sm:w-[87vw] sm:my-6 sm:p-4">
+    sm:w-[87vw] sm:my-6 sm:p-4 mobile:my-4 mobile:p-3">
     <div className="w-[600px] pr-3 sm:pr-[0] sm:w-auto">
       <div className="text-heading1 mb-3 text-primary-800 font-semibold
         sm:text-heading2">Join the Community</div>
diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx
index c22ff7170..010f2b2ba 100644
--- a/src/components/Sections/UseCases.tsx
+++ b/src/components/Sections/UseCases.tsx
@@ -39,18 +39,18 @@ const UCIcon = ({ src }: { src: string }) => <img src={src} alt='' className="
 
 export function UseCases() {
   return (
-    <div className="h-[1206px] sm:h-[1590px] mobile:h-[1816px]">
+    <div className="h-[1206px] sm:h-[1590px] mobile:h-[1752px]">
       <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]' />
+        xl:w-screen left-[0px] h-[1590px] mobile:h-[1752px]' />
       <div className="flex flex-col relative items-center 
         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
-          sm:grid-cols-1">
+          sm:grid-cols-1 sm:gap-y-4">
           <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 f307cc6eb..c31a0281b 100644
--- a/src/components/Sections/WhyDevlake.tsx
+++ b/src/components/Sections/WhyDevlake.tsx
@@ -27,8 +27,8 @@ function Supports() {
   return (
     <div className=" flex flex-col items-center
       mt-[48px] mb-[72px]
-      sm:mt-[36px]
-      mobile:mt-4
+      sm:mt-[36px] sm:mb-[60px]
+      mobile:mt-4 mobile:mb-6
     ">
       <C.H3Title>Supported Data Sources</C.H3Title>
       <div className="grid grid-cols-5 gap-x-[24px] gap-y-[16px]