From 08178a58e53da8852f0e03268c202154f1591109 Mon Sep 17 00:00:00 2001
From: Connor Hudson <cohu3291@colorado.edu>
Date: Tue, 3 Jul 2018 14:48:20 -0400
Subject: [PATCH] Initial work on responsive middle banner

---
 src/views/splash/beta/middle-banner.jsx  | 15 ++++++++--
 src/views/splash/beta/middle-banner.scss | 38 ++++++++++++++++++++----
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/views/splash/beta/middle-banner.jsx b/src/views/splash/beta/middle-banner.jsx
index 5b8399960..a3a57a549 100644
--- a/src/views/splash/beta/middle-banner.jsx
+++ b/src/views/splash/beta/middle-banner.jsx
@@ -2,9 +2,13 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const React = require('react');
 
+const MediaQuery = require('react-responsive').default;
+
 const FlexRow = require('../../../components/flex-row/flex-row.jsx');
 const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
 
+const frameless = require('../../../lib/frameless');
+
 require('./middle-banner.scss');
 
 const MiddleBanner = () => (
@@ -17,8 +21,15 @@ const MiddleBanner = () => (
                 href="https://beta.scratch.mit.edu/"
             >Try it!</a>
         </FlexRow>
-        <div className="beta-banner-image">
-            <img src="/images/beta/right-illustration.png" />
+        <div className="beta-banner-images">
+            <MediaQuery maxWidth={frameless.desktop - 1}>
+                <div className="beta-banner-image left">
+                    <img src="/images/beta/left-illustration.png" />
+                </div>
+            </MediaQuery>
+            <div className="beta-banner-image right">
+                <img src="/images/beta/right-illustration.png" />
+            </div>
         </div>
     </TitleBanner>
 );
diff --git a/src/views/splash/beta/middle-banner.scss b/src/views/splash/beta/middle-banner.scss
index 19c82a760..411070fb1 100644
--- a/src/views/splash/beta/middle-banner.scss
+++ b/src/views/splash/beta/middle-banner.scss
@@ -10,6 +10,7 @@
     background-size: cover;
     padding: 0;
     height: 17rem;
+    overflow: hidden;
     box-sizing: border-box;
     justify-content: center;
 
@@ -19,15 +20,20 @@
         flex-shrink: 0;
     }
 
-    .beta-banner-image {
+    .beta-banner-images {
         display: flex;
-        margin-right: 2rem;
-        min-width: 0;
         align-self: flex-end;
 
-        img {
-            max-width: 100%;
-            height: auto;
+        .beta-banner-image {
+            display: flex;
+            margin-right: 2rem;
+            min-width: 0;
+            align-self: flex-end;
+
+            img {
+                max-width: 100%;
+                height: auto;
+            }
         }
     }
 
@@ -46,9 +52,29 @@
 
 @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
     .beta-middle-banner {
+        height: initial;
+        flex-direction: column;
+
         .beta-middle-container {
+            padding-top: 4rem;
+            padding-left: 0;
             align-items: center;
         }
+
+        .beta-banner-images {
+            .beta-banner-image {
+                margin: 0;
+                padding: 0;
+
+                &.left {
+                    margin-left: -2.5rem;
+                }
+
+                &.right {
+                    margin-right: -2.5rem;
+                }
+            }
+        }
     }
 }