From 2c1fd34d20f199601d12857969b96e3b7613f081 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 26 Mar 2019 12:33:20 -0400
Subject: [PATCH] took sip section out of educators masthead, put between
 masthead and main content

---
 src/views/teachers/landing/landing.jsx  | 70 ++++++++++++-------------
 src/views/teachers/landing/landing.scss | 23 ++++----
 2 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/src/views/teachers/landing/landing.jsx b/src/views/teachers/landing/landing.jsx
index 239daef5f..7189b5a54 100644
--- a/src/views/teachers/landing/landing.jsx
+++ b/src/views/teachers/landing/landing.jsx
@@ -65,42 +65,42 @@ const Landing = props => (
                     </a>
                 </SubNavigation>
             </div>
-            <div className="sub-band-feature-outer">
-                <div className="sub-band-feature-inner">
-                    <SubNavigation className="inner">
-                        <section id="sip">
-                            <FlexRow className="educators-using">
-                                <div className="using-scratch-image">
-                                    <img src="images/teachers/makey-activity.png" />
-                                </div>
-                                <div className="sip-info">
-                                    <h2><FormattedMessage id="teacherlanding.howUsingScratch" /></h2>
-                                    <p>
-                                        <FormattedMessage
-                                            id="teacherlanding.sip"
-                                            values={{
-                                                abbreviatedSipName: (
-                                                    <FormattedMessage id="teacherlanding.abbreviatedSipName" />
-                                                ),
-                                                sipName: (
-                                                    <FormattedMessage id="teacherlanding.sipName" />
-                                                )
-                                            }}
-                                        />
-                                    </p>
-                                    <a href="https://sip.scratch.mit.edu/">
-                                        <Button className="sip-button large icon-right">
-                                            <FormattedMessage id="teacherlanding.seeLatest" />
-                                            <img src="/svgs/project/r-arrow.svg" />
-                                        </Button>
-                                    </a>
-                                </div>
-                            </FlexRow>
-                        </section>
-                    </SubNavigation>
-                </div>
-            </div>
         </TitleBanner>
+
+        <div className="feature">
+            <div className="inner">
+                <section id="sip">
+                    <FlexRow className="educators-using">
+                        <div className="using-scratch-image">
+                            <img src="images/teachers/makey-activity.png" />
+                        </div>
+                        <div className="sip-info">
+                            <h2><FormattedMessage id="teacherlanding.howUsingScratch" /></h2>
+                            <p>
+                                <FormattedMessage
+                                    id="teacherlanding.sip"
+                                    values={{
+                                        abbreviatedSipName: (
+                                            <FormattedMessage id="teacherlanding.abbreviatedSipName" />
+                                        ),
+                                        sipName: (
+                                            <FormattedMessage id="teacherlanding.sipName" />
+                                        )
+                                    }}
+                                />
+                            </p>
+                            <a href="https://sip.scratch.mit.edu/">
+                                <Button className="sip-button large icon-right">
+                                    <FormattedMessage id="teacherlanding.seeLatest" />
+                                    <img src="/svgs/project/r-arrow.svg" />
+                                </Button>
+                            </a>
+                        </div>
+                    </FlexRow>
+                </section>
+            </div>
+        </div>
+
         <div className="inner">
             <section id="resources">
                 <span className="nav-spacer" />
diff --git a/src/views/teachers/landing/landing.scss b/src/views/teachers/landing/landing.scss
index dddb9f3b2..d85ca4ac1 100644
--- a/src/views/teachers/landing/landing.scss
+++ b/src/views/teachers/landing/landing.scss
@@ -25,6 +25,7 @@ $story-width: $cols3;
         &.masthead {
             background-color: $teacher-spot;
             padding-bottom: 0;
+            margin-bottom: 0;
 
             h1 {
                 margin: 0;
@@ -76,14 +77,12 @@ $story-width: $cols3;
         }
     }
 
-    .sub-band-feature-outer {
-        background-color: $ui-white;
-
-        .sub-band-feature-inner {
-            background-color: $ui-blue-10percent;
-        }
+    .feature {
+        background-color: $ui-blue-10percent;
+        margin-bottom: 2.75rem;
 
         section#sip {
+            padding-top: .5rem;
             margin-bottom: .5rem;
         }
 
@@ -161,8 +160,8 @@ $story-width: $cols3;
         .nav-spacer { // For making the anchors work.
             display: block;
             visibility: hidden;
-            margin-top: -50px;
-            height: 50px;
+            margin-top: -2.5rem;
+            height: 2.5rem;
         }
 
         margin-bottom: 3rem;
@@ -266,7 +265,7 @@ $story-width: $cols3;
     }
 
     .educators {
-        .sub-band-feature-outer {
+        .feature {
             .educators-using {
                 max-width: 484px;
             }
@@ -325,7 +324,7 @@ $story-width: $cols3;
     }
 
     .educators {
-        .sub-band-feature-outer {
+        .feature {
             .educators-using {
                 max-width: 484px;
             }
@@ -469,7 +468,7 @@ $story-width: $cols3;
             }
         }
 
-        .sub-band-feature-outer {
+        .feature {
             .educators-using {
 
                 .using-scratch-image {
@@ -546,7 +545,7 @@ $story-width: $cols3;
         justify-content: space-between;
     }
 
-    .sub-band-feature-outer {
+    .feature {
         .sip-info {
             padding-top: 2rem;