1
0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00

Merge pull request #70 from oceanprotocol/feature/api-coming-soon

teaser for API references
This commit is contained in:
Matthias Kretschmann 2018-11-27 14:37:50 +01:00 committed by GitHub
commit ef42d45164
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 6 deletions

View File

@ -12,3 +12,9 @@
description: Browse tutorials for most common setup and development use-cases. description: Browse tutorials for most common setup and development use-cases.
link: /tutorials/introduction/ link: /tutorials/introduction/
color: orange color: orange
- title: API References
#description: Get the API references for all relevant components.
description: Coming soon.
#link: /api/introduction/
color: green

View File

@ -10,22 +10,34 @@ import Repositories from '../components/Repositories'
import { ReactComponent as Arrow } from '../images/arrow.svg' import { ReactComponent as Arrow } from '../images/arrow.svg'
import styles from './index.module.scss' import styles from './index.module.scss'
const SectionBox = ({ to, children, ...props }) =>
to ? (
<Link to={to} {...props}>
{children}
</Link>
) : (
<div {...props}>{children}</div>
)
const SectionLink = ({ to, title, color, children }) => { const SectionLink = ({ to, title, color, children }) => {
// eslint-disable-next-line // eslint-disable-next-line
let classNames = classnames(styles.link, { let classNames = classnames(styles.link, {
[styles.purple]: color === 'purple', [styles.purple]: color === 'purple',
[styles.blue]: color === 'blue', [styles.blue]: color === 'blue',
[styles.orange]: color === 'orange' [styles.orange]: color === 'orange',
[styles.green]: color === 'green'
}) })
return ( return (
<Link to={to} className={classNames}> <SectionBox to={to} className={classNames}>
<h3 className={styles.sectionTitle}>{title}</h3> <h3 className={styles.sectionTitle}>{title}</h3>
<p className={styles.sectionText}>{children}</p> <p className={styles.sectionText}>{children}</p>
<span className={styles.sectionMore}> {title !== 'API References' && (
Learn More <Arrow /> <span className={styles.sectionMore}>
</span> Learn More <Arrow />
</Link> </span>
)}
</SectionBox>
) )
} }

View File

@ -9,6 +9,7 @@
@media (min-width: $break-point--medium) { @media (min-width: $break-point--medium) {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
} }
} }
@ -33,6 +34,12 @@
&:nth-child(3) { &:nth-child(3) {
animation-delay: .8s; animation-delay: .8s;
} }
&:last-child {
flex-basis: 100%;
text-align: center;
opacity: .75;
}
} }
.link { .link {
@ -76,6 +83,13 @@
} }
} }
.green {
.sectionTitle,
.sectionMore {
color: $green;
}
}
.sectionTitle { .sectionTitle {
margin-top: 0; margin-top: 0;
margin-bottom: $spacer / $line-height; margin-bottom: $spacer / $line-height;
@ -85,6 +99,7 @@
.sectionText { .sectionText {
margin-bottom: 0; margin-bottom: 0;
color: $brand-grey; color: $brand-grey;
width: 100%;
} }
.sectionMore { .sectionMore {