stream/src/components/InfoLayout/styles.js

import styled from 'styled-components'
import { colours } from '../../assets/theme'

import Logo from '../Logo'

const heroWidth = 'calc(100vw - 600px - 4em)'

export const Wrapper = styled.div`
  height: 100vh;
  width: 100vw;
  padding: 2em;
  display: flex;
  background-color: ${colours.midnight};
  box-sizing: border-box;
  position: fixed;
  overflow-y: scroll;

  p,
  h1,
  h2 {
    color: ${colours.rose};
  }

  @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(${(props) => props.image});
  background-size: cover;
  background-position-x: right;
  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,
  h2 {
    color: ${colours.offwhite};
  }

  h1:not(:last-of-type) {
    font-size: 12vw;
    margin-bottom: 0.5em;

    @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: 600px;
`

export const Content = styled.div`
  /* margin-bottom: 3em; */
`

export const PositionedLogo = styled(Logo)``

export const FadeBottom = styled.div`
  background: ${getGradient('top', 'dark')};
  width: ${heroWidth};
  position: fixed;
  bottom: 0em;
  padding-bottom: 0.5em;
  right: 0;
  /* left: 0; */
  pointer-events: none;
  min-height: 75px;

  /* @media screen and (max-width: 800px) {
    h1 {
      font-size: 24px;
    }
  } */
`

export const TaglineContainer = styled.div`
  width: 100%;
  bottom: 0em;
  padding-bottom: 0.5em;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;

  a {
    pointer-events: all;
  }
`