fix(docs): Fix visual glitch in landing page logo

docs/assets/scripts/intro/intro.ts

@@ -4,13 +4,15 @@ import { TerminalTyper } from './terminal-typer';
 // tslint:disable-next-line
 require('../../styles/intro/intro.scss');
 
+const container = document.querySelector('.intro-container');
 const textArea = document.querySelector('.vendure-intro .intro-text-area');
 const scene = document.querySelector('.vendure-intro .scene');
 const controls = document.querySelector('.vendure-intro .intro-controls');
 const title = document.querySelector('.vendure-intro .intro-title');
 const INTRO_VIEWED_KEY = 'v-intro-viewed';
 
-if (textArea && scene && controls && title) {
+if (container && textArea && scene && controls && title) {
+    container.classList.add('visible');
     const replayButton = controls.querySelector('#replay');
     const terminalCommands = `$ install @vendure/core\n` +
         `$ vendure init\n` +

docs/assets/styles/_landing-page.scss

@@ -129,6 +129,7 @@
             display: flex;
             align-items: center;
             @media screen and (max-width: $sm-breakpoint) {
+                min-width: 0;
                 flex-direction: column;
             }
             @media screen and (min-width: $lg-breakpoint) {

docs/assets/styles/intro/intro.scss

@@ -40,6 +40,12 @@
     max-width: $container-max-width;
     margin: auto;
     position: relative;
+    transition: opacity 1s;
+    opacity: 0;
+
+    &.visible {
+        opacity: 1;
+    }
 }
 
 .scene {
@@ -50,13 +56,8 @@
     justify-content: center;
     height: 40vw;
     transform: rotateX(-45deg);
-    transition: transform $transition-duration, perspective $transition-duration, opacity 0.2s 0.5s;
+    transition: transform $transition-duration, perspective $transition-duration;
     font-family: sans-serif;
-    opacity: 0;
-
-    &.visible {
-        opacity: 1;
-    }
     @media all and (min-height: 1000px) {
         height: 50vw;
     }
@@ -124,7 +125,7 @@
     }
     @media all and (max-width: $sm-breakpoint) {
         top: 60vw;
-        right: 36px;
+        right: 0;
         text-align: center;
         padding: 0 24px;
         h1 {