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

View File

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

View File

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

View File

@ -1,17 +1,30 @@
@import "./variables.scss"; @import "./variables.scss";
.header { .header {
overflow: auto;
border-bottom: 1px solid $blue;
height: 70px;
box-sizing: border-box;
font-family: $fontHeader; 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 { .links {
float: left;
ul { ul {
list-style: none; list-style: none;
padding: 0;
margin: 0;
li { li {
display: inline; display: inline;
margin: 5px; margin: 5px;
@ -23,6 +36,6 @@
} }
} }
.nameLink { .terminal {
font-size: 1.4em; font-size: 1.4em;
} }

View File

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

View File

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