mirror of
https://github.com/Stone-Red-Code/website.git
synced 2026-09-04 09:15:58 +02:00
84 lines
1.4 KiB
TypeScript
84 lines
1.4 KiB
TypeScript
import { Link } from "gatsby"
|
|
import styled from "styled-components"
|
|
|
|
export const HeaderWrapper = styled.header``
|
|
|
|
export const InnerWrapper = styled.div`
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 122px;
|
|
`
|
|
|
|
export const Logo = styled.img`
|
|
position: absolute;
|
|
margin-right: 50px;
|
|
left: calc(-122px - 50px);
|
|
width: 122px;
|
|
height: 122px;
|
|
`
|
|
|
|
export const Menu = styled.nav`
|
|
margin-top: 16px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
`
|
|
|
|
export const MenuItem = styled(Link)`
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 22px;
|
|
text-decoration: none;
|
|
color: #555;
|
|
position: relative;
|
|
transition: color 0.3s;
|
|
|
|
/* underline bar, getting animated through hover */
|
|
&::after {
|
|
z-index: -1;
|
|
position: absolute;
|
|
content: "";
|
|
height: 2px;
|
|
width: 100%;
|
|
margin-top: -3px;
|
|
bottom: 0;
|
|
background: #555;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
&:hover::after {
|
|
padding: 8px;
|
|
height: 100%;
|
|
background: #000;
|
|
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 11px rgba(0, 0, 0, 0.25);
|
|
margin-left: -8px;
|
|
margin-bottom: -8px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
&.active {
|
|
font-weight: 700;
|
|
color: #d33636;
|
|
|
|
&::after {
|
|
background: #d33636;
|
|
}
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
&:hover::after {
|
|
background: #d33636;
|
|
}
|
|
}
|
|
|
|
& + & {
|
|
margin-left: 48px;
|
|
}
|
|
`
|