You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by yu...@apache.org on 2022/09/15 03:14:56 UTC
[incubator-devlake-website] 18/25: feat: adapt for narrow screen
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 <zi...@merico.dev>
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: {