main layout and index page
This commit is contained in:
Elinorre
parent
68dae8d66b
commit
8d8339d8ef
@ -2,11 +2,11 @@ import React from "react"
|
||||
import "../../styles/dataforge/footer.css"
|
||||
|
||||
const Footer = () => (
|
||||
<footer>
|
||||
<div class = "container" >
|
||||
<footer id="df">
|
||||
<div class = "container">
|
||||
<p>
|
||||
© 2016
|
||||
<a href="#"> Alexander Nozik </a> under
|
||||
<a href="mailto:nozik@inr.ru"> Alexander Nozik </a> under
|
||||
<a href="http://www.apache.org/licenses/LICENSE-2.0"> Apache 2.0 license </a>
|
||||
| Built with
|
||||
{` `}
|
||||
|
||||
@ -1,7 +1,41 @@
|
||||
import React from "react"
|
||||
import {Link} from "gatsby"
|
||||
import logo from "../../images/dataforge/df_logo.png"
|
||||
|
||||
const Header = () => (
|
||||
<h1>this is header</h1>
|
||||
)
|
||||
import "../../styles/dataforge/header.css"
|
||||
import "../../styles/bootstrap.min.css"
|
||||
|
||||
const Header = () => {
|
||||
let curActive = [' ', ' ', ' ', ' ', ' '];
|
||||
if (window.location.pathname === '/dataforge/news'){curActive[0] = 'styled';}
|
||||
if (window.location.pathname === '/dataforge/docs'){curActive[1] = 'styled';}
|
||||
if (window.location.pathname === '/dataforge/modules'){curActive[2] = 'styled';}
|
||||
if (window.location.pathname === '/dataforge/releases'){curActive[3] = 'styled';}
|
||||
if (window.location.pathname === '/dataforge/apps'){curActive[4] = 'styled';}
|
||||
return(
|
||||
<header id="df">
|
||||
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<Link to="/dataforge/"><img alt="DataForge" height="55" src={logo} style={{paddingTop: `15px`, marginBottom: `20px`}}/></Link>
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item" id={`${curActive[0]}`}><Link class="nav-link" to="/dataforge/news">News</Link></li>
|
||||
<li class="nav-item" id={`${curActive[1]}`}><Link class="nav-link" to="/dataforge/docs">Documentation</Link></li>
|
||||
<li class="nav-item" id={`${curActive[2]}`}><Link class="nav-link" to="/dataforge/modules">Modules</Link></li>
|
||||
<li class="nav-item" id={`${curActive[3]}`}><Link class="nav-link" to="/dataforge/releases">Releases</Link></li>
|
||||
<li class="nav-item" id={`${curActive[4]}`}><Link class="nav-link" to="/dataforge/apps">Applications</Link></li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right" style={{fontSize: `15px`}}>
|
||||
<li class="nav-item"><Link class="nav-link" to="/dataforge/misc">See also</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
)}
|
||||
|
||||
export default Header
|
||||
@ -7,11 +7,11 @@ import "../../styles/dataforge/layout.css"
|
||||
|
||||
const Layout = ({children}) => (
|
||||
<>
|
||||
<Header/>
|
||||
<div class = "container" style = {{paddingTop: `70px`}}>
|
||||
<main>{children}</main>
|
||||
<Header id="df"/>
|
||||
<div class = "container">
|
||||
<main id="df" style={{marginTop: `80px`}}>{children}</main>
|
||||
</div>
|
||||
<Footer/>
|
||||
<Footer id="df"/>
|
||||
</>
|
||||
)
|
||||
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
import React from "react"
|
||||
import {Link, graphql} from "gatsby"
|
||||
import {graphql} from "gatsby"
|
||||
import Layout from "../../components/dataforge/layout"
|
||||
// import Layout from "../../components/dataforge/layout"
|
||||
|
||||
|
||||
const DataforgePage = ({data}) => (
|
||||
<Layout>
|
||||
const DataforgePage = ({ data }) => (
|
||||
<Layout id="df">
|
||||
{data.index.nodes.map(index=>{
|
||||
return(<p
|
||||
dangerouslySetInnerHTML = {{
|
||||
__html: index.frontmatter.description || index.html,
|
||||
__html: index.html,
|
||||
}}
|
||||
/>)
|
||||
})}
|
||||
|
||||
</Layout>
|
||||
)
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
footer {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
footer#df * {
|
||||
text-align: left;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
left: 0;
|
||||
bottom: 0;}
|
||||
|
||||
a, a:visited {
|
||||
color: rgb(51,122,183);
|
||||
}
|
||||
footer#df p { font-size: 15px; }
|
||||
|
||||
footer#df a { color: rgb(51, 122, 183); text-decoration: none; }
|
||||
footer#df a:hover { color: rgb(35, 82, 124); text-decoration: underline; }
|
||||
footer#df a:visited { color: rgb(51, 122, 183); }
|
||||
@ -0,0 +1,19 @@
|
||||
header#df a.nav-link {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 15px;
|
||||
color: rgb(119,119,119);
|
||||
padding: 12px; }
|
||||
|
||||
header#df a.nav-link:hover { color:rgb(51,51,51); }
|
||||
|
||||
header#df nav { padding: 0; }
|
||||
header#df img { padding-right: 10px; }
|
||||
|
||||
header#df li#styled.nav-item { padding-top: 9px; background-color: rgb(231,231,231);}
|
||||
|
||||
header#df [aria-current] {
|
||||
color: rgb(85,85,85);
|
||||
font-size: 15px;
|
||||
padding: 12px;
|
||||
|
||||
text-decoration: none;}
|
||||
@ -1,5 +1,13 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 1160px;
|
||||
}
|
||||
main#df * { font-family: Arial, Helvetica, sans-serif; }
|
||||
main#df p { font-size: 15px; margin: 10px 0 10px 0; }
|
||||
main#df h1 { font-size: 36px; font-weight: 500; }
|
||||
main#df h2 { font-size: 30px; font-weight: 500; }
|
||||
main#df h3 { font-size: 24px; }
|
||||
main#df hr { margin: 20px 0 20px 0; border: none; }
|
||||
main#df li { font-size: 15px; }
|
||||
|
||||
main#df a { color: rgb(51, 122, 183); text-decoration: none; }
|
||||
main#df a:hover { color: rgb(35, 82, 124); text-decoration: underline; }
|
||||
main#df a:visited { color: rgb(51, 122, 183); }
|
||||
|
||||
main#df div.post:last-of-type { margin-bottom: 150px;}
|
||||
Loading…
Reference in New Issue
Block a user