[docs][minor] Optimize styles of the Flink CDC index page

This closes #3420
apache · Jun 18, 2024 · f20ade3 · f20ade3
1 parent 4444e04
commit f20ade3
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 12 deletions.
diff --git a/docs/assets/_custom.scss b/docs/assets/_custom.scss
@@ -250,6 +250,7 @@ pre.chroma code {
     }
 
     .link-as-button {
+        display: inline-block;
         transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 300ms;
@@ -298,6 +299,10 @@ pre.chroma code {
         flex-direction: column;
     }
 
+    .flex-row {
+        flex-direction: row;
+    }
+
     .flex-shrink {
         flex-shrink: 1;
     }
@@ -317,6 +322,10 @@ pre.chroma code {
         justify-content: center;
     }
 
+    .justify-between {
+        justify-content: space-between;
+    }
+
     .w-1\/2 {
         width: 50%;
     }
@@ -377,6 +386,14 @@ pre.chroma code {
         margin-right: auto;
     }
 
+    .ml-0 {
+        margin-left: 0;
+    }
+
+    .gap-6 {
+        margin-bottom: 1.5rem;
+    }
+
     .p-0 {
         padding: 0;
     }
@@ -401,6 +418,11 @@ pre.chroma code {
         padding-bottom: 2rem;
     }
 
+    .py-12 {
+        padding-top: 3rem;
+        padding-bottom: 3rem;
+    }
+
     .m-8 {
         margin: 2rem;
     }
@@ -423,6 +445,10 @@ pre.chroma code {
         margin-top: 1.5rem;
     }
 
+    .mt-8 {
+        margin-top: 2rem;
+    }
+
     .-mt-8 {
         margin-top: -2rem;
     }
@@ -508,4 +534,35 @@ pre.chroma code {
             margin-right: 0;
         }
     }
+
+    @media (min-width: 1280px) {
+        .xl\:mt-0 {
+            margin-top: 0;
+        }
+        .xl\:ml-16 {
+            margin-left: 4rem;
+        }
+        .xl\:items-start {
+            align-items: flex-start;
+        }
+        .xl\:text-left {
+            text-align: left;
+        }
+        .xl\:flex-row {
+            flex-direction: row;
+        }
+        .xl\:justify-between {
+            justify-content: space-between;
+        }
+        .xl\:w-\[max-content\] {
+            width: max-content;
+        }
+        .xl\:min-w-\[max-content\] {
+            min-width: max-content;
+        }
+        .xl\:my-auto {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+    }
 }
diff --git a/docs/content.zh/_index.md b/docs/content.zh/_index.md
@@ -23,19 +23,21 @@ under the License.
 -->
 
 <div class="index-wrapper">
-    <div class="top-container bg-purple">
-         <div class="flex flex-col w-full md:w-3/5 justify-center items-start text-center md:text-left">
+    <div class="top-container bg-purple py-12 block flex xl:items-start justify-between flex-col xl:flex-row">
+        <div class="flex flex-col w-full xl:w-[max-content] xl:min-w-[max-content] justify-center text-center xl:text-left">
             <h1 class="header-1 font-bold text-white leading-tight">
                 Flink CDC
             </h1>
             <p class="leading-normal text-xl text-white">
                 A streaming data integration tool
             </p>
-            <a href="{{< ref "docs/get-started/introduction" >}}" class="link-as-button mx-auto bg-white text-black font-bold my-4 px-8">
-                Quick Start
-            </a>
+            <div class="text-center xl:text-left">
+                <a href="{{< ref "docs/get-started/introduction" >}}" class="mx-auto link-as-button bg-white text-black font-bold px-8">
+                    Quick Start
+                </a>
+            </div>
         </div>
-        <div class="w-full md:w-3/5 py-6 text-center">
+        <div class="w-full text-center mt-8 xl:mt-0 ml-0 xl:ml-16">
             {{< img src="/fig/cdc-flow.png" alt="Flink CDC Flow" >}}
         </div>
     </div>

diff --git a/docs/content/_index.md b/docs/content/_index.md
@@ -23,19 +23,21 @@ under the License.
 -->
 
 <div class="index-wrapper">
-    <div class="top-container bg-purple">
-         <div class="flex flex-col w-full md:w-3/5 justify-center items-start text-center md:text-left">
+    <div class="top-container bg-purple py-12 block flex xl:items-start justify-between flex-col xl:flex-row">
+        <div class="flex flex-col w-full xl:w-[max-content] xl:min-w-[max-content] justify-center text-center xl:text-left">
             <h1 class="header-1 font-bold text-white leading-tight">
                 Flink CDC
             </h1>
             <p class="leading-normal text-xl text-white">
                 A streaming data integration tool
             </p>
-            <a href="{{< ref "docs/get-started/introduction" >}}" class="link-as-button mx-auto bg-white text-black font-bold my-4 px-8">
-                Quick Start
-            </a>
+            <div class="text-center xl:text-left">
+                <a href="{{< ref "docs/get-started/introduction" >}}" class="mx-auto link-as-button bg-white text-black font-bold px-8">
+                    Quick Start
+                </a>
+            </div>
         </div>
-        <div class="w-full md:w-3/5 py-6 text-center">
+        <div class="w-full text-center mt-8 xl:mt-0 ml-0 xl:ml-16">
             {{< img src="/fig/cdc-flow.png" alt="Flink CDC Flow" >}}
         </div>
     </div>