improve cover video spacing and sizing

src/components/FeaturedVideoHeader/FeaturedVideoHeader.style.ts

@@ -6,25 +6,36 @@ import { breakpoints, colors, sizes, spacing, typography } from '@/shared/theme'
 import { Link } from '@reach/router'
 import { css } from '@emotion/core'
 
+const CONTENT_OVERLAP_MAP = {
+  SMALL: 25,
+  MEDIUM: 150,
+  LARGE: 200,
+  XLARGE: 400,
+  XXLARGE: 600,
+}
+const GRADIENT_OVERLAP = 150
+const GRADIENT_HEIGHT = 250
+const INFO_BOTTOM_MARGIN = 100
+
 export const Container = styled.section`
   position: relative;
 
   // because of the fixed aspect ratio, as the viewport width grows, the media will occupy more height as well
   // so that the media doesn't take too big of a portion of the space, we let the content overlap the media via a negative margin
   @media screen and (min-width: ${breakpoints.small}) {
-    margin-bottom: -75px;
+    margin-bottom: -${CONTENT_OVERLAP_MAP.SMALL}px;
   }
   @media screen and (min-width: ${breakpoints.medium}) {
-    margin-bottom: -200px;
+    margin-bottom: -${CONTENT_OVERLAP_MAP.MEDIUM}px;
   }
   @media screen and (min-width: ${breakpoints.large}) {
-    margin-bottom: -250px;
+    margin-bottom: -${CONTENT_OVERLAP_MAP.LARGE}px;
   }
   @media screen and (min-width: ${breakpoints.xlarge}) {
-    margin-bottom: -400px;
+    margin-bottom: -${CONTENT_OVERLAP_MAP.XLARGE}px;
   }
   @media screen and (min-width: ${breakpoints.xxlarge}) {
-    margin-bottom: -600px;
+    margin-bottom: -${CONTENT_OVERLAP_MAP.XXLARGE}px;
   }
 `
 
@@ -52,58 +63,92 @@ export const PlayerContainer = styled.div`
   ${absoluteMediaCss};
 `
 
-export const GradientOverlay = styled.div`
+export const HorizontalGradientOverlay = styled.div`
+  ${absoluteMediaCss};
+  display: none;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 11.76%, rgba(0, 0, 0, 0) 100%);
+
+  @media screen and (min-width: ${breakpoints.small}) {
+    display: block;
+  }
+`
+
+export const VerticalGradientOverlay = styled.div`
   ${absoluteMediaCss};
 
   // as the content overlaps the media more and more as the viewport width grows, we need to hide some part of the media with a gradient
   // this helps with keeping a consistent background behind a page content - we don't want the media to peek out in the content spacing
-  background-image: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 20%);
+  background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) ${GRADIENT_HEIGHT / 2}px);
   @media screen and (min-width: ${breakpoints.small}) {
-    background-image: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 50%);
+    background: linear-gradient(
+      0deg,
+      black 0%,
+      black ${CONTENT_OVERLAP_MAP.SMALL - GRADIENT_OVERLAP}px,
+      rgba(0, 0, 0, 0) ${CONTENT_OVERLAP_MAP.SMALL - GRADIENT_OVERLAP + GRADIENT_HEIGHT}px
+    );
   }
   @media screen and (min-width: ${breakpoints.medium}) {
-    background-image: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 70%);
+    background: linear-gradient(
+      0deg,
+      black 0%,
+      black ${CONTENT_OVERLAP_MAP.MEDIUM - GRADIENT_OVERLAP}px,
+      rgba(0, 0, 0, 0) ${CONTENT_OVERLAP_MAP.MEDIUM - GRADIENT_OVERLAP + GRADIENT_HEIGHT}px
+    );
   }
   @media screen and (min-width: ${breakpoints.large}) {
-    background-image: linear-gradient(0deg, black 0%, black 20%, rgba(0, 0, 0, 0) 90%);
+    background: linear-gradient(
+      0deg,
+      black 0%,
+      black ${CONTENT_OVERLAP_MAP.LARGE - GRADIENT_OVERLAP}px,
+      rgba(0, 0, 0, 0) ${CONTENT_OVERLAP_MAP.LARGE - GRADIENT_OVERLAP + GRADIENT_HEIGHT}px
+    );
   }
   @media screen and (min-width: ${breakpoints.xlarge}) {
-    background-image: linear-gradient(0deg, black 0%, black 25%, rgba(0, 0, 0, 0) 90%);
+    background: linear-gradient(
+      0deg,
+      black 0%,
+      black ${CONTENT_OVERLAP_MAP.XLARGE - GRADIENT_OVERLAP}px,
+      rgba(0, 0, 0, 0) ${CONTENT_OVERLAP_MAP.XLARGE - GRADIENT_OVERLAP + GRADIENT_HEIGHT}px
+    );
   }
   @media screen and (min-width: ${breakpoints.xxlarge}) {
-    background-image: linear-gradient(0deg, black 0%, black 30%, rgba(0, 0, 0, 0) 90%);
+    background: linear-gradient(
+      0deg,
+      black 0%,
+      black ${CONTENT_OVERLAP_MAP.XXLARGE - GRADIENT_OVERLAP}px,
+      rgba(0, 0, 0, 0) ${CONTENT_OVERLAP_MAP.XXLARGE - GRADIENT_OVERLAP + GRADIENT_HEIGHT}px
+    );
   }
 `
 
 export const InfoContainer = styled.div`
   position: relative;
   margin-top: -${spacing.xxl};
