Change header layout

src/components/header.js

@@ -4,26 +4,27 @@ import PropTypes from "prop-types"
 import React from "react"
 import styles from "../styles/header.module.scss"
 
-const Header = ({ siteTitle, social, email }) => (
-  <header className={styles.header}>
-    <nav className={styles.links}>
-      <ul>
-        <li key="home">
-          <Link to="/" className={styles.nameLink}>{siteTitle} |</Link>
-        </li>
-        <li key="about">
-          <a href='/#about'>
-            <span>About</span>
-          </a>
-        </li>
-        <li key="blog">
-          <a href='/#blog'>
-            <span>Blog</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-    <Social social={ social } email={ email }/>
+const Header = ({ path, social, email }) => (
+  <header className={styles.headerWrapper}>
+    <div className={styles.header}>
+      <div>
+        <span className={styles.terminal}>~{path} $</span>
+      </div>
+      <nav className={styles.links}>
+        <ul>
+          <li key="about">
+            <a href='/#about'>
+              <span>About</span>
+            </a>
+          </li>
+          <li key="blog">
+            <a href='/#blog'>
+              <span>Blog</span>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
   </header>
 )
 

src/styles/footer.module.scss

@@ -1,9 +1,9 @@
 @import "./variables.scss";
 
 .footer {
-  padding: 10px;
+  padding: 15px;
   text-align: center;
-  border-top: 1px solid $blue;
+  background-color: $backgroundDarker;
 }
 
 .link {

src/styles/global.scss

@@ -7,7 +7,7 @@
 :global(body) {
   font-family: $fontParagraph;
   color: $white;
-  background-color: $darkGrey;
+  background-color: $backgroundDark;
   margin: 0;
 }
 

src/styles/header.module.scss

@@ -1,17 +1,30 @@
 @import "./variables.scss";
 
 .header {
-  overflow: auto;
-  border-bottom: 1px solid $blue;
-  height: 70px;
-  box-sizing: border-box;
   font-family: $fontHeader;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  @media only screen and (min-width: $breakLarge) {
+    width: $width;
+  }
+}
+
+.headerWrapper {
+  overflow: auto;
+  box-sizing: border-box;
+  background-color: $backgroundDarker;
+  display: flex;
+  justify-content: center;
 }
 
 .links {
-  float: left;
   ul {
     list-style: none;
+    padding: 0;
+    margin: 0;
     li {
       display: inline;
       margin: 5px;
@@ -22,7 +35,7 @@
     }
   }
 }
-  
-.nameLink {
+
+.terminal {
   font-size: 1.4em;
 }

src/styles/layout.module.scss

@@ -6,13 +6,13 @@
 
   @media only screen and (min-width: $breakLarge) {
     display: flex;
-    width: 80%;
+    width: $width;
   }
 }
 
 .flexWrapper {
   display: flex;
-  min-height: calc(100vh - 70px);
+  min-height: calc(100vh - 67px);
   flex-direction: column;
   justify-content: space-between;
 }

src/styles/variables.scss

@@ -4,10 +4,14 @@ $white: #f8f8ff;
 $black: #2f2f2f;
 $blue: #0f52bf;
 
+$backgroundDarker: #252627;
+$backgroundDark: #292a2d;
+
 //Fonts
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=VT323&display=swap');
-$fontHeader: 'VT323', monospace;
+@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@500&family=Open+Sans&display=swap');
+$fontHeader: 'Fira Mono', monospace;
 $fontParagraph: 'Open Sans', sans-serif;
 
 // Content
-$breakLarge: 992px;
+$breakLarge: 992px;
+$width: 760px;