docs page: footer added and moved to the bottom of page (appsody#24)

Signed-off-by: Bazif Khan <[email protected]>

src/components/docLayout.js

@@ -2,11 +2,13 @@ import React from "react";
 
 import Head from "./head"
 import DocNavbar from "./docNavbar"
+import Footer from "../components/footer"
 
 export default ({ children }) => (
     <React.Fragment>
         <Head/>
         <DocNavbar/>
         { children }
+        <Footer/>
     </React.Fragment>
 )

src/components/footer.js

@@ -12,4 +12,4 @@ const Footer = () => {
     )
 }
 
-export default Footer;
+export default Footer;

src/components/layout.js

@@ -9,6 +9,6 @@ export default ({ children }) => (
         <Head/>
         <Navbar/>
         { children }
-        <Footer></Footer>
+        <Footer/>
     </React.Fragment>
-)
+)

src/layouts/index.js

@@ -7,14 +7,14 @@ import DocSidebar from "../components/docSidebar.js";
 export default ({ children, pageContext }) => {
   if (pageContext.layout === "docs") {
     return (
+      <div id="docs">
       <DocLayout>
-          <div id="docs">
             <DocSidebar/>
             <main>
               {children}
             </main>
-          </div>
       </DocLayout>
+      </div>
     )
   }
   return (

src/styles/main.css

@@ -122,25 +122,9 @@ section.landing-section h2 {
   justify-content: center;
 }
 
-/* .btn.btn-clear.w-50 {
-  background-color: var(--white-buttons) !important;
-  border: 4px solid var(--white-buttons) !important;
-  border-radius: 10px;
-  padding: 0px;
-} */
-
-/* .btn.btn-primary.w-70.flipped{
-  margin-top: 1em;
-  border-radius: 10px;
-  padding: 0px;
-  height: 50em;
-} */
-
 #input-cli{
   text-align: center;
   width: 65%;
-  /* margin: 0 .5em; */
-  /* margin-right: 0.3em; */
 }
 
 #command-input{
@@ -201,7 +185,6 @@ section.landing-section h2 {
 #docs {
   display: grid;
   grid-template-columns: 15em auto;
-  grid-template-rows: 100vh;
 }
 
 #docs main, #docs-sidebar {
@@ -270,13 +253,20 @@ section.landing-section h2 {
     background-color: white;
   }
 }
+
 footer {
   background-color: var(--colour-scheme-1);
   box-shadow: 0 6px 29px #9B9B9B;
   padding: 1em;
   text-align: center;
 }
 
+#docs footer {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  z-index: 1;
+}
+
 footer ul {
   margin: 0;
   padding: 0;