-  padding-bottom: ${spacing.xs};
+  padding-bottom: ${spacing.xxxxl};
 
   @media screen and (min-width: ${breakpoints.small}) {
     position: absolute;
     margin: 0;
     padding: 0;
-    bottom: 15%;
-    max-width: 80%;
+    bottom: ${CONTENT_OVERLAP_MAP.SMALL + INFO_BOTTOM_MARGIN / 4}px;
+    max-width: 400px;
   }
 
   @media screen and (min-width: ${breakpoints.medium}) {
-    bottom: 30%;
-    max-width: 60%;
+    bottom: ${CONTENT_OVERLAP_MAP.MEDIUM + INFO_BOTTOM_MARGIN / 2}px;
+    max-width: 600px;
   }
 
   @media screen and (min-width: ${breakpoints.large}) {
-    bottom: 35%;
-    max-width: 40%;
+    bottom: ${CONTENT_OVERLAP_MAP.LARGE + INFO_BOTTOM_MARGIN}px;
   }
 
   @media screen and (min-width: ${breakpoints.xlarge}) {
-    bottom: 45%;
+    bottom: ${CONTENT_OVERLAP_MAP.XLARGE + INFO_BOTTOM_MARGIN}px;
   }
 
   @media screen and (min-width: ${breakpoints.xxlarge}) {
-    bottom: 60%;
+    bottom: ${CONTENT_OVERLAP_MAP.XXLARGE + INFO_BOTTOM_MARGIN}px;
   }
 `
 
@@ -131,19 +176,22 @@ export const TitleContainer = styled.div`
   }
 
   h2 {
-    ${fluidRange({ prop: 'fontSize', fromSize: '40px', toSize: '60px' })};
-    ${fluidRange({ prop: 'lineHeight', fromSize: '48px', toSize: '68px' })};
+    ${fluidRange({ prop: 'fontSize', fromSize: '40px', toSize: '72px' }, '320px', '1920px')};
+    ${fluidRange({ prop: 'lineHeight', fromSize: '48px', toSize: '68px' }, '320px', '1920px')};
     font-family: ${typography.fonts.headers};
     font-weight: 700;
-    margin: 0 0 ${spacing.s} 0;
+
+    display: inline-block;
+    margin: 0 0 ${spacing.m} 0;
     @media screen and (min-width: ${breakpoints.medium}) {
-      margin-bottom: ${spacing.m};
+      margin-bottom: ${spacing.l};
     }
   }
 
   span {
-    ${fluidRange({ prop: 'fontSize', fromSize: '14px', toSize: '28px' })};
-    ${fluidRange({ prop: 'lineHeight', fromSize: '20px', toSize: '30px' })};
+    display: block;
+    ${fluidRange({ prop: 'fontSize', fromSize: '14px', toSize: '22px' }, '320px', '1920px')};
+    ${fluidRange({ prop: 'lineHeight', fromSize: '20px', toSize: '26px' }, '320px', '1920px')};
     color: ${colors.white};
   }
 `

src/components/FeaturedVideoHeader/FeaturedVideoHeader.tsx

@@ -3,7 +3,7 @@ import {
   ButtonsContainer,
   ChannelLink,
   Container,
-  GradientOverlay,
+  HorizontalGradientOverlay,
   InfoContainer,
   Media,
   MediaWrapper,
@@ -12,6 +12,7 @@ import {
   SoundButton,
   StyledAvatar,
   TitleContainer,
+  VerticalGradientOverlay,
 } from './FeaturedVideoHeader.style'
 import { CSSTransition } from 'react-transition-group'
 import { mockCoverVideo, mockCoverVideoChannel, mockCoverVideoMedia } from '@/mocking/data/mockCoverVideo'
@@ -52,7 +53,8 @@ const FeaturedVideoHeader: React.FC = () => {
               src={mockCoverVideoMedia.location}
             />
           </PlayerContainer>
-          <GradientOverlay />
+          <HorizontalGradientOverlay />
+          <VerticalGradientOverlay />
         </Media>
       </MediaWrapper>
       <InfoContainer>

src/views/HomeView.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { ChannelGallery, FeaturedVideoHeader, ErrorFallback, VideoGallery } from '@/components'
+import { ChannelGallery, ErrorFallback, FeaturedVideoHeader, VideoGallery } from '@/components'
 
 import { RouteComponentProps } from '@reach/router'
 import { useQuery } from '@apollo/client'
@@ -10,7 +10,6 @@ import { GET_FEATURED_VIDEOS, GET_NEWEST_CHANNELS, GET_NEWEST_VIDEOS } from '@/a
 import { GetFeaturedVideos } from '@/api/queries/__generated__/GetFeaturedVideos'
 import { GetNewestVideos, GetNewestVideosVariables } from '@/api/queries/__generated__/GetNewestVideos'
 import { GetNewestChannels, GetNewestChannelsVariables } from '@/api/queries/__generated__/GetNewestChannels'
-import { spacing } from '@/shared/theme'
 
 const NEWEST_VIDEOS_COUNT = 8
 const NEWEST_CHANNELS_COUNT = 8
@@ -84,7 +83,6 @@ const HomeView: React.FC<RouteComponentProps> = () => {
 
 const Container = styled.div`
   position: relative;
-  margin: ${spacing.xxxxl} 0;
   & > * {
     margin-bottom: 3rem;
   }