[incubator-seatunnel-website] branch main updated: small screen and mobile css style adaptation (#15)

[ki...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

kirs pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel-website.git


The following commit(s) were added to refs/heads/main by this push:
     new abb62a2  small screen and mobile css style adaptation (#15)
abb62a2 is described below

commit abb62a2559c078ba958e76259cdf92f260d066e5
Author: benjobs <be...@qq.com>
AuthorDate: Mon Dec 27 21:33:38 2021 +0800

    small screen and mobile css style adaptation (#15)
---
 src/css/custom.css        |  2 +-
 src/pages/home/index.jsx  |  2 +-
 src/pages/home/index.less | 17 ++++++++++-------
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index b417a02..16008a6 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -44,7 +44,7 @@ html {
 }
 
 .navbar__link {
-  font-size: 16px;
+  font-size: 15px;
   font-family: PingFangSC-Regular, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   font-weight: 500;
   padding: 15px;
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 9bbc609..4a8b291 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -57,7 +57,7 @@ export default function () {
                 <div className="block">
                     <h1 className="main_subtitle text_center">{dataSource.common.architecture}</h1>
                     <div className="item_block" style={{position: 'relative'}}>
-                        <p className="paragraph" style={{width: '750px'}}>{dataSource.home.architecture.desc}</p>
+                        <p className="paragraph">{dataSource.home.architecture.desc}</p>
                         <div className="bold_dot" style={{top: '64px', left: '416px'}}></div>
                         <div className="bold_dot" style={{top: '700px', left: '240px'}}></div>
                         <img src={useBaseUrl('/home/processes.svg')} alt="Architecture" className="architecture-image"/>
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index aaa582d..508b5e5 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -27,7 +27,8 @@
   &.feature {
     background-color: rgba(219, 238, 253, 0.3);
     .block {
-      width: 1410px;
+      //width: 1410px;
+      width: 80%;
     }
   }
 
@@ -56,7 +57,7 @@
 
   .main_subtitle {
     margin-bottom: 40px;
-    font-size: 38px;
+    font-size: 35px;
     font-weight: 400;
     line-height: 46px;
   }
@@ -65,6 +66,8 @@
     padding: 20px 0;
 
     .paragraph {
+      padding-left: 50px;
+      width: 750px;
       font-size: 18px;
       color: #4A4A4A;
       line-height: 26px;
@@ -213,7 +216,7 @@
     width: 100%;
 
     .feature_item {
-      width: 320px;
+      width: 24%;
       height: 320px;
       margin-bottom: 20px;
       border-radius: 2px;
@@ -247,7 +250,7 @@
         color: #333;
         font-weight: 400;
         line-height: 32px;
-        font-size: 25px;
+        font-size: 22px;
         margin-top: 20px;
       }
 
@@ -277,7 +280,7 @@
       margin-bottom: 50px;
 
       .apache {
-        font-size: 5.5rem;
+        font-size: 5rem;
         font-weight: lighter;
         color: #0f1223;
         letter-spacing: 2px;
@@ -294,7 +297,7 @@
         -webkit-background-clip: text;
         -webkit-box-decoration-break: clone;
         font-weight: lighter;
-        font-size: 5.5rem;
+        font-size: 5rem;
         margin-right: 8px;
         margin-left: 10px;
       }
@@ -315,7 +318,7 @@
 
     .main_slogan {
       margin-bottom: 50px;
-      font-size: 25px;
+      font-size: 24px;
       color: #0f1223;
       text-align: center;
       line-height: 32px;