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:58 UTC
[incubator-devlake-website] 20/25: fix: minor fix
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 604a52faf873cbaee87c83ad316723b98df18ed6
Author: ZiyuTao <zi...@merico.dev>
AuthorDate: Wed Sep 14 18:13:17 2022 +0800
fix: minor fix
---
src/components/Sections/UseCases.tsx | 4 ++--
src/components/Sections/UserFlow.tsx | 18 ++++++++----------
tailwind.config.js | 2 +-
3 files changed, 11 insertions(+), 13 deletions(-)
diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx
index 010f2b2ba..40e31214d 100644
--- a/src/components/Sections/UseCases.tsx
+++ b/src/components/Sections/UseCases.tsx
@@ -14,7 +14,7 @@ function UCCard({ lead, title, desc, children }: {
children: React.ReactNode,
}) {
return (<div className='use-case-card relative shadow-card overflow-hidden
- w-[30%] h-[468px] rounded-[16px]
+ xl:w-[30vw] 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
@@ -49,7 +49,7 @@ export function UseCases() {
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
+ <div className="grid grid-cols-2 gap-x-[72px] xl:gap-x-[10vw] gap-y-6
sm:grid-cols-1 sm:gap-y-4">
<UCCard
lead="Open-source Software Maintainers"
diff --git a/src/components/Sections/UserFlow.tsx b/src/components/Sections/UserFlow.tsx
index 660ac62bf..30080eb2d 100644
--- a/src/components/Sections/UserFlow.tsx
+++ b/src/components/Sections/UserFlow.tsx
@@ -11,29 +11,27 @@ const Card = ({ icon, text, children }: {
icon: React.ReactNode,
text: String,
children: React.ReactNode,
-}) => (<div className="w-[220px] mobile:mb-6 mobile:text-center">
+}) => (<div className="w-[220px] xl:w-[15vw] mobile:mb-6 mobile:text-center">
<div className="flex flex-col items-center
- bg-primary-100 w-[220px] h-[140px] rounded-[6px]
+ bg-primary-100 w-[220px] xl:w-[15vw] h-[140px] rounded-[6px]
border-primary-500 border-[1px] border-solid
">
<div className="mt-[40px]">{icon}</div>
<div className="mt-[10px] text-heading4 font-inter font-semibold text-primary-800">{text}</div>
</div>
- <div className="mt-5 text-label18 font-inter pr-3
- mobile:text-label14 mobile:mt-3">{children}</div>
+ <div className="mt-5 text-label18 font-inter pl-1 text-neutral-500">{children}</div>
</div>)
-const Arrow = () => <div className="h-[140px] flex items-center mobile:hidden"><BlueArrow /></div>
+const Arrow = () => <div className="h-[140px] flex items-center"><BlueArrow className="xl:w-[3.33vw]" /></div>
export function UserFlow() {
return (
- <div className="flex flex-col relative items-center
- sm:hidden">
+ <div className="hidden flex-col relative items-center
+ xl:flex">
<span
- className="section-title text-center mt-[72px] mb-6
- mobile:m-[0]"
+ className="section-title text-center mt-[72px] mb-6"
>User Flow</span>
- <div className="flex mb-[72px] mobile:flex-col">
+ <div className="flex mb-[72px]">
<Card
icon={<UF1 width={40} height={40} />}
text="Set up DevLake"
diff --git a/tailwind.config.js b/tailwind.config.js
index aa74c97af..b1697a4d1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,7 @@ module.exports = {
},
screens: {
'xl': '1280px',
- 'sm': { 'max': '750px' },
+ 'sm': { 'max': '850px' },
'mobile': { 'max': '390px' },
},
spacing: {