diff --git a/components/activelink.tsx b/components/activelink.tsx index c4cf33b..5e3667d 100644 --- a/components/activelink.tsx +++ b/components/activelink.tsx @@ -1,23 +1,31 @@ -import { useRouter } from "next/router" -import { ReactNode } from "react" -import Link from "next/link" -import styled, {css} from "styled-components" +import { useRouter } from "next/router"; +import { ReactNode } from "react"; +import Link from "next/link"; +import styled, { css } from "styled-components"; -const ALink = styled.a<{active?: boolean}>` - border-bottom: 1px solid transparent; - ${({active}) => active && css` - color: var(--fg) !important; - /*border-bottom-color: currentColor;*/ - `} -` +const ALink = styled.a<{ active?: boolean }>` + border-bottom: 1px solid transparent; + ${({ active }) => + active && + css` + color: var(--fg) !important; + /*border-bottom-color: currentColor;*/ + `} +`; -const ActiveLink = ({children, href}: {children: ReactNode, href: string}) => { - const router = useRouter() - return ( - - {children} - - ) -} +const ActiveLink = ({ + children, + href, +}: { + children: ReactNode; + href: string; +}) => { + const router = useRouter(); + return ( + + {children} + + ); +}; -export default ActiveLink +export default ActiveLink; diff --git a/components/burgermenu.tsx b/components/burgermenu.tsx index 909cce5..749b4ee 100644 --- a/components/burgermenu.tsx +++ b/components/burgermenu.tsx @@ -1,134 +1,139 @@ -import styled, {css} from "styled-components" -import React, {useState} from "react" -import NavLinks from "./navlinks" +import styled, { css } from "styled-components"; +import React, { useState } from "react"; +import NavLinks from "./navlinks"; const MenuLine = styled.div` - width: 1.8rem; - height: 3px; - 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` - position: fixed; - right: 2rem; - z-index: 99; - - div { - position: absolute; - } - - 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 BNavCont = styled.nav<{show: boolean}>` - display: flex; - opacity: 0; - backdrop-filter: blur(25px); - position: fixed; - flex-direction: column; - background: #21242baf; - left: 0; - top: 0; - pointer-events: none; - width: 100vw; - height: 100vh; - z-index: 2; - transition: opacity .2s; - - align-items: center; - justify-content: center; - - gap: 1.5rem; - font-size: 1.2rem; - border: unset; - - a { - font-size: 2rem; - color: var(--fg-button); - transition: var(--trans-time) opacity; - text-align: center; - } - - a:hover { - opacity: .4; - } - - - ${({show}) => show && css` - display: flex; - opacity: 1; - pointer-events: unset; - `} - - - @media screen and (min-width: 960px) { - display: none; - position: absolute; - top: 0; - } -` - -const BNav: React.FC<{show: boolean, onClick: () => void}> = ({show, onClick}) => { - return ( - - - - ) -} + width: 1.8rem; + height: 3px; + border-radius: 2px; + background-color: var(--fg); + &:not(:last-child) { + margin-bottom: 0.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: 0.2s; + } + + &:hover { + cursor: pointer; + } + + @media screen and (max-width: 960px) { + display: flex; + + nav { + display: none !important; + position: absolute; + top: 0; + } + } + + ${({ open }) => + open && + css` + position: fixed; + right: 2rem; + z-index: 99; + + div { + position: absolute; + } + + div:nth-child(1) { + transform: rotate(45deg) translate(0.2rem, 0.2rem); + } + + div:nth-child(2) { + transform: rotate(-45deg) translate(-0.18rem, 0.2rem); + } + + div:last-child { + display: none; + } + `} +`; + +const BNavCont = styled.nav<{ show: boolean }>` + display: flex; + opacity: 0; + backdrop-filter: blur(25px); + position: fixed; + flex-direction: column; + background: #21242baf; + left: 0; + top: 0; + pointer-events: none; + width: 100vw; + height: 100vh; + z-index: 2; + transition: opacity 0.2s; + + align-items: center; + justify-content: center; + + gap: 1.5rem; + font-size: 1.2rem; + border: unset; + + a { + font-size: 2rem; + color: var(--fg-button); + transition: var(--trans-time) opacity; + text-align: center; + } + + a:hover { + opacity: 0.4; + } + + ${({ show }) => + show && + css` + display: flex; + opacity: 1; + pointer-events: unset; + `} + + @media screen and (min-width: 960px) { + display: none; + position: absolute; + top: 0; + } +`; + +const BNav: React.FC<{ show: boolean; onClick: () => void }> = ({ + show, + onClick, +}) => { + return ( + + + + ); +}; const Menu = () => { - const [open, setOpen] = useState(false); - return ( - <> - setOpen(false)}/> - setOpen(!open)}> - - - - - - ) -} - -export default Menu + const [open, setOpen] = useState(false); + return ( + <> + setOpen(false)} /> + setOpen(!open)}> + + + + + + ); +}; + +export default Menu; diff --git a/components/footer.tsx b/components/footer.tsx index 4f80d16..df43e20 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -1,15 +1,15 @@ -import styled from 'styled-components' +import styled from "styled-components"; // import Link from "next/link" const FooterCont = styled.footer` - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 0 1.2rem; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 1.2rem; - color: var(--fg-faded); -` + color: var(--fg-faded); +`; // const UList = styled.ul` // display: flex; @@ -19,17 +19,17 @@ const FooterCont = styled.footer` // ` export const Spacer = styled.div` - flex: 1; -` + flex: 1; +`; const Footer = () => { - return ( - <> - -

© Copyright {new Date().getFullYear()}

- - - ) -} + return ( + <> + +

© Copyright {new Date().getFullYear()}

+ + + ); +}; -export default Footer +export default Footer; diff --git a/components/header.tsx b/components/header.tsx index e970b4f..303cff3 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -1,42 +1,43 @@ -import styled from "styled-components" -import Nav from "./nav" -import Link from "next/link" -import Menu from "./burgermenu" +import styled from "styled-components"; +import Nav from "./nav"; +import Link from "next/link"; +import Menu from "./burgermenu"; const HeaderCont = styled.header` - display: flex; - align-items: center; - border-bottom: var(--border-size) var(--border-type) var(--border-color); - padding: .8rem 2rem; - gap: 2rem; - - h1 { - font-weight: normal; - - a { - color: inherit; - } - } - - nav { - margin-left: auto; - float: right; - } - - - @media screen and (max-width: 960px) { - padding: 1rem 2rem; - } -` + display: flex; + align-items: center; + border-bottom: var(--border-size) var(--border-type) var(--border-color); + padding: 0.8rem 2rem; + gap: 2rem; + + h1 { + font-weight: normal; + + a { + color: inherit; + } + } + + nav { + margin-left: auto; + float: right; + } + + @media screen and (max-width: 960px) { + padding: 1rem 2rem; + } +`; const Header = () => { - return ( - -

wych.dev

-