55 lines
1.2 KiB
JavaScript
55 lines
1.2 KiB
JavaScript
|
import styled from 'styled-components'
|
||
|
|
import { colours } from '../../assets/theme'
|
||
|
|
import Logo from '../Logo'
|
||
|
|
|
||
|
|
export const Wrapper = styled.div`
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
padding: 6em 2em 2em 2em;
|
||
|
|
display: flex;
|
||
|
|
/* justify-content: space-between; */
|
||
|
|
/* flex-direction: column; */
|
||
|
|
|
||
|
|
background: url(https://images.unsplash.com/photo-1579762715118-a6f1d4b934f1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=3031&q=80)
|
||
|
|
${colours.rose};
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-size: cover;
|
||
|
|
background-position-y: 50%;
|
||
|
|
background-position-x: 23vw;
|
||
|
|
background-blend-mode: soft-light;
|
||
|
|
position: fixed;
|
||
|
|
overflow-y: scroll;
|
||
|
|
|
||
|
|
p,
|
||
|
|
h1,
|
||
|
|
h2 {
|
||
|
|
color: ${colours.midnightDarker};
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 1200px) {
|
||
|
|
padding: 6em 1.5em 1.5em 1.5em;
|
||
|
|
background-size: 150%;
|
||
|
|
background-position-x: 0vw;
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 800px) {
|
||
|
|
padding: 6em 1em 1em 1em;
|
||
|
|
background-size: 250%;
|
||
|
|
background-position-x: -50vw;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
export const Top = styled.div`
|
||
|
|
width: 50%;
|
||
|
|
`
|
||
|
|
export const Content = styled.div``
|
||
|
|
|
||
|
|
export const PositionedLogo = styled(Logo)`
|
||
|
|
position: fixed;
|
||
|
|
top: 2em;
|
||
|
|
`
|
||
|
|
|
||
|
|
export const TaglineContainer = styled.div`
|
||
|
|
position: fixed;
|
||
|
|
bottom: 2em;
|
||
|
|
`
|