scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-23 19:30:34 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions2

using white plus transparent blue, instead of introducing new blue

Browse source
This commit is contained in:
Ben Wheeler 2019-03-26 09:26:05 -04:00
parent fc466fa7cc
commit 4f1f712083
3 changed files with 49 additions and 44 deletions
src
_colors.scss
views/teachers/landing
landing.jsxlanding.scss

1
src/_colors.scss
View file

@ -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);

66
src/views/teachers/landing/landing.jsx
View file

@ -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">

26
src/views/teachers/landing/landing.scss
View file

@ -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;