From 06bf14359a6161ada4806252161355670c1342d0 Mon Sep 17 00:00:00 2001 From: Laffery <49607541+Laffery@users.noreply.github.com> Date: Tue, 18 Jun 2024 14:42:58 +0800 Subject: [PATCH] [docs][minor] Optimize styles of the Flink CDC index page This closes #3420 --- docs/assets/_custom.scss | 57 +++++++++++++++++++++++++++++++++++++++ docs/content.zh/_index.md | 14 +++++----- docs/content/_index.md | 14 +++++----- 3 files changed, 73 insertions(+), 12 deletions(-) diff --git a/docs/assets/_custom.scss b/docs/assets/_custom.scss index 3a5fbc159..83b902858 100644 --- 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; + } + } } \ No newline at end of file diff --git a/docs/content.zh/_index.md b/docs/content.zh/_index.md index c54c1d02e..dd52c5863 100644 --- 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 index c54c1d02e..dd52c5863 100644 --- 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>