From 8d8339d8ef32973a854c61c25a013294b6ba32fd Mon Sep 17 00:00:00 2001
From: Elinorre <elinorre@yandex.ru>
Date: Thu, 16 Jan 2020 19:12:21 +0300
Subject: [PATCH] main layout and index page

---
 src/components/dataforge/footer.js |  6 ++---
 src/components/dataforge/header.js | 40 +++++++++++++++++++++++++++---
 src/components/dataforge/layout.js |  8 +++---
 src/pages/dataforge/index.js       | 11 +++-----
 src/styles/dataforge/footer.css    | 20 +++++++--------
 src/styles/dataforge/header.css    | 19 ++++++++++++++
 src/styles/dataforge/layout.css    | 18 ++++++++++----
 7 files changed, 90 insertions(+), 32 deletions(-)

diff --git a/src/components/dataforge/footer.js b/src/components/dataforge/footer.js
index 2222c02..c690e64 100644
--- a/src/components/dataforge/footer.js
+++ b/src/components/dataforge/footer.js
@@ -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 
       {` `}
diff --git a/src/components/dataforge/header.js b/src/components/dataforge/header.js
index 9c532de..71e6a44 100644
--- a/src/components/dataforge/header.js
+++ b/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 = () => (
-    <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
\ No newline at end of file
diff --git a/src/components/dataforge/layout.js b/src/components/dataforge/layout.js
index 806612c..e08e4e8 100644
--- a/src/components/dataforge/layout.js
+++ b/src/components/dataforge/layout.js
@@ -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"/>
     </>
 )
 
diff --git a/src/pages/dataforge/index.js b/src/pages/dataforge/index.js
index 5315f50..fe8bf33 100644
--- a/src/pages/dataforge/index.js
+++ b/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}) => (
-    <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>
 )
 
diff --git a/src/styles/dataforge/footer.css b/src/styles/dataforge/footer.css
index 8363e91..c62b297 100644
--- a/src/styles/dataforge/footer.css
+++ b/src/styles/dataforge/footer.css
@@ -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);
-}
\ No newline at end of file
+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); }
\ No newline at end of file
diff --git a/src/styles/dataforge/header.css b/src/styles/dataforge/header.css
index e69de29..ef15f75 100644
--- a/src/styles/dataforge/header.css
+++ b/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;} 
\ No newline at end of file
diff --git a/src/styles/dataforge/layout.css b/src/styles/dataforge/layout.css
index 5f9e479..5acbbea 100644
--- a/src/styles/dataforge/layout.css
+++ b/src/styles/dataforge/layout.css
@@ -1,5 +1,13 @@
-.container {
-    width: 100%;
-    margin: 0 auto;
-    max-width: 1160px;
-}
\ No newline at end of file
+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;}
\ No newline at end of file