mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
style front page
This commit is contained in:
parent
c90f07e483
commit
a49dd4e104
GPG Key ID:
606EEEF3C479A91F
@ -1,7 +1,8 @@
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: 'Ocean Protocol Documentation',
|
||||
description: '',
|
||||
description:
|
||||
'Learn everything about how to develop with Ocean Prototocol',
|
||||
siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com'
|
||||
},
|
||||
plugins: [
|
||||
|
||||
@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
|
||||
import styles from './Content.module.scss'
|
||||
|
||||
const Content = ({ children }) => (
|
||||
<div className={styles.content}>{children}</div>
|
||||
<section className={styles.content}>{children}</section>
|
||||
)
|
||||
|
||||
Content.propTypes = {
|
||||
|
||||
@ -28,8 +28,8 @@
|
||||
}
|
||||
|
||||
.headerLogoImage {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
fill: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
37
src/components/HeaderHome.jsx
Normal file
37
src/components/HeaderHome.jsx
Normal file
@ -0,0 +1,37 @@
|
||||
import React from 'react'
|
||||
import { StaticQuery, graphql } from 'gatsby'
|
||||
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
|
||||
import Content from '../components/Content'
|
||||
import styles from './HeaderHome.module.scss'
|
||||
|
||||
const HeaderHome = () => (
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
render={data => {
|
||||
const { title, description } = data.site.siteMetadata
|
||||
|
||||
return (
|
||||
<header className={styles.header}>
|
||||
<Content>
|
||||
<Logo className={styles.headerLogo} />
|
||||
<h1 className={styles.headerTitle}>{title}</h1>
|
||||
<p className={styles.headerDescription}>
|
||||
{description}
|
||||
</p>
|
||||
</Content>
|
||||
</header>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
export default HeaderHome
|
||||
51
src/components/HeaderHome.module.scss
Normal file
51
src/components/HeaderHome.module.scss
Normal file
@ -0,0 +1,51 @@
|
||||
@import 'variables';
|
||||
@import 'animations';
|
||||
|
||||
.header {
|
||||
background: $brand-black;
|
||||
width: 100%;
|
||||
padding: $spacer * 2 0;
|
||||
|
||||
min-height: 30rem;
|
||||
max-height: 800px;
|
||||
color: $brand-white;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headerLogo,
|
||||
.headerTitle,
|
||||
.headerDescription {
|
||||
animation: fadeInUp .8s ease-out backwards;
|
||||
}
|
||||
|
||||
.headerLogo {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $font-size-h3;
|
||||
animation-delay: .2s;
|
||||
|
||||
@media (min-width: $break-point--small) {
|
||||
font-size: $font-size-h1;
|
||||
}
|
||||
}
|
||||
|
||||
.headerDescription {
|
||||
margin-bottom: $spacer * 4;
|
||||
max-width: $break-point--small;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
animation-delay: .4s;
|
||||
|
||||
@media (min-width: $break-point--small) {
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Helmet from 'react-helmet'
|
||||
import { StaticQuery, graphql } from 'gatsby'
|
||||
|
||||
import Header from './Header'
|
||||
|
||||
const Layout = ({ children }) => (
|
||||
const Layout = ({ children, header }) => (
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query SiteTitleQuery {
|
||||
@ -16,26 +14,23 @@ const Layout = ({ children }) => (
|
||||
}
|
||||
}
|
||||
`}
|
||||
render={data => (
|
||||
render={data => {
|
||||
const { title } = data.site.siteMetadata
|
||||
const headerElement = header || <Header siteTitle={title} />
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet
|
||||
title={data.site.siteMetadata.title}
|
||||
meta={[
|
||||
{ name: 'description', content: 'Sample' },
|
||||
{ name: 'keywords', content: 'sample, something' }
|
||||
]}
|
||||
>
|
||||
<html lang="en" />
|
||||
</Helmet>
|
||||
<Header siteTitle={data.site.siteMetadata.title} />
|
||||
<section>{children}</section>
|
||||
{headerElement}
|
||||
{children}
|
||||
</>
|
||||
)}
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
Layout.propTypes = {
|
||||
children: PropTypes.node.isRequired
|
||||
children: PropTypes.node.isRequired,
|
||||
header: PropTypes.element
|
||||
}
|
||||
|
||||
export default Layout
|
||||
|
||||
3
src/images/arrow.svg
Normal file
3
src/images/arrow.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13">
|
||||
<polygon points="383.949 1434.201 374.999 1434.201 379.081 1430.202 378.34 1429.476 372.994 1434.714 378.34 1439.952 379.081 1439.227 374.999 1435.227 383.949 1435.227" transform="rotate(-180 192.471 720.714)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 305 B |
Binary file not shown.
|
Before Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
@ -3,12 +3,17 @@ import PropTypes from 'prop-types'
|
||||
import { Link, graphql } from 'gatsby'
|
||||
import Layout from '../components/Layout'
|
||||
import Content from '../components/Content'
|
||||
import HeaderHome from '../components/HeaderHome'
|
||||
import { ReactComponent as Arrow } from '../images/arrow.svg'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
const SectionLink = ({ to, title, children }) => (
|
||||
<Link to={to}>
|
||||
<h3 className={styles.sectionTitle}>{title}</h3>
|
||||
<p className={styles.sectionText}>{children}</p>
|
||||
<span className={styles.sectionMore}>
|
||||
Learn More <Arrow />
|
||||
</span>
|
||||
</Link>
|
||||
)
|
||||
|
||||
@ -19,7 +24,7 @@ SectionLink.propTypes = {
|
||||
}
|
||||
|
||||
const IndexPage = ({ data, location }) => (
|
||||
<Layout location={location}>
|
||||
<Layout location={location} header={<HeaderHome />}>
|
||||
<Content>
|
||||
<ul className={styles.sections}>
|
||||
{data.allSectionsYaml.edges.map(({ node }) => (
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
@import 'variables';
|
||||
@import 'animations';
|
||||
|
||||
.sections {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-top: $spacer * 2;
|
||||
margin-top: -($spacer * 4);
|
||||
|
||||
@media (min-width: $break-point--medium) {
|
||||
display: flex;
|
||||
@ -13,29 +14,62 @@
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: $spacer;
|
||||
margin-top: $spacer;
|
||||
animation: fadeInUp .8s ease-out backwards;
|
||||
|
||||
&:before { display: none; }
|
||||
|
||||
@media (min-width: $break-point--medium) {
|
||||
flex: 0 0 30%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: $spacer * $line-height;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $spacer $spacer * $line-height;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: rgba($brand-black, .1) 0px 9px 18px;
|
||||
box-shadow: rgba($brand-black, .15) 0px 9px 18px;
|
||||
color: $brand-grey;
|
||||
background: $brand-white;
|
||||
height: 100%;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: rgba($brand-black, .15) 0px 12px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
animation-delay: .4s;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: .6s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: .8s;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer / $line-height;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sectionText {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sectionMore {
|
||||
align-self: flex-end;
|
||||
margin-top: $spacer / $line-height;
|
||||
color: $brand-pink;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
width: $font-size-small;
|
||||
height: $font-size-small;
|
||||
fill: $brand-grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
21
src/styles/_animations.scss
Normal file
21
src/styles/_animations.scss
Normal file
@ -0,0 +1,21 @@
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0.01;
|
||||
transform: translate3d(0, 5rem, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0.01;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user