style: optimize homepage-tikv-users

Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>
This commit is contained in:
Yue Yang 2022-06-01 11:52:49 +08:00
parent 51bdbc0ce3
commit f11edab1c2
6 changed files with 61 additions and 86 deletions

1
.gitignore vendored
View File

@ -7,6 +7,7 @@ node_modules/
# Hugo-generated assets
public/
resources/
.hugo_build.lock
# Ruby assets
.bundle/

View File

@ -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.
Add the adopter to `data/adopters.yaml` using the format of existing datums.

View File

@ -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

View File

@ -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:

View File

@ -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

View File

@ -93,15 +93,17 @@
<section class="section homepage-tikv-users has-text-centered">
<div class="container">
<h2 class="title section-title">Who are using TiKV</h2>
<div class="columns is-multiline is-mobile is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen">
<div class="columns is-multiline is-mobile">
{{ range $users }}
<div class="column">
<img src="{{ .logo }}" alt="tikv user logo" />
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
<div class="logo-wrapper">
<img class="logo-{{ .name }}" src="{{ .logo }}" alt="{{ .name }}" />
</div>
</div>
{{ end }}
</div>
<a class="button" href="/adopters/">Case Studies</a>
<a class="button is-link" href="/adopters/">Case Studies</a>
<p class="title is-size-4 is-size-5-mobile">
TiKV is a <a href="https://www.cncf.io/" target="_blank">Cloud Native Computing Foundation</a> graduate project