3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-06 10:20:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore(v2): modify docusaurus-2 homepage (#1315)

Browse source 
* chore(v2): modify docusaurus-2 homepage

* Update styles.module.css
This commit is contained in:
Endilie Yacop Sucipto 2019-03-28 23:31:15 +08:00 • committed by Yangshun Tay
parent 94928f8e53
commit f04eea6b48
2 changed files with 162 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

61
website/pages/index.js
View file

@ -5,8 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/
import React, {useEffect, useState} from 'react';
import React, {useEffect, useState, useContext} from 'react';
import Head from '@docusaurus/Head';
import DocusaurusContext from '@docusaurus/context';
import classnames from 'classnames';
@ -112,6 +113,8 @@ const QUOTES = [
];
function Home() {
const context = useContext(DocusaurusContext);
const {siteConfig = {}} = context;
const [featureIndex, setFeatureIndex] = useState(0);
useEffect(() => {
const timer = window.setTimeout(() => {
@ -129,29 +132,49 @@ function Home() {
<Head key={featureIndex}>
<title>Docusaurus</title>
</Head>
<div className={classnames(styles.section, styles.banner)}>
<div className={classnames(styles.sectionInner, styles.bannerInner)}>
<h1 className={styles.header}>Docusaurus</h1>
<h2 className={styles.subtitle}>
Easy to maintain Open Source
<br />
Documentation websites
</h2>
<div className={styles.headerLinksContainer}>
<a className={styles.headerLink} href="/docs/installation">
<div className={styles['index-hero']}>
<div className={styles['index-hero-inner']}>
<h1 className={styles['index-hero-project-tagline']}>
<img
alt="Docusaurus with Keytar"
className={styles['index-hero-logo']}
src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`}
/>
{siteConfig.title} makes it easy to maintain{' '}
<span className={styles['index-hero-project-keywords']}>
Open Source
</span>{' '}
documentation websites.
</h1>
<div className={styles['index-ctas']}>
<a
className={styles['index-ctas-get-started-button']}
href={`${siteConfig.baseUrl}docs/installation`}>
Get Started
</a>
<a
className={classnames(styles.headerLink, styles.gitHubLink)}
href="https://github.com/facebook/docusaurus"
rel="noopener noreferrer"
target="_blank">
GitHub
</a>
<div />
<span className={styles['index-ctas-github-button']}>
<iframe
src="https://ghbtns.com/github-btn.html?user=facebook&amp;repo=docusaurus&amp;type=star&amp;count=true&amp;size=large"
frameBorder={0}
scrolling={0}
width={160}
height={30}
title="GitHub Stars"
/>
</span>
</div>
</div>
</div>
<div className={styles['announcement']}>
<div className={styles['announcement-inner']}>
We're working on{' '}
<a href="https://github.com/facebook/Docusaurus/issues/789">
Docusaurus 2
</a>
, contribute to its roadmap by suggesting features or giving feedback{' '}
<a href={`${siteConfig.baseUrl}feedback`}>here</a>!
</div>
</div>
<div className={styles.section}>
<div className={styles.sectionInner}>
<div className={styles.row}>

172
website/pages/styles.module.css
View file

@ -38,58 +38,6 @@
padding-right: 0;
}
.banner {
background-color: #25c2a0;
color: #fff;
}
.bannerInner {
max-width: 960px;
}
.header {
font-size: 48px;
margin-bottom: 16px;
margin-top: 0;
}
.subtitle {
font-weight: 500;
font-size: 24px;
margin: 32px 0;
}
.headerLinksContainer {
padding: 32px 0;
}
.headerLink {
border: 1px solid #fff;
border-radius: 2em;
background-color: #fff;
color: #25c2a0;
font-size: 1em;
margin-right: 24px;
padding: 1em 2.4em;
text-decoration: none;
transition: color 300ms cubic-bezier(0.08, 0.52, 0.52, 1);
}
.headerLink:hover {
background-color: transparent;
color: #fff;
}
.gitHubLink {
background-color: transparent;
color: #fff;
}
.gitHubLink:hover {
background-color: #fff;
color: #25c2a0;
}
.featureList {
list-style-type: none;
padding-left: 0;
@ -158,3 +106,123 @@
.quoteText {
font-style: italic;
}
.announcement {
background-color: #20232a;
color: #fff;
font-weight: bold;
font-size: 24px;
padding: 48px;
margin: 0 auto -40px;
text-align: center;
}
.announcement-inner {
margin: 0 auto;
max-width: 768px;
}
.index-hero {
background-color: #2b3137;
padding: 48px;
}
.index-hero-inner {
margin: 0 auto;
max-width: 1100px;
padding: 0 20px;
}
.index-hero-project-tagline {
color: #fff;
font-size: 64px;
margin: 0;
}
.index-hero-project-keywords {
color: #25c2a0;
}
@keyframes jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1);
}
}
.index-hero-logo {
animation-duration: 2s;
animation-name: jackInTheBox;
float: right;
margin-top: 20px;
padding: 20px;
background-color: #2b3137;
}
.index-ctas {
margin-top: 24px;
}
.index-ctas-get-started-button {
border: 1px solid #25c2a0;
display: inline-block;
line-height: 1.2em;
text-decoration: none!important;
text-transform: uppercase;
transition: background .3s,color .3s;
border-radius: 8px;
border-width: 2px;
color: #fff;
font-size: 24px;
font-weight: bold;
margin-right: 24px;
padding: 18px 36px;
}
.index-ctas-github-button {
vertical-align: sub;
}
@media only screen and (max-width: 768px) {
.index-hero {
padding-left: 20px;
padding-right: 20px;
}
.index-hero-inner {
padding: 0;
}
.index-hero-project-tagline {
font-size: 36px;
text-align: center;
}
.index-hero-logo {
display: block;
float: none;
margin: 0 auto;
}
.index-ctas {
text-align: center;
}
.index-ctas-github-button {
display: none;
}
}