You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kvrocks.apache.org by tw...@apache.org on 2023/04/07 11:10:36 UTC
[incubator-kvrocks-website] branch main updated: Make the homepage mobile-friendly (#79)
This is an automated email from the ASF dual-hosted git repository.
twice pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kvrocks-website.git
The following commit(s) were added to refs/heads/main by this push:
new 5541602 Make the homepage mobile-friendly (#79)
5541602 is described below
commit 5541602ab0bcc4f4e2092eb4bc2533550a1a7213
Author: Just for Star <46...@users.noreply.github.com>
AuthorDate: Fri Apr 7 19:10:31 2023 +0800
Make the homepage mobile-friendly (#79)
---
src/components/HomepageFeatures/index.tsx | 33 ++++----
src/components/HomepageFeatures/styles.module.css | 93 +++++++++++++++++++---
src/pages/index.module.css | 67 +++++++++++++---
src/pages/index.tsx | 54 +++++++------
static/img/{feature-2.png => cluster.png} | Bin
static/img/{feature-3.png => high-available.png} | Bin
static/img/{feature-1.png => namespace.png} | Bin
static/img/{feature-4.png => replication.png} | Bin
8 files changed, 182 insertions(+), 65 deletions(-)
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index 636b0b5..d35e3fc 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -1,11 +1,11 @@
import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
-import feature0 from '/img/feature-0.png';
-import feature1 from '/img/feature-1.png';
-import feature2 from '/img/feature-2.png';
-import feature3 from '/img/feature-3.png';
-import feature4 from '/img/feature-4.png';
+import feature0 from '../../../static/img/feature-0.png';
+import namespace from '../../../static/img/namespace.png';
+import replication from '../../../static/img/replication.png';
+import highAvailable from '../../../static/img/high-available.png';
+import cluster from '../../../static/img/cluster.png'
type FeatureItem = {
imgPath:string;
@@ -15,8 +15,7 @@ type FeatureItem = {
const FeatureList: FeatureItem[] = [
{
- imgPath:feature1,
-
+ imgPath:namespace,
title: 'Namespace',
description: (
<>
@@ -25,7 +24,7 @@ const FeatureList: FeatureItem[] = [
),
},
{
- imgPath:feature2,
+ imgPath:replication,
title: 'Replication',
description: (
<>
@@ -34,7 +33,7 @@ const FeatureList: FeatureItem[] = [
),
},
{
- imgPath:feature3,
+ imgPath:highAvailable,
title: 'High Available',
description: (
<>
@@ -43,7 +42,7 @@ const FeatureList: FeatureItem[] = [
),
},
{
- imgPath:feature4,
+ imgPath:cluster,
title: 'Cluster',
description: (
<>
@@ -56,11 +55,11 @@ const FeatureList: FeatureItem[] = [
function Feature({imgPath,title, description}: FeatureItem) {
return (
<div className={clsx('col col--6')}>
- <div className="text--center padding-horiz--md" style={{width:'100%',height:'100%',margin:'50px 0px'}}>
- <img style={{width:'auto',height:'35%',marginBottom:'30px'}} src={imgPath} alt={title}/>
+ <div className="text--center padding-horiz--md" style={{width:"100%",height:"100%",margin:'30px 0px'}}>
+ <img className={styles.imgItem} src={imgPath} alt={title}/>
<h3>{title}</h3>
- <div style={{width:'100%',display:'flex',justifyContent:'center',alignItems:'center'}}>
- <p style={{fontFamily:'PingFang SC-Light',fontWeight:'light',color:'rgba(59, 61, 63, 1)',width:'55%'}}>{description}</p>
+ <div className={styles.itemDes}>
+ <p>{description}</p>
</div>
</div>
</div>
@@ -78,8 +77,8 @@ export default function HomepageFeatures(): JSX.Element {
<div className={styles.blueLine}>
<div></div>
</div>
- <p>Users can access Apache Kvrocks via any Redis client</p>
- {/* <div className={styles.redisCompatible}>
+ <p>Users can access Apache Kvrocks via any Redis client.</p>
+ <div className={styles.redisCompatible}>
<img src={feature0} alt='Redis Compatible'/>
<div className={styles.Pie}>
<div className='Pie round'></div>
@@ -87,7 +86,7 @@ export default function HomepageFeatures(): JSX.Element {
<div className={styles.tri}></div>
</div>
</div>
- </div> */}
+ </div>
</div>
</div>
{FeatureList.map((props, idx) => (
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index cd339b5..15c7dba 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@@ -5,11 +5,6 @@
width: 100%;
}
-.featureSvg {
- height: 200px;
- width: 200px;
-}
-
.blueLine {
width:100%;
display:flex;
@@ -34,7 +29,9 @@
display:flex;
flex-direction:row;
position:relative;
- padding-top:20px
+ padding-top:20px;
+ width:90%;
+ margin:10px 5%
}
.redisCompatible img{
@@ -44,7 +41,10 @@
}
.Pie{
- margin:60px 0
+ margin:60px 10%;
+ width: 240px;
+ height: auto;
+ padding: relative;
}
.Pie > div:first-child{
@@ -52,15 +52,17 @@
height:240px;
background-color:rgba(60, 119, 235, 1);
border-radius:50%;
- position:absolute;
- right:80px
}
.Pie > div:nth-child(2){
width:0;
height:0;
- position:absolute;
- right:250px
+ position: absolute;
+ margin: auto;
+ top: 0;
+ right: 0;
+ bottom: 60%;
+ left: 51%;
}
.tri{
@@ -68,5 +70,72 @@
border-right:20px solid transparent;
border-bottom:130px solid rgba(247, 136, 107, 1);
border-top:0;
- transform: rotate(150deg)
+ transform: rotate(150deg);
+}
+
+.imgItem{
+ width:auto;
+ height:35%;
+ margin-bottom:30px;
+}
+
+.itemDes{
+ width:100%;
+ display:flex;
+ justify-content:center;
+ align-items:center;
+ font-weight:light;
+ color:rgba(59, 61, 63, 1);
+}
+
+.itemDes p{
+ width: 50%;
+}
+
+@media screen and (max-width:820px) {
+ .redisCompatible{
+ flex-direction: column;
+ position: relative;
+ }
+
+ .redisCompatible img{
+ width:80%;
+ float:left;
+ margin:10px 10%
+ }
+
+ .Pie{
+ margin:10% 10% 0 10%;
+ width: 80%;
+ height: auto;
+ padding: relative;
+ }
+
+ .Pie > div:first-child{
+ width:10rem;
+ height:10rem;
+ margin-left: auto;
+ margin-right: auto;
+ background-color:rgba(60, 119, 235, 1);
+ border-radius:50%;
+ }
+
+ .Pie > div:nth-child(2){
+ width:0;
+ height:0;
+ position: absolute;
+ margin: auto;
+ top: 0%;
+ right: 28%;
+ bottom: 0;
+ left: 0;
+ }
+
+ .tri{
+ border-left:1rem solid transparent;
+ border-right:1rem solid transparent;
+ border-bottom:6rem solid rgba(247, 136, 107, 1);
+ border-top:0;
+ transform: rotate(150deg);
+ }
}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 2cc3658..7232ad0 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -5,21 +5,42 @@
.heroBanner {
padding: 4rem 0;
- text-align: center;
+ text-align: left;
position: relative;
overflow: hidden;
+ background-image:linear-gradient(to top, rgba(230, 239, 255, 1) , rgba(255, 255, 255, 1));
+ display: flex;
+ flex-direction: column;
}
-@media screen and (max-width: 996px) {
- .heroBanner {
- padding: 2rem;
- }
+.container{
+ width:100%;
+ display: flex;
+}
+
+.titles{
+ display: block;
+ margin: 0 0 0 10%;
+ width: 40%;
+}
+
+.tagline{
+ color:rgba(59, 61, 63, 1);
+ font-weight:light;
+ margin-top:2rem;
+}
+
+.image{
+ width: 40%;
+ margin-left: 5%;
}
.buttons {
+ width: 80%;
display: flex;
align-items: left;
justify-content: left;
+ margin-top:10px;
}
.buttons a{
@@ -28,7 +49,8 @@
background-color:white;
margin-right: 2rem;
color:rgba(0, 91, 244, 1);
- display:flex
+ display:flex;
+ border:1px solid rgba(0, 91, 244, 1);
}
.buttons a:first-child {
@@ -37,10 +59,35 @@
color:white
}
-.buttons a:nth-child(2){
- border:1px solid rgba(0, 91, 244, 1);
+@media screen and (max-width:820px){
+ .container{
+ flex-direction: column;
+ }
+
+ .titles{
+ width: 90%;
+ margin: 0 0 0 5%;
+ }
+
+ .image{
+ width: 90%;
+ margin-left: 5%;
+ margin-top: 1rem;
+ }
+
+ .buttons{
+ flex-direction: column;
+ width: 90%;
+ }
+
+ .buttons a{
+ width:12rem;
+ margin-top: 1rem;
+ }
}
-.buttons a:nth-child(3){
- border:1px solid rgba(0, 91, 244, 1);
+@media screen and (max-width: 996px) {
+ .heroBanner {
+ padding: 2rem;
+ }
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9692439..8ea5b33 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,38 +6,40 @@ import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import styles from './index.module.css';
-import Pic from '/img/mainPic.png';
+import Pic from '../../static/img/mainPic.png';
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
- <header className={clsx('hero hero--primary', styles.heroBanner)} style={{backgroundImage:'linear-gradient(to top, rgba(230, 239, 255, 1) , rgba(255, 255, 255, 1))',textAlign:'left',display:'flex'}}>
- <div className="container" style={{margin:'0 0 0 10%',width:'40%'}}>
- <h1 className="hero__title" style={{color:'black'}}>{siteConfig.title}</h1>
- <h2 className='hero__secondary__title' style={{color:'rgba(40, 117, 243, 1)'}}>(incubating)</h2>
- <div className="hero__subtitle" style={{color:'rgba(59, 61, 63, 1)',fontWeight:'Light',width:'30rem',marginTop:'2rem'}}>{siteConfig.tagline}</div>
- <div className={styles.buttons} style={{margin:'10rem 0 0 0'}}>
- <Link
- className="button button--secondary button--lg"
- to="/docs/getting-started">
- QUICK START
- </Link>
- <Link
- className="button button--secondary button--lg"
- to="https://github.com/apache/incubator-kvrocks">
- <div className='header-github-link' style={{marginRight:'10px'}}></div>
- GITHUB
- </Link>
- <Link
- className="button button--secondary button--lg"
- to="https://kvrocks.slack.com/join/shared_invite/zt-p5928e3r-OUAK8SUgC8GOceGM6dAz6w#/shared-invite/email">
- <div className='header-slack-link' style={{marginRight:'10px'}}></div>
- SLACK
- </Link>
+ <header className={clsx('hero hero--primary', styles.heroBanner)}>
+ <div className={clsx(styles.container)}>
+ <div className={clsx(styles.titles)}>
+ <h1 className="hero__title" style={{color:'black'}}>{siteConfig.title}</h1>
+ <h2 className='hero__secondary__title' style={{color:'rgba(40, 117, 243, 1)'}}>(incubating)</h2>
+ <div className={clsx('hero__subtitle',styles.tagline)}>{siteConfig.tagline}</div>
+ </div>
+ <div className={clsx(styles.image)}>
+ <img src={Pic} />
</div>
</div>
- <div className="image image--main--right" style={{width:'40%'}}>
- <img src={Pic} />
+ <div className={styles.buttons}>
+ <Link
+ className="button button--secondary button--lg"
+ to="/docs/getting-started">
+ QUICK START
+ </Link>
+ <Link
+ className="button button--secondary button--lg"
+ to="https://github.com/apache/incubator-kvrocks">
+ <div className='header-github-link' style={{marginRight:'10px'}}></div>
+ GITHUB
+ </Link>
+ <Link
+ className="button button--secondary button--lg"
+ to="https://kvrocks.slack.com/join/shared_invite/zt-p5928e3r-OUAK8SUgC8GOceGM6dAz6w#/shared-invite/email">
+ <div className='header-slack-link' style={{marginRight:'10px'}}></div>
+ SLACK
+ </Link>
</div>
</header>
);
diff --git a/static/img/feature-2.png b/static/img/cluster.png
similarity index 100%
rename from static/img/feature-2.png
rename to static/img/cluster.png
diff --git a/static/img/feature-3.png b/static/img/high-available.png
similarity index 100%
rename from static/img/feature-3.png
rename to static/img/high-available.png
diff --git a/static/img/feature-1.png b/static/img/namespace.png
similarity index 100%
rename from static/img/feature-1.png
rename to static/img/namespace.png
diff --git a/static/img/feature-4.png b/static/img/replication.png
similarity index 100%
rename from static/img/feature-4.png
rename to static/img/replication.png