This is an automated email from the ASF dual-hosted git repository.
zihaoxiang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler-website.git
The following commit(s) were added to refs/heads/master by this push:
new 05eb1b04c9 Fix homepage layout alignment and responsiveness (#993)
05eb1b04c9 is described below
commit 05eb1b04c9757e29dda7fbc5e1215d7b177a83ac
Author: Prakash Kumar <[email protected]>
AuthorDate: Wed Feb 11 07:46:03 2026 +0530
Fix homepage layout alignment and responsiveness (#993)
---
src/components/Connect/index.scss | 67 ++++++++++--
src/components/Footer/index.scss | 131 ++++++++++++++++++++---
src/views/Home/Events.jsx | 4 +-
src/views/Home/Main.jsx | 4 +-
src/views/Home/community.scss | 210 ++++++++++++++++++++++++++----------
src/views/Home/events.scss | 125 +++++++++++++++++++---
src/views/Home/features.scss | 76 ++++++++++++--
src/views/Home/index.scss | 216 ++++++++++++++++++++++++++++++--------
src/views/Home/tasks.scss | 64 +++++++----
src/views/Home/why.scss | 96 +++++++++++++++--
10 files changed, 821 insertions(+), 172 deletions(-)
diff --git a/src/components/Connect/index.scss
b/src/components/Connect/index.scss
index 33305f56c6..7e469114f6 100644
--- a/src/components/Connect/index.scss
+++ b/src/components/Connect/index.scss
@@ -1,5 +1,6 @@
.connect {
- height: 380px;
+ min-height: 380px;
+ height: auto;
background-color: #0097e0;
text-align: center;
width: 100%;
@@ -7,29 +8,62 @@
flex-direction: column;
align-items: center;
justify-content: center;
+ padding: 60px 20px;
+ box-sizing: border-box;
+
+ @media screen and (max-width: 768px) {
+ min-height: 320px;
+ padding: 50px 20px;
+ }
+
+ @media screen and (max-width: 640px) {
+ min-height: 280px;
+ padding: 40px 16px;
+ }
&-title {
font-weight: 700;
color: #ffffff;
font-size: 50px;
- line-height: 50px;
+ line-height: 1.2;
padding: 0px 40px 40px;
+ max-width: 900px;
+
+ @media screen and (max-width: 1024px) {
+ font-size: 42px;
+ padding: 0px 20px 30px;
+ }
+
+ @media screen and (max-width: 768px) {
+ font-size: 32px;
+ padding: 0px 16px 24px;
+ }
@media screen and (max-width: 640px) {
- font-size: 7vw;
+ font-size: 26px;
+ padding: 0px 10px 20px;
}
}
+
&-desc {
color: #ffffff;
font-size: 18px;
- line-height: 18px;
- padding-top: 20px;
+ line-height: 1.6;
+ padding: 20px 20px 0;
+ max-width: 800px;
+
+ @media screen and (max-width: 768px) {
+ font-size: 16px;
+ padding: 16px 16px 0;
+ }
@media screen and (max-width: 640px) {
font-size: 14px;
- line-height: 2;
+ padding: 12px 10px 0;
+ line-height: 1.8;
}
}
+
.ant-btn {
width: 219px;
height: 60px;
@@ -42,9 +76,28 @@
font-size: 18px;
margin-top: 60px;
vertical-align: middle;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+
+ @media screen and (max-width: 768px) {
+ width: 200px;
+ height: 54px;
+ font-size: 16px;
+ margin-top: 40px;
+ }
@media screen and (max-width: 640px) {
- margin-top: 20px;
+ width: 180px;
+ height: 48px;
+ font-size: 15px;
+ margin-top: 30px;
+ }
+
+ &:hover {
+ background-color: #f0f0f0;
+ color: #0097e0;
}
}
}
diff --git a/src/components/Footer/index.scss b/src/components/Footer/index.scss
index 66c8ebf9e8..a731bd2d3e 100644
--- a/src/components/Footer/index.scss
+++ b/src/components/Footer/index.scss
@@ -3,15 +3,21 @@
.footer {
width: 100%;
- height: $footer-height;
+ min-height: $footer-height;
+ height: auto;
background-color: rgba(14, 66, 183, 1);
display: flex;
justify-content: center;
color: #fff;
box-sizing: border-box;
+ padding: 40px 20px;
+
+ @media screen and (max-width: 768px) {
+ padding: 30px 16px;
+ }
@media screen and (max-width: 640px) {
- padding-top: 40px;
+ padding: 30px 16px 40px;
}
&-content {
@@ -23,11 +29,26 @@
}
&-links {
- height: 108px;
+ min-height: 80px;
+ height: auto;
display: flex;
justify-content: space-between;
align-items: center;
+ flex-wrap: wrap;
+ gap: 8px 0;
width: 100%;
+ padding: 16px 0;
+
+ @media screen and (max-width: 1024px) {
+ gap: 12px 0;
+ }
+
+ @media screen and (max-width: 768px) {
+ flex-direction: column;
+ gap: 0;
+ padding: 10px 0;
+ justify-content: center;
+ }
@media screen and (max-width: 640px) {
display: none;
@@ -36,72 +57,156 @@
&-link {
color: var(--white);
- font-size: 22px;
+ font-size: 20px;
font-weight: bold;
text-align: center;
text-decoration: none;
- // &:not(:first-child) {
- // padding-left: 55px;
- // }
+ padding: 8px 16px;
+
&:hover {
opacity: 0.6;
}
- @media screen and (max-width: 640px) {
- font-size: 12px;
+ @media screen and (max-width: 1024px) {
+ font-size: 18px;
+ padding: 6px 12px;
+ }
+
+ @media screen and (max-width: 768px) {
+ font-size: 16px;
+ padding: 8px 10px;
}
}
.ant-divider {
background-color: var(--white);
- // margin-right: 55px;
+
+ @media screen and (max-width: 768px) {
+ display: none;
+ }
}
&-desc {
display: flex;
justify-content: space-between;
+ align-items: flex-start;
width: 100%;
+ margin-top: 20px;
+ gap: 30px;
+
+ @media screen and (max-width: 768px) {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 24px;
+ }
+ }
+
+ &-left {
+ flex: 1;
+ min-width: 0;
+
+ @media screen and (max-width: 768px) {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
}
+
&-logo-white {
width: 244px;
height: 48.67px;
background-image: url("../../images/logo_white.webp");
@include bg-100;
}
+
&-copyright {
- width: 647px;
+ max-width: 647px;
+ width: 100%;
margin-top: 10px;
+ @media screen and (max-width: 768px) {
+ max-width: 100%;
+ font-size: 14px;
+ line-height: 1.6;
+ }
+
@media screen and (max-width: 640px) {
- width: 100%;
font-size: 12px;
}
}
+
&-right {
+ flex-shrink: 0;
+
+ @media screen and (max-width: 768px) {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ // Show on tablet, hide only on small mobile
@media screen and (max-width: 640px) {
- display: none;
+ display: flex;
}
}
+
&-copyright,
&-email {
color: #ffffff;
font-size: 16px;
line-height: 30px;
+
+ @media screen and (max-width: 768px) {
+ font-size: 14px;
+ line-height: 1.6;
+ }
+
+ @media screen and (max-width: 640px) {
+ font-size: 12px;
+ }
}
+
&-email {
margin-top: 18px;
+
+ @media screen and (max-width: 768px) {
+ margin-top: 12px;
+ }
}
+
&-contacts {
display: flex;
align-items: center;
+
+ @media screen and (max-width: 480px) {
+ flex-direction: column;
+ gap: 12px;
+ }
+
&-label {
font-size: 22px;
font-weight: bold;
margin-right: 20px;
+
+ @media screen and (max-width: 768px) {
+ font-size: 18px;
+ margin-right: 16px;
+ }
+
+ @media screen and (max-width: 480px) {
+ margin-right: 0;
+ margin-bottom: 4px;
+ }
}
+
.anticon {
font-size: 26px;
color: #fff;
+
+ @media screen and (max-width: 768px) {
+ font-size: 22px;
+ }
}
}
}
diff --git a/src/views/Home/Events.jsx b/src/views/Home/Events.jsx
index cfd6ad3692..5856ad6e9f 100644
--- a/src/views/Home/Events.jsx
+++ b/src/views/Home/Events.jsx
@@ -24,8 +24,8 @@ export const Events = () => {
{event.imgName ? (
<Image
src={`/img/${event.imgName}`}
- width={504}
- height={278}
+ preview={false}
+ style={{ width: '100%', height: 'auto' }}
/>
) : (
""
diff --git a/src/views/Home/Main.jsx b/src/views/Home/Main.jsx
index b036c3929c..273e4cef5d 100644
--- a/src/views/Home/Main.jsx
+++ b/src/views/Home/Main.jsx
@@ -32,8 +32,8 @@ export const Main = ({ star, fork }) => {
<div>With Low-Code</div>
</h1>
<div className="home-desc-subtitle">{t("desc")}</div>
- <div>
- <Space>
+ <div className="home-desc-buttons">
+ <Space wrap size={[12, 12]}>
<Button
type="primary"
shape="round"
diff --git a/src/views/Home/community.scss b/src/views/Home/community.scss
index ea4f1b2c6c..150cc5cbb0 100644
--- a/src/views/Home/community.scss
+++ b/src/views/Home/community.scss
@@ -1,70 +1,168 @@
.home-community {
- padding-top: 100px;
- &-title {
- font-weight: 700;
- color: #031b3e;
- font-size: 50px;
- text-align: center;
- padding-bottom: 60px;
-
- @media screen and (max-width: 640px) {
- font-size: 7vw;
- }
+ padding-top: 100px;
+ width: 100%;
+
+ @media screen and (max-width: 768px) {
+ padding-top: 60px;
+ }
+
+ @media screen and (max-width: 640px) {
+ padding-top: 40px;
+ }
+
+ &-title {
+ font-weight: 700;
+ color: #031b3e;
+ font-size: 50px;
+ text-align: center;
+ padding-bottom: 60px;
+
+ @media screen and (max-width: 768px) {
+ font-size: 36px;
+ padding-bottom: 40px;
}
- &-content {
- display: flex;
- justify-content: space-between;
+
+ @media screen and (max-width: 640px) {
+ font-size: 28px;
+ padding-bottom: 30px;
+ }
+
+ @media screen and (max-width: 480px) {
+ font-size: 24px;
}
-
- &-total {
+ }
+
+ &-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 40px;
+
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ }
+ }
+
+ &-info {
+ flex-shrink: 0;
+
+ @media screen and (max-width: 1024px) {
display: flex;
+ flex-direction: column;
align-items: center;
text-align: center;
}
- &-item {
- padding-right: 50px;
+ }
+
+ &-total {
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ @media screen and (max-width: 480px) {
+ flex-direction: column;
+ gap: 20px;
+ }
+ }
+
+ &-item {
+ padding-right: 50px;
+
+ @media screen and (max-width: 768px) {
+ padding-right: 30px;
+ }
+
+ @media screen and (max-width: 480px) {
+ padding-right: 0;
+ }
+ }
+
+ &-amount {
+ font-weight: 700;
+ color: var(--primary-color);
+ font-size: 60px;
+
+ @media screen and (max-width: 768px) {
+ font-size: 48px;
+ }
+
+ @media screen and (max-width: 640px) {
+ font-size: 40px;
+ }
+
+ @media screen and (max-width: 480px) {
+ font-size: 36px;
}
- &-amount {
- font-weight: 700;
+ }
+
+ &-text {
+ color: #000000;
+ font-size: 20px;
+ margin-top: 8px;
+
+ @media screen and (max-width: 768px) {
+ font-size: 18px;
+ }
+
+ @media screen and (max-width: 640px) {
+ font-size: 16px;
+ }
+ }
+
+ .ant-divider-vertical {
+ height: 80px;
+ border-color: #707070;
+ margin-right: 50px;
+
+ @media screen and (max-width: 768px) {
+ height: 60px;
+ margin-right: 30px;
+ }
+
+ @media screen and (max-width: 480px) {
+ display: none;
+ }
+ }
+
+ &-icons {
+ margin-top: 30px;
+ margin-bottom: 50px;
+
+ @media screen and (max-width: 640px) {
+ margin-top: 20px;
+ margin-bottom: 30px;
+ }
+ }
+
+ .anticon {
+ font-size: 30px;
+
+ @media screen and (max-width: 640px) {
+ font-size: 24px;
+ }
+
+ &:hover {
color: var(--primary-color);
- font-size: 60px;
-
- @media screen and (max-width: 640px) {
- font-size: 10vw;
- }
- }
- &-text {
- color: #000000;
- font-size: 20px;
- margin-top: 8px;
-
- @media screen and (max-width: 640px) {
- font-size: 16px;
- }
- }
- .ant-divider-vertical {
- height: 80px;
- border-color: #707070;
- margin-right: 50px;
- }
- &-icons {
- margin-top: 30px;
- margin-bottom: 50px;
- }
- .anticon {
- font-size: 30px;
- &:hover {
- color: var(--primary-color);
- }
- }
- .ant-image {
- @media screen and (max-width: 640px) {
- display: none;
- }
}
+ }
+
+ .ant-image {
+ max-width: 50%;
+
+ @media screen and (max-width: 1024px) {
+ max-width: 100%;
+ width: 100%;
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+ }
}
+
.home-community-icons .home-community-buttons:hover,
.home-community-icons .home-community-buttons:active,
.home-community-icons .home-community-buttons:focus {
- background-color: transparent !important;
-}
\ No newline at end of file
+ background-color: transparent !important;
+}
diff --git a/src/views/Home/events.scss b/src/views/Home/events.scss
index 564b63117d..a4733f6cbe 100644
--- a/src/views/Home/events.scss
+++ b/src/views/Home/events.scss
@@ -6,49 +6,120 @@
margin-top: -100px;
position: relative;
z-index: 3;
+ padding: 0 20px;
+ box-sizing: border-box;
+
+ @media screen and (max-width: 768px) {
+ margin-top: -80px;
+ }
+
+ @media screen and (max-width: 640px) {
+ margin-top: -60px;
+ }
&-item {
display: flex;
padding: 90px 46px 90px 72px;
- height: 480px;
+ min-height: 480px;
+ height: auto;
background-color: #ffffff;
border-radius: 27px;
box-shadow: 0px 18px 31px rgba(0, 0, 0, 0.11);
box-sizing: border-box;
position: relative;
margin-bottom: 60px;
+ gap: 40px;
+
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ padding: 50px 40px;
+ min-height: auto;
+ }
+
+ @media screen and (max-width: 768px) {
+ padding: 40px 30px;
+ margin-bottom: 40px;
+ border-radius: 20px;
+ }
@media screen and (max-width: 640px) {
- padding: 20px;
- height: 300px;
+ padding: 30px 20px;
+ margin-bottom: 30px;
+ border-radius: 16px;
+ gap: 20px;
}
&-img {
width: 504px;
height: 278px;
border-radius: 20px;
- margin-right: 76px;
flex-shrink: 0;
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ height: auto;
+ max-width: 504px;
+ }
+
@media screen and (max-width: 640px) {
- display: none;
+ border-radius: 12px;
+ }
+
+ .ant-image {
+ width: 100%;
+
+ img {
+ width: 100%;
+ height: auto;
+ border-radius: 20px;
+
+ @media screen and (max-width: 640px) {
+ border-radius: 12px;
+ }
+ }
}
}
+
&-img img {
border-radius: 20px;
+
+ @media screen and (max-width: 640px) {
+ border-radius: 12px;
+ }
}
+
+ &-detail {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+
&-title {
font-weight: 700;
color: #031b3e;
font-size: 60px;
display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
.gradient-text {
- margin-left: 20px;
+ margin-left: 10px;
+
+ @media screen and (max-width: 640px) {
+ margin-left: 0;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ font-size: 40px;
}
@media screen and (max-width: 640px) {
- font-size: 7vw;
+ font-size: 32px;
+ }
+
+ @media screen and (max-width: 480px) {
+ font-size: 28px;
}
}
@@ -58,8 +129,15 @@
line-height: 48px;
margin-top: 20px;
+ @media screen and (max-width: 768px) {
+ font-size: 28px;
+ line-height: 1.3;
+ margin-top: 15px;
+ }
+
@media screen and (max-width: 640px) {
- font-size: 5vw;
+ font-size: 22px;
+ margin-top: 12px;
}
}
@@ -68,13 +146,34 @@
font-size: 18px;
line-height: 32px;
margin-top: 20px;
- height: 128px;
- overflow: hidden;
+ flex: 1;
+
+ @media screen and (max-width: 768px) {
+ font-size: 16px;
+ line-height: 1.6;
+ margin-top: 15px;
+ }
+
+ @media screen and (max-width: 640px) {
+ font-size: 14px;
+ line-height: 1.5;
+ margin-top: 12px;
+ }
}
+
&-btn {
- position: absolute;
- bottom: 46px;
- right: 46px;
+ margin-top: 20px;
+
+ @media screen and (max-width: 1024px) {
+ position: static;
+ margin-top: 24px;
+ }
+
+ @media screen and (min-width: 1025px) {
+ position: absolute;
+ bottom: 46px;
+ right: 46px;
+ }
}
}
}
diff --git a/src/views/Home/features.scss b/src/views/Home/features.scss
index 80bdea976c..3476c7b04e 100644
--- a/src/views/Home/features.scss
+++ b/src/views/Home/features.scss
@@ -2,14 +2,19 @@
display: flex;
flex-direction: column;
align-items: center;
+ width: 100%;
&-title {
font-weight: 700;
color: #031b3e;
font-size: 50px;
+ @media screen and (max-width: 768px) {
+ font-size: 36px;
+ }
+
@media screen and (max-width: 640px) {
- font-size: 7vw;
+ font-size: 28px;
}
}
@@ -18,10 +23,17 @@
display: flex;
margin-top: 60px;
justify-content: space-between;
+ gap: 20px;
- @media screen and (max-width: 640px) {
+ @media screen and (max-width: 1024px) {
flex-wrap: wrap;
- margin-top: 0px;
+ justify-content: center;
+ margin-top: 40px;
+ }
+
+ @media screen and (max-width: 640px) {
+ margin-top: 20px;
+ gap: 10px;
}
}
@@ -35,6 +47,22 @@
cursor: pointer;
background-color: transparent;
transition: 0.5s;
+ box-sizing: border-box;
+
+ @media screen and (max-width: 1024px) {
+ width: calc(50% - 20px);
+ max-width: 280px;
+ }
+
+ @media screen and (max-width: 640px) {
+ width: calc(50% - 10px);
+ padding: 15px 10px;
+ }
+
+ @media screen and (max-width: 480px) {
+ width: 100%;
+ max-width: 300px;
+ }
&-img {
width: 74px;
@@ -44,6 +72,20 @@
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
+
+ @media screen and (max-width: 768px) {
+ width: 60px;
+ height: 60px;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ @media screen and (max-width: 640px) {
+ width: 50px;
+ height: 50px;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ }
}
&-title {
@@ -52,8 +94,16 @@
font-size: 30px;
text-align: center;
+ @media screen and (max-width: 768px) {
+ font-size: 22px;
+ }
+
@media screen and (max-width: 640px) {
- font-size: 3.8vw;
+ font-size: 18px;
+ }
+
+ @media screen and (max-width: 480px) {
+ font-size: 20px;
}
}
@@ -61,24 +111,30 @@
margin-top: 20px;
color: #000000;
font-size: 14px;
- line-height: 1.3;
+ line-height: 1.5;
+ text-align: center;
+
+ @media screen and (max-width: 768px) {
+ font-size: 13px;
+ margin-top: 15px;
+ }
@media screen and (max-width: 640px) {
font-size: 12px;
- line-height: 1.5;
+ margin-top: 10px;
}
}
&:hover {
background-color: rgba(37, 99, 235, 0.1);
}
-
- @media screen and (max-width: 640px) {
- width: 38%;
- }
}
&-btn {
margin-top: 50px;
+
+ @media screen and (max-width: 640px) {
+ margin-top: 30px;
+ }
}
}
diff --git a/src/views/Home/index.scss b/src/views/Home/index.scss
index 014f129e1a..e9b48b4f32 100644
--- a/src/views/Home/index.scss
+++ b/src/views/Home/index.scss
@@ -5,61 +5,71 @@
display: flex;
flex-direction: column;
align-items: center;
+ overflow-x: hidden;
+
&-desc {
@include content-width;
- }
- &-github-buttons {
- margin-top: 42px;
- }
- .github-button {
+ padding: 0 20px;
+ box-sizing: border-box;
display: flex;
align-items: center;
- padding-inline-start: 0px !important;
+ justify-content: space-between;
+ gap: 30px;
- &-label {
- margin-left: 8px;
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ align-items: flex-start;
}
- &-left {
- height: 28px;
- line-height: 28px;
- color: #fff;
- background-color: rgba(112, 112, 112, 1);
- border-radius: 14px 0px 0px 14px;
- padding-left: 12px;
- padding-right: 12px;
- border: 1px solid rgba(112, 112, 112, 1);
- }
- &-right {
- color: #707070;
- font-size: 14px;
- padding-left: 12px;
- }
- }
- .github-fork {
- color: #707070;
- .ant-divider-vertical {
- background-color: #d9d9d9;
- }
- }
- &-desc {
- display: flex;
- align-items: center;
- justify-content: space-between;
&-text {
flex-shrink: 0;
+ max-width: 100%;
+
+ @media screen and (max-width: 1280px) {
+ max-width: 480px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ max-width: 100%;
+ width: 100%;
+ }
}
+
+ // Main carousel styles
.ant-carousel {
- width: 690px;
+ width: 650px;
+ flex-shrink: 0;
- @media screen and (max-width: 1280px) {
- display: none;
+ @media screen and (max-width: 1280px) and (min-width: 1025px) {
+ width: 480px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ max-width: 600px;
+ margin: 20px auto 0;
+ }
+
+ @media screen and (max-width: 640px) {
+ width: 100%;
+ margin: 16px auto 0;
+ }
+
+ img {
+ width: 100%;
+ height: auto;
}
}
+
.ant-carousel .slick-dots-bottom {
bottom: -40px;
+
+ @media screen and (max-width: 640px) {
+ bottom: -24px;
+ }
}
}
+
&-desc-title {
font-size: 50px;
line-height: 1.5;
@@ -67,10 +77,32 @@
margin-top: 0px;
margin-bottom: 32px;
+ @media screen and (max-width: 1280px) {
+ font-size: 42px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ font-size: 42px;
+ padding-top: 40px;
+ }
+
+ @media screen and (max-width: 768px) {
+ font-size: 36px;
+ padding-top: 30px;
+ margin-bottom: 20px;
+ }
+
@media screen and (max-width: 640px) {
- font-size: 7vw;
+ font-size: 28px;
+ padding-top: 20px;
+ margin-bottom: 16px;
+ }
+
+ @media screen and (max-width: 480px) {
+ font-size: 24px;
}
}
+
&-desc-subtitle {
width: 634px;
font-size: 16px;
@@ -78,9 +110,97 @@
line-height: 1.5;
margin-bottom: 50px;
+ @media screen and (max-width: 1280px) {
+ width: 100%;
+ max-width: 480px;
+ }
+
+ @media screen and (max-width: 768px) {
+ width: 100%;
+ font-size: 14px;
+ margin-bottom: 30px;
+ }
+
@media screen and (max-width: 640px) {
- width: 90vw;
- font-size: 3vw;
+ font-size: 14px;
+ margin-bottom: 24px;
+ }
+ }
+
+ &-desc-buttons {
+ .ant-space {
+ @media screen and (max-width: 480px) {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+ .ant-space-item {
+ width: 100%;
+
+ .ant-btn {
+ width: 100%;
+ }
+ }
+ }
+ }
+
+ .ant-btn-lg {
+ @media screen and (max-width: 640px) {
+ height: 38px;
+ font-size: 14px;
+ padding: 4px 20px;
+ }
+ }
+ }
+
+ &-github-buttons {
+ margin-top: 42px;
+
+ @media screen and (max-width: 640px) {
+ margin-top: 24px;
+ }
+
+ @media screen and (max-width: 480px) {
+ margin-top: 20px;
+ }
+ }
+
+ .github-button {
+ display: flex;
+ align-items: center;
+ padding-inline-start: 0px !important;
+
+ &-label {
+ margin-left: 8px;
+ }
+
+ &-left {
+ height: 28px;
+ line-height: 28px;
+ color: #fff;
+ background-color: rgba(112, 112, 112, 1);
+ border-radius: 14px 0px 0px 14px;
+ padding-left: 12px;
+ padding-right: 12px;
+ border: 1px solid rgba(112, 112, 112, 1);
+ }
+
+ &-right {
+ color: #707070;
+ font-size: 14px;
+ padding-left: 12px;
+
+ @media screen and (max-width: 480px) {
+ font-size: 12px;
+ padding-left: 8px;
+ }
+ }
+ }
+
+ .github-fork {
+ color: #707070;
+ .ant-divider-vertical {
+ background-color: #d9d9d9;
}
}
@@ -91,10 +211,20 @@
padding-bottom: 200px;
overflow: hidden;
+ @media screen and (max-width: 768px) {
+ padding-top: 60px;
+ padding-bottom: 150px;
+ }
+
+ @media screen and (max-width: 640px) {
+ padding-top: 40px;
+ padding-bottom: 120px;
+ }
+
&-bg {
transform: rotate(-2deg);
opacity: 7%;
- width: 100%;
+ width: 120%;
height: 100%;
background-image: linear-gradient(
119.03deg,
@@ -104,15 +234,15 @@
);
position: absolute;
top: 0px;
- left: -20px;
+ left: -10%;
z-index: 1;
- min-width: 1200px;
}
&-content {
position: relative;
z-index: 2;
margin: 0 auto;
+ box-sizing: border-box;
@include content-width;
}
diff --git a/src/views/Home/tasks.scss b/src/views/Home/tasks.scss
index 14749e0011..0b58510068 100644
--- a/src/views/Home/tasks.scss
+++ b/src/views/Home/tasks.scss
@@ -3,8 +3,8 @@
.home-tasks {
width: 100%;
- height: 680px;
- padding-top: 96px;
+ min-height: 680px;
+ padding: 96px 16px 80px;
display: flex;
flex-direction: column;
align-items: center;
@@ -12,7 +12,8 @@
overflow: hidden;
@media screen and (max-width: 640px) {
- height: 120vw;
+ min-height: auto;
+ padding: 64px 12px;
}
&-bg {
@@ -30,7 +31,7 @@
z-index: 1;
@media screen and (max-width: 640px) {
- height: 100vw;
+ height: 100%;
}
}
@@ -45,45 +46,72 @@
@include content-width;
}
+
&-title {
font-weight: 700;
color: #031b3e;
font-size: 48px;
display: flex;
+ align-items: baseline;
+ justify-content: center;
+ gap: 12px;
margin-top: 80px;
+ text-align: center;
+ flex-wrap: wrap;
+ line-height: 1.2;
@media screen and (max-width: 640px) {
font-size: 5vw;
+ margin-top: 24px;
+ line-height: 1.3;
}
}
+
&-total {
- padding-left: 20px;
- padding-right: 20px;
+ padding: 0 8px;
font-size: 80px;
+ line-height: 1;
position: relative;
- top: -30px;
+ top: 0;
+
@media screen and (max-width: 640px) {
font-size: 10vw;
- top: -2vw;
}
}
+
&-wrap {
display: flex;
width: 100%;
+ overflow: hidden;
}
+
&-animation {
display: flex;
+
&:hover {
animation-play-state: paused;
}
}
+
&-list {
display: flex;
padding-top: 40px;
+
+ @media screen and (max-width: 640px) {
+ padding-top: 24px;
+ }
}
+
&-item {
margin-left: 50px;
- display: inline-block;
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+
+ @media screen and (max-width: 640px) {
+ margin-left: 24px;
+ }
+
&-img {
width: 125px;
height: 125px;
@@ -91,11 +119,12 @@
background-position: center;
@media screen and (max-width: 640px) {
- width: 16vw;
- height: 16vw;
- background-size: cover;
+ width: 56px;
+ height: 56px;
+ background-size: contain;
}
}
+
&-text {
color: #031b3e;
font-size: 12px;
@@ -103,18 +132,17 @@
text-align: center;
@media screen and (max-width: 640px) {
- width: 200%;
- transform: scale(0.8);
- margin-left: -50%;
+ font-size: 10px;
}
}
}
&-right {
- animation: 30s linear 0s infinite running slidein;
+ animation: 30s linear infinite slidein;
}
+
&-left {
- animation: 30s linear 0s infinite running slideout;
+ animation: 30s linear infinite slideout;
}
}
@@ -122,7 +150,6 @@
0% {
transform: translateX(-50%);
}
-
100% {
transform: translateX(0%);
}
@@ -132,7 +159,6 @@
0% {
transform: translateX(0%);
}
-
100% {
transform: translateX(-50%);
}
diff --git a/src/views/Home/why.scss b/src/views/Home/why.scss
index a674acc07a..942cf1c82f 100644
--- a/src/views/Home/why.scss
+++ b/src/views/Home/why.scss
@@ -4,10 +4,17 @@
.home-why {
@include content-width;
margin-top: 96px;
+ padding: 0 20px;
+ box-sizing: border-box;
+
+ @media screen and (max-width: 768px) {
+ margin-top: 60px;
+ }
@media screen and (max-width: 640px) {
- margin-top: 0px;
+ margin-top: 40px;
}
+
&-title {
font-weight: 700;
color: #031b3e;
@@ -15,57 +22,132 @@
display: flex;
justify-content: center;
align-items: center;
+ flex-wrap: wrap;
+ gap: 10px;
+
.gradient-text {
- margin-left: 20px;
+ margin-left: 10px;
+
+ @media screen and (max-width: 640px) {
+ margin-left: 0;
+ }
}
+
margin-bottom: 30px;
+ @media screen and (max-width: 768px) {
+ font-size: 40px;
+ }
+
@media screen and (max-width: 640px) {
- font-size: 8vw;
+ font-size: 32px;
+ margin-bottom: 20px;
+ }
+
+ @media screen and (max-width: 480px) {
+ font-size: 28px;
}
}
+ &-content {
+ overflow: hidden;
+ }
+
&-item {
display: flex !important;
justify-content: space-between;
align-items: center;
padding-bottom: 50px;
+ gap: 40px;
+
+ @media screen and (max-width: 1024px) {
+ flex-direction: column-reverse;
+ gap: 30px;
+ }
+
+ @media screen and (max-width: 640px) {
+ padding-bottom: 30px;
+ }
+
+ &-desc {
+ flex: 1;
+ min-width: 0;
+ }
+
&-title {
padding-top: 40px;
font-weight: 700;
color: #1a194d;
font-size: 40px;
+ @media screen and (max-width: 768px) {
+ font-size: 28px;
+ padding-top: 20px;
+ }
+
@media screen and (max-width: 640px) {
- font-size: 5vw;
- padding-top: 0px;
+ font-size: 24px;
+ padding-top: 10px;
}
}
+
&-slip {
margin-top: 30px;
margin-bottom: 50px;
+ padding-left: 20px;
+
+ @media screen and (max-width: 768px) {
+ margin-top: 20px;
+ margin-bottom: 30px;
+ }
+
+ @media screen and (max-width: 640px) {
+ margin-top: 16px;
+ margin-bottom: 24px;
+ }
}
+
&-label {
width: 30px;
height: 30px;
margin-right: 10px;
}
+
&-img {
width: 700px;
}
+
&-text {
color: #000000;
font-size: 16px;
padding: 10px 0px;
+
@media screen and (max-width: 640px) {
font-size: 14px;
+ padding: 6px 0;
}
}
+
.ant-image {
flex-shrink: 0;
+ max-width: 50%;
- @media screen and (max-width: 640px) {
- display: none;
+ @media screen and (max-width: 1024px) {
+ max-width: 100%;
+ width: 100%;
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+ }
+
+ // Button spacing on mobile
+ .ant-space {
+ @media screen and (max-width: 480px) {
+ flex-wrap: wrap;
+ gap: 12px !important;
}
}
}
