refactor(presenterModes): adjust fonts and spacing to screen (#723)

src/scripts/components/stories/splash-screen/splash-screen.tsx

@@ -5,9 +5,9 @@ import cx from 'classnames';
 import {getStoryAssetUrl} from '../../../libs/get-story-asset-urls';
 
 import {Slide} from '../../../types/story';
+import {StoryMode} from '../../../types/story-mode';
 
 import styles from './splash-screen.styl';
-import {StoryMode} from '../../../types/story-mode';
 
 interface Props {
   storyId: string;

src/scripts/components/stories/story-content/story-content.styl

@@ -34,11 +34,14 @@
 
 .shortTextContent
   overflow-y: hidden
-  padding-top: emCalc(30px)
-  font-size: emCalc(24px)
+  padding: emCalc(40px)
+  font-size: 2.3vh
 
-  p
-    margin: emCalc(10px) 0
+h2
+  margin-top: 0
+
+p
+  margin: emCalc(10px) 0
 
 @media screen and (max-width: 480px)
   .content

src/scripts/components/stories/story-list/story-list.styl

@@ -14,8 +14,12 @@
   grid-gap: 16px
 
 .present
+  padding-top: emCalc(20px)
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr))
 
+.showcase
+  padding-top: emCalc(20px)
+
 @media screen and (max-width: 480px)
   .storyListGrid
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))

src/scripts/components/stories/story-list/story-list.tsx

@@ -28,7 +28,8 @@ const StoryList: FunctionComponent<Props> = ({
 
   const classes = cx(
     styles.storyListGrid,
-    mode === StoryMode.Present && styles.present
+    mode === StoryMode.Present && styles.present,
+    mode === StoryMode.Showcase && styles.showcase
   );
 
   return (

src/scripts/components/stories/story-video/story-video.styl

@@ -1,5 +1,8 @@
 @require '../../../../variables.styl'
 
 .storyVideo
-  padding: emCalc(80px) emCalc(56px)
+  padding: emCalc(50px) emCalc(56px)
   background-color: $plainBlack
+
+.presentationVideo
+  padding-bottom: 15vh

src/scripts/components/stories/story-video/story-video.tsx

@@ -1,19 +1,27 @@
 import React, {FunctionComponent} from 'react';
 import {useSelector} from 'react-redux';
+import cx from 'classnames';
 
 import {languageSelector} from '../../../selectors/language';
 
+import {StoryMode} from '../../../types/story-mode';
+
 import styles from './story-video.styl';
 
 interface Props {
   videoId: string;
+  mode: StoryMode | null;
 }
 
-const StoryVideo: FunctionComponent<Props> = ({videoId}) => {
+const StoryVideo: FunctionComponent<Props> = ({mode, videoId}) => {
   const language = useSelector(languageSelector);
+  const classes = cx(
+    styles.storyVideo,
+    mode !== StoryMode.Stories && styles.presentationVideo
+  );
 
   return (
-    <div className={styles.storyVideo}>
+    <div className={classes}>
       <iframe
         width="100%"
         height="100%"

src/scripts/components/stories/story/story.tsx

@@ -75,7 +75,7 @@ const Story: FunctionComponent = () => {
         />
       );
     } else if (slide.type === SlideType.Video && slide.videoId) {
-      return <StoryVideo videoId={slide.videoId} />;
+      return <StoryVideo mode={mode} videoId={slide.videoId} />;
     }
 
     return (