diff --git a/src/components/header.js b/src/components/header.js index 2851b30..6539d67 100644 --- a/src/components/header.js +++ b/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 }) => ( -
- - +const Header = ({ path, social, email }) => ( +
+
+
+ ~{path} $ +
+ +
) diff --git a/src/styles/footer.module.scss b/src/styles/footer.module.scss index c19f037..2df14da 100644 --- a/src/styles/footer.module.scss +++ b/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 { diff --git a/src/styles/global.scss b/src/styles/global.scss index 0ad7261..c36b347 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -7,7 +7,7 @@ :global(body) { font-family: $fontParagraph; color: $white; - background-color: $darkGrey; + background-color: $backgroundDark; margin: 0; } diff --git a/src/styles/header.module.scss b/src/styles/header.module.scss index 9d1fc0a..e4c6cab 100644 --- a/src/styles/header.module.scss +++ b/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; } \ No newline at end of file diff --git a/src/styles/layout.module.scss b/src/styles/layout.module.scss index 80d7e39..d8d2a24 100644 --- a/src/styles/layout.module.scss +++ b/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; } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 1c2bf5e..2b65ff5 100644 --- a/src/styles/variables.scss +++ b/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; \ No newline at end of file +$breakLarge: 992px; +$width: 760px; \ No newline at end of file