From f11edab1c2abf144fd7f7657ca71c10f7abb022c Mon Sep 17 00:00:00 2001 From: Yue Yang Date: Wed, 1 Jun 2022 11:52:49 +0800 Subject: [PATCH] style: optimize homepage-tikv-users Signed-off-by: Yue Yang --- .gitignore | 1 + CONTRIBUTING.md | 4 +- assets/sass/style.sass | 100 +++++++++++++---------------------------- config.yaml | 2 +- data/users.yaml | 30 ++++++++----- layouts/index.html | 10 +++-- 6 files changed, 61 insertions(+), 86 deletions(-) diff --git a/.gitignore b/.gitignore index e7f4533..a8ac907 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ node_modules/ # Hugo-generated assets public/ resources/ +.hugo_build.lock # Ruby assets .bundle/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4ee5b02..f808aac 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,4 @@ -# Contributing to TiVK documentation +# Contributing to TiKV documentation We welcome contributions to help improve the TiKV documentation! @@ -178,4 +178,4 @@ author: The author ### Adding an adopter -Add the adopter to `data/adopters.yaml` using the format of existing datums. \ No newline at end of file +Add the adopter to `data/adopters.yaml` using the format of existing datums. diff --git a/assets/sass/style.sass b/assets/sass/style.sass index 2eb37d9..7477560 100644 --- a/assets/sass/style.sass +++ b/assets/sass/style.sass @@ -1,37 +1,30 @@ +@charset "utf-8" + +@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;600;700&family=Titillium+Web:wght@300;400;600;700&display=swap') {{ $fontAwesomeVersion := site.Params.assets.fontAwesomeVersion }} {{ $fontAwesomeUrl := printf "https://use.fontawesome.com/releases/v%s/css/all.css" $fontAwesomeVersion }} -@charset "utf-8" -@import url("https://fonts.googleapis.com/icon?family=Titillium+Web:300,400,600,700|Inconsolata:300,400,600,700") @import url("{{ $fontAwesomeUrl }}") -// Misc -$twitter-blue: #1da1f3 +@import 'bulma/sass/utilities/initial-variables.sass'; // TiKV variables $tikv-red: #ed1a3b $tikv-blue: #353558 -$light-blue: #3D3FEA +$bright-blue: #3D3FEA $footer-hover-blue: #00AEEF -@import "bulma/sass/utilities/initial-variables" -@import "bulma/sass/utilities/functions" -@import "bulma/sass/utilities/derived-variables" - -$colors: mergeColorMaps(("twitter-blue": ($twitter-blue, $white)), $colors) - -@import "bulma/bulma" -@import "bulma/sass/grid/columns" +// Misc +$twitter-blue: #1da1f3 +$twitter-blue-invert: findColorInvert($twitter-blue); +$custom-colors: ("twitter-blue": ($twitter-blue, $twitter-blue-invert)); // Bulma variable overrides $red: $tikv-red $blue: $tikv-blue $primary: $red $secondary: #0D0F2C -$link: $red -$danger: $orange -$btn-blue-color: $light-blue -$family-sans-serif: "Titillium Web", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif -$family-monospace: "Inconsolata", monosapce +$link: $bright-blue +$link-hover: $bright-blue $notification-padding: 1rem 1rem $navbar-dropdown-radius: none $navbar-dropdown-boxed-shadow: none @@ -49,7 +42,10 @@ $LH: 1.75 $M2: #F7F8F9 $B3: #172D72 +$family-primary: 'Titillium Web', $family-sans-serif +$family-monospace: 'Inconsolata', monospace +@import "bulma/bulma" =logo($times) margin: 0 auto @@ -105,14 +101,8 @@ $B3: #172D72 .card-content padding: 0 2rem 2rem - a:hover - color: $light-blue - text-decoration: underline - - - -a - color: $light-blue +a:not(.button):hover + text-decoration: underline .docs-content padding-bottom: 8rem @@ -161,14 +151,6 @@ a .scenario margin-top: 2.5rem - .scenario, - .desc - a - color: $light-blue - - &:hover - text-decoration: underline - .homepage-why-tikv background-color: $M2 @@ -176,28 +158,19 @@ a @include is-customized-card .homepage-tikv-users - .columns.is-variable - --columnGap: 4rem + .logo-wrapper + display: flex + justify-content: center + align-items: center - +mobile - --columnGap: 3rem + & > img + width: 75% - .column - flex: none - width: 20% - padding: 5rem - - +touch - width: 50% - - a, a:hover - color: $light-blue + .logo-tidbcloud + transform: scale(1.25) .button margin: 4rem - color: #ffffff - border: none - background-color: $btn-blue-color .homepage-get-started background-color: $M2 @@ -207,7 +180,7 @@ a .card-header padding: 1rem 2rem - background-color: $light-blue + background-color: $bright-blue border-radius: 10px 10px 0 0 .card-header-title @@ -218,11 +191,10 @@ a line-height: 2 a - color: #2C2C2C + color: $text &:hover - color: $light-blue - text-decoration: underline + color: $bright-blue .hero.is-primary background-color: $B3 @@ -237,11 +209,11 @@ a color: #000 &.is-active - color: $light-blue + color: $bright-blue font-weight: 700 &:hover - color: $light-blue + color: $bright-blue ul @@ -335,9 +307,9 @@ a .is-navbar-version margin-left: 1rem - background-color: $light-blue + background-color: $bright-blue color: white - border: 1px solid $light-blue + border: 1px solid $bright-blue padding: .25rem .5rem border-radius: 5px @@ -365,9 +337,6 @@ a color: #2C2C2C font-weight: bold - &:hover - color: $light-blue - .navbar-dropdown border-top: none .section @@ -384,13 +353,6 @@ a font-weight: bold font-size: 1.5rem !important - a.is-link - color: #2E2FFF !important - text-decoration: none !important - - &:hover - text-decoration: underline !important - .buttons margin-top: 2.5rem diff --git a/config.yaml b/config.yaml index 7c55d82..4a9d790 100644 --- a/config.yaml +++ b/config.yaml @@ -57,7 +57,7 @@ params: cncf-black: "img/logos/cncf-color.png" card: "img/logos/card.png" assets: - fontAwesomeVersion: "5.3.1" + fontAwesomeVersion: "5.15.4" js: ["jquery-3.3.1", "anchor", "app"] css: ["syntax"] socialmedia: diff --git a/data/users.yaml b/data/users.yaml index 43309b3..e2282b5 100644 --- a/data/users.yaml +++ b/data/users.yaml @@ -1,10 +1,20 @@ -- logo: img/homepage/logo-dailymotion.png -- logo: img/homepage/logo-ZaloPay.png -- logo: img/homepage/logo-pingan.png -- logo: img/homepage/logo-JDCloud.png -- logo: img/homepage/logo-tidbcloud.png -- logo: img/homepage/logo-meitu.png -- logo: img/homepage/logo-zhuanzhuan.png -- logo: img/homepage/logo-ctrip.png -- logo: img/homepage/logo-tuya.png -- logo: img/homepage/logo-juicefs.svg +- name: dailymotion + logo: img/homepage/logo-dailymotion.png +- name: ZaloPay + logo: img/homepage/logo-ZaloPay.png +- name: pingan + logo: img/homepage/logo-pingan.png +- name: JDCloud + logo: img/homepage/logo-JDCloud.png +- name: tidbcloud + logo: img/homepage/logo-tidbcloud.png +- name: meitu + logo: img/homepage/logo-meitu.png +- name: zhuanzhuan + logo: img/homepage/logo-zhuanzhuan.png +- name: ctrip + logo: img/homepage/logo-ctrip.png +- name: tuya + logo: img/homepage/logo-tuya.png +- name: juicefs + logo: img/homepage/logo-juicefs.svg diff --git a/layouts/index.html b/layouts/index.html index f01d3e9..cb005e7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -93,15 +93,17 @@

Who are using TiKV

-
+
{{ range $users }} -
- tikv user logo +
+
+ {{ .name }} +
{{ end }}
- Case Studies + Case Studies

TiKV is a Cloud Native Computing Foundation graduate project