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:49 UTC
[incubator-devlake-website] 11/25: feat: mobile remove oversized asset
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 <zi...@merico.dev>
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',