From 4f1f712083315b0fbb400be92c203e941af2a14a Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 26 Mar 2019 09:26:05 -0400
Subject: [PATCH] using white plus transparent blue, instead of introducing new
blue
---
src/_colors.scss | 1 -
src/views/teachers/landing/landing.jsx | 66 +++++++++++++------------
src/views/teachers/landing/landing.scss | 26 +++++-----
3 files changed, 49 insertions(+), 44 deletions(-)
diff --git a/src/_colors.scss b/src/_colors.scss
index d56c80dda..a963d81d2 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -1,7 +1,6 @@
/* UI Primary Colors */
$ui-blue: hsla(215, 100, 65, 1); // #4C97FF Motion Primary
$ui-blue-dark: hsla(215, 65, 55, 1); // #3373CC Motion Secondary
-$ui-blue-very-light: hsla(215, 100, 95, 1);
$ui-blue-10percent: hsla(215, 100, 65, .1);
$ui-blue-25percent: hsla(215, 100, 65, .25);
diff --git a/src/views/teachers/landing/landing.jsx b/src/views/teachers/landing/landing.jsx
index 223b32e60..239daef5f 100644
--- a/src/views/teachers/landing/landing.jsx
+++ b/src/views/teachers/landing/landing.jsx
@@ -65,38 +65,40 @@ const Landing = props => (
</a>
</SubNavigation>
</div>
- <div className="feature">
- <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 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="inner">
diff --git a/src/views/teachers/landing/landing.scss b/src/views/teachers/landing/landing.scss
index 5206dcc23..dddb9f3b2 100644
--- a/src/views/teachers/landing/landing.scss
+++ b/src/views/teachers/landing/landing.scss
@@ -76,8 +76,12 @@ $story-width: $cols3;
}
}
- .feature {
- background-color: $ui-blue-very-light;
+ .sub-band-feature-outer {
+ background-color: $ui-white;
+
+ .sub-band-feature-inner {
+ background-color: $ui-blue-10percent;
+ }
section#sip {
margin-bottom: .5rem;
@@ -88,7 +92,7 @@ $story-width: $cols3;
align-items: start;
.using-scratch-image {
- width: 420px;
+ max-width: 420px;
padding: 2.75rem 2rem;
img {
@@ -98,7 +102,7 @@ $story-width: $cols3;
}
.sip-info {
- width: 21.75rem;
+ max-width: 21.75rem;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
@@ -262,9 +266,9 @@ $story-width: $cols3;
}
.educators {
- .feature {
+ .sub-band-feature-outer {
.educators-using {
- width: 484px;
+ max-width: 484px;
}
.sip-info {
@@ -321,9 +325,9 @@ $story-width: $cols3;
}
.educators {
- .feature {
+ .sub-band-feature-outer {
.educators-using {
- width: 484px;
+ max-width: 484px;
}
.sip-info {
@@ -465,11 +469,11 @@ $story-width: $cols3;
}
}
- .feature {
+ .sub-band-feature-outer {
.educators-using {
.using-scratch-image {
- width: 300px;
+ max-width: 300px;
padding: 2.75rem 1.25rem;
}
@@ -542,7 +546,7 @@ $story-width: $cols3;
justify-content: space-between;
}
- .feature {
+ .sub-band-feature-outer {
.sip-info {
padding-top: 2rem;