Change header layout
This commit is contained in:
parent
340e19e484
commit
ce56d23cc0
|
@ -4,13 +4,14 @@ 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}>
|
||||
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="home">
|
||||
<Link to="/" className={styles.nameLink}>{siteTitle} |</Link>
|
||||
</li>
|
||||
<li key="about">
|
||||
<a href='/#about'>
|
||||
<span>About</span>
|
||||
|
@ -23,7 +24,7 @@ const Header = ({ siteTitle, social, email }) => (
|
|||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<Social social={ social } email={ email }/>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
@import "./variables.scss";
|
||||
|
||||
.footer {
|
||||
padding: 10px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
border-top: 1px solid $blue;
|
||||
background-color: $backgroundDarker;
|
||||
}
|
||||
|
||||
.link {
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
:global(body) {
|
||||
font-family: $fontParagraph;
|
||||
color: $white;
|
||||
background-color: $darkGrey;
|
||||
background-color: $backgroundDark;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
@ -23,6 +36,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nameLink {
|
||||
.terminal {
|
||||
font-size: 1.4em;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
$width: 760px;
|
Loading…
Reference in New Issue