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:54 UTC
[incubator-devlake-website] 16/25: feat: header mobile adaption
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 <zi...@merico.dev>
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' },
},