main layout and index page

src/components/dataforge/footer.js

@@ -2,11 +2,11 @@ import React from "react"
 import "../../styles/dataforge/footer.css"
 
 const Footer = () => (
-    <footer>
+    <footer id="df">
-    <div class = "container" >
+    <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 
       {` `}

src/components/dataforge/header.js

@@ -1,7 +1,41 @@
 import React from "react"
+import {Link} from "gatsby"
+import logo from "../../images/dataforge/df_logo.png"
 
-const Header = () => (
+import "../../styles/dataforge/header.css"
-    <h1>this is header</h1>
+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

src/components/dataforge/layout.js

@@ -7,11 +7,11 @@ import "../../styles/dataforge/layout.css"
 
 const Layout = ({children}) => (
     <>
-        <Header/>
+        <Header id="df"/>
-        <div class = "container" style = {{paddingTop: `70px`}}>
+        <div class = "container">
-            <main>{children}</main>
+            <main id="df" style={{marginTop: `80px`}}>{children}</main>
         </div>
-        <Footer/>
+        <Footer id="df"/>
     </>
 )
 

src/pages/dataforge/index.js

@@ -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 }) => (
-const DataforgePage = ({data}) => (
+    <Layout id="df">
-    <Layout>
     {data.index.nodes.map(index=>{
         return(<p
             dangerouslySetInnerHTML = {{
-            __html: index.frontmatter.description || index.html,
+            __html: index.html,
             }}
         />) 
     })}
-
     </Layout>
 )
 

src/styles/dataforge/footer.css

@@ -1,11 +1,11 @@
-footer {
+ footer#df * { 
-    text-align: left;
+     text-align: left; 
-    font-size: 16px;
+     font-family: Arial, Helvetica, sans-serif; 
-    left: 0;
+     left: 0;
-    bottom: 0;
+     bottom: 0;}
-    width: 100%;
-}
 
-a, a:visited {
+footer#df p { font-size: 15px; }
-    color: rgb(51,122,183);
+
-}
+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); }

src/styles/dataforge/header.css

@@ -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;} 

src/styles/dataforge/layout.css

@@ -1,5 +1,13 @@
-.container {
+main#df * { font-family: Arial, Helvetica, sans-serif; }
-    width: 100%;
+main#df p { font-size: 15px; margin: 10px 0 10px 0; }
-    margin: 0 auto;
+main#df h1 { font-size: 36px; font-weight: 500; }
-    max-width: 1160px;
+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;}