Change header layout

This commit is contained in:
LordMathis 2020-09-29 17:25:30 +02:00
parent 340e19e484
commit ce56d23cc0
6 changed files with 53 additions and 35 deletions

View File

@ -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>
)

View File

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

View File

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

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;