mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
frontpage sections color coding
This commit is contained in:
parent
68881c9c43
commit
2db85128c8
@ -1,12 +1,14 @@
|
|||||||
- title: Core Concepts
|
- title: Core Concepts
|
||||||
description: Understand the fundamentals of Ocean Protocol.
|
description: Understand the fundamentals of Ocean Protocol.
|
||||||
link: /concepts/introduction/
|
link: /concepts/introduction/
|
||||||
color: $brand-purple
|
color: purple
|
||||||
|
|
||||||
- title: Setup Guides
|
- title: Setup Guides
|
||||||
description: Setting up the Ocean Protocol components.
|
description: Setting up the Ocean Protocol components.
|
||||||
link: /setup/marketplace/
|
link: /setup/marketplace/
|
||||||
|
color: blue
|
||||||
|
|
||||||
- title: Tutorials
|
- title: Tutorials
|
||||||
description: Browse tutorials for most common setup and development use-cases.
|
description: Browse tutorials for most common setup and development use-cases.
|
||||||
link: /tutorials/jupyter/
|
link: /tutorials/jupyter/
|
||||||
|
color: orange
|
||||||
|
@ -5,6 +5,7 @@
|
|||||||
"author": "Ocean Protocol <devops@oceanprotocol.com>",
|
"author": "Ocean Protocol <devops@oceanprotocol.com>",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@oceanprotocol/art": "^1.0.2",
|
"@oceanprotocol/art": "^1.0.2",
|
||||||
|
"classnames": "^2.2.6",
|
||||||
"gatsby": "^2.0.45",
|
"gatsby": "^2.0.45",
|
||||||
"gatsby-image": "^2.0.20",
|
"gatsby-image": "^2.0.20",
|
||||||
"gatsby-plugin-catch-links": "^2.0.8",
|
"gatsby-plugin-catch-links": "^2.0.8",
|
||||||
|
@ -2,6 +2,7 @@ import React from 'react'
|
|||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { Link, graphql } from 'gatsby'
|
import { Link, graphql } from 'gatsby'
|
||||||
import Helmet from 'react-helmet'
|
import Helmet from 'react-helmet'
|
||||||
|
import classnames from 'classnames'
|
||||||
import Layout from '../components/Layout'
|
import Layout from '../components/Layout'
|
||||||
import Content from '../components/Content'
|
import Content from '../components/Content'
|
||||||
import HeaderHome from '../components/HeaderHome'
|
import HeaderHome from '../components/HeaderHome'
|
||||||
@ -9,19 +10,28 @@ 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 SectionLink = ({ to, title, children }) => (
|
const SectionLink = ({ to, title, color, children }) => {
|
||||||
<Link to={to} className={styles.link}>
|
let classNames = classnames(styles.link, {
|
||||||
|
[styles.purple]: color === 'purple',
|
||||||
|
[styles.blue]: color === 'blue',
|
||||||
|
[styles.orange]: color === 'orange'
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link 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}>
|
<span className={styles.sectionMore}>
|
||||||
Learn More <Arrow />
|
Learn More <Arrow />
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
|
||||||
SectionLink.propTypes = {
|
SectionLink.propTypes = {
|
||||||
to: PropTypes.string.isRequired,
|
to: PropTypes.string.isRequired,
|
||||||
title: PropTypes.string.isRequired,
|
title: PropTypes.string.isRequired,
|
||||||
|
color: PropTypes.string,
|
||||||
children: PropTypes.any
|
children: PropTypes.any
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -38,7 +48,11 @@ const IndexPage = ({ data, location }) => (
|
|||||||
<ul className={styles.sections}>
|
<ul className={styles.sections}>
|
||||||
{data.allSectionsYaml.edges.map(({ node }) => (
|
{data.allSectionsYaml.edges.map(({ node }) => (
|
||||||
<li key={node.title} className={styles.section}>
|
<li key={node.title} className={styles.section}>
|
||||||
<SectionLink to={node.link} title={node.title}>
|
<SectionLink
|
||||||
|
to={node.link}
|
||||||
|
title={node.title}
|
||||||
|
color={node.color}
|
||||||
|
>
|
||||||
{node.description}
|
{node.description}
|
||||||
</SectionLink>
|
</SectionLink>
|
||||||
</li>
|
</li>
|
||||||
@ -72,6 +86,7 @@ export const IndexQuery = graphql`
|
|||||||
title
|
title
|
||||||
description
|
description
|
||||||
link
|
link
|
||||||
|
color
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -47,7 +47,6 @@
|
|||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: $brand-grey;
|
|
||||||
box-shadow: rgba($brand-black, .1) 0 12px 20px;
|
box-shadow: rgba($brand-black, .1) 0 12px 20px;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
@ -56,6 +55,27 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.purple {
|
||||||
|
.sectionTitle,
|
||||||
|
.sectionMore {
|
||||||
|
color: $brand-purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
.sectionTitle,
|
||||||
|
.sectionMore {
|
||||||
|
color: $brand-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange {
|
||||||
|
.sectionTitle,
|
||||||
|
.sectionMore {
|
||||||
|
color: $orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.sectionTitle {
|
.sectionTitle {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: $spacer / $line-height;
|
margin-bottom: $spacer / $line-height;
|
||||||
@ -64,6 +84,7 @@
|
|||||||
|
|
||||||
.sectionText {
|
.sectionText {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
color: $brand-grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionMore {
|
.sectionMore {
|
||||||
|
@ -137,7 +137,7 @@ h4,
|
|||||||
h5 {
|
h5 {
|
||||||
font-family: $font-family-title;
|
font-family: $font-family-title;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
line-height: 1.25;
|
line-height: 1.2;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user