152 lines
2.9 KiB
JavaScript
152 lines
2.9 KiB
JavaScript
|
import styled from 'styled-components'
|
||
|
|
import { colours } from '../../assets/theme'
|
||
|
|
import bg from '../../assets/img/hero/1lg.png'
|
||
|
|
|
||
|
|
// import { H1 } from '../../components/Text'
|
||
|
|
|
||
|
|
import Logo from '../../components/Logo'
|
||
|
|
|
||
|
|
const heroWidth = '66vw'
|
||
|
|
|
||
|
|
export const Wrapper = styled.div`
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
padding: 2em;
|
||
|
|
display: flex;
|
||
|
|
background-color: ${colours.midnightDarker};
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: fixed;
|
||
|
|
overflow-y: scroll;
|
||
|
|
|
||
|
|
p,
|
||
|
|
h1,
|
||
|
|
h2 {
|
||
|
|
color: ${colours.midnightDarker};
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 1200px) {
|
||
|
|
padding: 1.5em;
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 800px) {
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
export const Top = styled.div`
|
||
|
|
width: 50%;
|
||
|
|
`
|
||
|
|
|
||
|
|
const gradientColourLight = '#F8E5E2'
|
||
|
|
const gradientColourDark = colours.midnightDarker
|
||
|
|
const getGradient = (direction, lightDark) =>
|
||
|
|
`linear-gradient(to ${direction}, ${lightDark === 'dark' ? gradientColourDark : gradientColourLight
|
||
|
|
}ee 0%,${lightDark === 'dark' ? gradientColourDark : gradientColourLight
|
||
|
|
}00 100%);`
|
||
|
|
|
||
|
|
// prettier-ignore
|
||
|
|
export const Fade = styled.div`
|
||
|
|
width: 100%;
|
||
|
|
background-color: linear;
|
||
|
|
position: fixed;
|
||
|
|
padding: 2em 0 1em 2em;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
background: ${getGradient('bottom')};
|
||
|
|
`
|
||
|
|
|
||
|
|
export const Hero = styled.div`
|
||
|
|
width: ${heroWidth};
|
||
|
|
height: 100vh;
|
||
|
|
background: url(${bg});
|
||
|
|
background-size: cover;
|
||
|
|
background-position-x: right;
|
||
|
|
background-position-y: 60%;
|
||
|
|
position: fixed;
|
||
|
|
padding: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
padding: 2em 2em 8px 2em;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
pointer-events: none;
|
||
|
|
|
||
|
|
/*
|
||
|
|
h1:not(:last-of-type) {
|
||
|
|
font-size: 30vh;
|
||
|
|
|
||
|
|
@media screen and (max-height: 600px) {
|
||
|
|
font-size: 20vh;
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 1200px) {
|
||
|
|
font-size: 20vh;
|
||
|
|
}
|
||
|
|
} */
|
||
|
|
|
||
|
|
@media screen and (max-width: 1000px) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
export const LoaderWrapper = styled.div`
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
width: 33vw;
|
||
|
|
|
||
|
|
@media screen and (max-width: 1000px) {
|
||
|
|
width: 100vw;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
export const Content = styled.div`
|
||
|
|
/* margin-bottom: 3em; */
|
||
|
|
`
|
||
|
|
|
||
|
|
export const PositionedLogo = styled(Logo)`
|
||
|
|
position: fixed;
|
||
|
|
top: 2em;
|
||
|
|
left: 3em;
|
||
|
|
`
|
||
|
|
|
||
|
|
export const FadeBottom = styled.div`
|
||
|
|
background: ${getGradient('top', 'dark')};
|
||
|
|
width: ${heroWidth};
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
padding-bottom: 0.5em;
|
||
|
|
right: 0;
|
||
|
|
/* left: 0; */
|
||
|
|
pointer-events: none;
|
||
|
|
min-height: 75px;
|
||
|
|
`
|
||
|
|
|
||
|
|
export const TaglineContainer = styled.div`
|
||
|
|
width: 100%;
|
||
|
|
bottom: 0em;
|
||
|
|
padding-bottom: 0;
|
||
|
|
right: 1em;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-end;
|
||
|
|
|
||
|
|
position: fixed;
|
||
|
|
z-index: 2;
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin-bottom: 0.2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 1000px) {
|
||
|
|
h1 {
|
||
|
|
color: ${colours.rose};
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`
|