This is an automated email from the ASF dual-hosted git repository.
leonard pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/flink-cdc.git
The following commit(s) were added to refs/heads/master by this push:
new 06bf14359 [docs][minor] Optimize styles of the Flink CDC index page
06bf14359 is described below
commit 06bf14359a6161ada4806252161355670c1342d0
Author: Laffery <[email protected]>
AuthorDate: Tue Jun 18 14:42:58 2024 +0800
[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>
