Merge branch 'burgermenu'

2 years ago · edb7284aa6
parent 34d52616ed 05023bbcb5
commit edb7284aa6
5 changed files with 93 additions and 7 deletions
--- a/components/burgermenu.tsx
+++ b/components/burgermenu.tsx
@ -0,0 +1,72 @@
 import styled, {css} from "styled-components"
 import React, {useState} from "react"
 //import Link from "next/link"
 const MenuLine = styled.div`
 	width: 1.8rem;
 	height: 2px;
 	border-radius: 2px;
 	background-color: var(--fg);
 	&:not(:last-child) {
 		margin-bottom: .4rem;
 	}
 `
 const BurgerContainer = styled.div<{open: boolean}>`
 	display: none;
 	width: 1.8rem;
 	height: 1.8rem;
 	flex-direction: column;
 	justify-content: center;
 	margin-left: auto;
 	div {
 		transition: .2s;
 	}
 	&:hover {
 		cursor: pointer;
 	}
 	@media screen and (max-width: 960px) {
 		display: flex;
 		nav {
 			display: none !important;
 			position: absolute;
 			top: 0;
 		}
 	}
 	${({open}) => open && css`
 		div {
 			position: absolute;
 			height: 4px;
 		}
 		div:nth-child(1) {
 			transform: rotate(45deg) translate(.2rem, .2rem);
 		}
 		div:nth-child(2) {
 			transform: rotate(-45deg) translate(-.18rem, .2rem);
 		}
 		div:last-child {
 			display: none;
 		}
 	`}
 `
 const Menu = () => {
 	const [open, setOpen] = useState(false);
 	return (
 		<BurgerContainer open={open} onClick={() => setOpen(!open)}>
 				<MenuLine />
 				<MenuLine />
 				<MenuLine />
 		</BurgerContainer>
 	)
 }
 export default Menu
--- a/components/header.tsx
+++ b/components/header.tsx
@ -1,6 +1,7 @@
-import styled from 'styled-components'
+import styled from "styled-components"
-import Nav from './nav'
+import Nav from "./nav"
 import Link from "next/link"
 import Menu from "./burgermenu"
 const HeaderCont = styled.header`
 	display: flex;
@ -28,6 +29,7 @@ const Header = () => {
 		<HeaderCont>
 			<h1><Link href="/">wych.dev</Link></h1>
 			<Nav />
 			<Menu />
 		</HeaderCont>
 	)
 }
--- a/components/layout.tsx
+++ b/components/layout.tsx
@ -1,9 +1,14 @@
-import Header from './header'
+import Header from "./header"
-import Footer from './footer'
+import Footer from "./footer"
-import {ReactNode} from 'react'
+import {ReactNode} from "react"
 import Head from "next/head"
 const Layout = ({children}: {children: ReactNode}) => {
 	return <>
 		<Head>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 			<title>wych.dev</title>
 		</Head>
 		<Header />
 			<main>{children}</main>
 		<Footer />
--- a/components/nav.tsx
+++ b/components/nav.tsx
@ -15,6 +15,12 @@ const NavCont = styled.nav`
 	a:hover {
 		opacity: .4;
 	}
 	@media screen and (max-width: 960px) {
 		display: none;
 		position: absolute;
 		top: 0;
 	}
 `
 const Nav = () => {
@ -24,7 +30,7 @@ const Nav = () => {
 			<ActiveLink href="/#contact">Contact</ActiveLink>
 			<ActiveLink href="/projects">Projects</ActiveLink>
 			<a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">GitHub</a>
-			<a href="https://git.wych.dev">WychGit</a>
+			<a href="https://git.wych.dev" target="_blank" rel="noreferrer">WychGit</a>
 		</NavCont>
 	)
 }
--- a/styles/globals.css
+++ b/styles/globals.css
@ -17,7 +17,7 @@
 	--fg-link: #abf;
 	--fg-code: #ffbe85;
 	--fg-gold: #fff190;
-	--emph-shadow: 0 0 4px;
+	--emph-shadow: 0 0 2px;
 	--bg: #272a34;
 	--bg-dark: #21242b; 
@ -67,3 +67,4 @@ em {
 	font-style: normal;
 	text-shadow: var(--emph-shadow) currentColor;
 }