mirror of
https://github.com/Stone-Red-Code/website.git
synced 2026-09-04 17:25:59 +02:00
66 lines
1.2 KiB
TypeScript
66 lines
1.2 KiB
TypeScript
import { transparentize } from "polished"
|
|
import styled from "styled-components"
|
|
import { fontFamily } from "../../design/typography"
|
|
import Logo from "../../images/tph-logo.svg"
|
|
|
|
export const HomeMobileHeaderWrapper = styled.div`
|
|
z-index: 50;
|
|
background: ${props => transparentize(0.2, props.theme.main.background)};
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 16px 32px;
|
|
display: none;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
font-family: ${fontFamily.header};
|
|
font-size: 22px;
|
|
|
|
@media screen and (max-width: 767px) {
|
|
display: flex;
|
|
}
|
|
`
|
|
|
|
export const LogoWrapper = styled.div`
|
|
width: 35px;
|
|
height: 35px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #222;
|
|
border-radius: 7px;
|
|
margin-right: 8px;
|
|
`
|
|
|
|
export const StyledLogo = styled(Logo)`
|
|
height: 25px;
|
|
`
|
|
|
|
export const Burger = styled.div`
|
|
margin-left: auto;
|
|
width: 16px;
|
|
height: 9px;
|
|
padding: 8px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&::before,
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
height: 2px;
|
|
width: 16px;
|
|
background: ${props => props.theme.main.foreground};
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&::before {
|
|
top: 8px;
|
|
}
|
|
|
|
&::after {
|
|
bottom: 8px;
|
|
}
|
|
`
|