scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-22 15:17:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add new WeDo landing page, move old one to wedo-legacy

Browse source
This commit is contained in:
Eric Rosenbaum 2018-08-13 15:55:26 -04:00
parent 3f3c36d733
commit 0c628c3e97
30 changed files with 695 additions and 391 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/routes.json
View file

@ -301,6 +301,13 @@
"view": "wedo2/wedo2",
"title": "LEGO WeDo 2.0"
},
{
"name": "wedo-legacy",
"pattern": "^/wedo-legacy/?$",
"routeAlias": "/wedo-legacy/?$",
"view": "wedo2-legacy/wedo2",
"title": "LEGO WeDo"
},
{
"name": "ev3",
"pattern": "^/ev3/?$",

21
src/views/wedo2-legacy/l10n.json Normal file
View file

@ -0,0 +1,21 @@
{
"wedoLegacy.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.",
"wedoLegacy.requirement": "The LEGO WeDo 2.0 extension is available for Mac OSX and Windows 10+.",
"wedoLegacy.getStarted": "Getting Started with LEGO WeDo 2.0",
"wedoLegacy.installTitle": "1. Install Device Manager",
"wedoLegacy.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth",
"wedoLegacy.downloadMac": "Download for Mac OSX",
"wedoLegacy.downloadWin": "Download for Windows 10+",
"wedoLegacy.setupTitle": "2. Setup & Help",
"wedoLegacy.setupText": "Connect your WeDo 2.0 by following the steps in the <a href=\"/projects/editor/?tip_bar=ext2\">Tips Window</a>",
"wedoLegacy.createTitle": "3. Create",
"wedoLegacy.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
"wedoLegacy.wedo2SetupInstructions": "WeDo 2.0 Setup Instructions",
"wedoLegacy.wedo1SetupInstructions": "WeDo 1.0 Setup Instructions",
"wedoLegacy.starterProjects": "WeDo 2.0 Starter Projects",
"wedoLegacy.starterMotor": "Motor",
"wedoLegacy.starterDistance": "Distance Sensor",
"wedoLegacy.starterTilt": "Tilt Sensor",
"wedoLegacy.versionTitle": "Which version do you have?",
"wedoLegacy.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
}

155
src/views/wedo2-legacy/wedo2.jsx Normal file
View file

@ -0,0 +1,155 @@
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const FormattedMessage = require('react-intl').FormattedMessage;
const React = require('react');
const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');
require('./wedo2.scss');
const Wedo2 = () => (
<div className="wedo">
<div className="top-banner">
<div className="inner">
<div className="columns2">
<div className="banner-text">
<h2>LEGO WeDo 2.0 &amp; Scratch</h2>
<p className="intro">
<FormattedMessage id="wedoLegacy.intro" />
</p>
</div>
<div className="banner-photo">
<img src="/images/wedo-legacy/wedo-milo.png" />
</div>
</div>
</div>
</div>
<div className="inner">
<section id="getting-started">
<h3>
<FormattedMessage id="wedoLegacy.getStarted" />
</h3>
<p className="callout">
<FormattedMessage id="wedoLegacy.requirement" />
</p>
<div className="columns3">
<div className="column">
<img src="/images/wedo-legacy/download-device-manager.png" />
<h4>
<FormattedMessage id="wedoLegacy.installTitle" />
</h4>
<p>
<FormattedHTMLMessage id="wedoLegacy.installText" />
<br />
<a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
<FormattedMessage id="wedoLegacy.downloadMac" />
</a>
<br />
<a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
<FormattedMessage id="wedoLegacy.downloadWin" />
</a>
</p>
</div>
<div className="column">
<img src="/images/wedo-legacy/set-up.png" />
<h4>
<FormattedMessage id="wedoLegacy.setupTitle" />
</h4>
<p>
<FormattedHTMLMessage id="wedoLegacy.setupText" />
</p>
</div>
<div className="column">
<img src="/images/wedo-legacy/create-and-share.png" />
<h4>
<FormattedMessage id="wedoLegacy.createTitle" />
</h4>
<p>
<FormattedMessage id="wedoLegacy.createText" />
</p>
</div>
</div>
</section>
</div>
<div className="banner">
<div
className="inner"
id="starter-projects"
>
<h3>
<FormattedMessage id="wedoLegacy.starterProjects" />
</h3>
<div className="project-list">
<a href="/projects/101037564/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo-legacy/motor.png"
/>
<p>
<FormattedMessage id="wedoLegacy.starterMotor" />
</p>
</div>
</a>
<a href="/projects/101038249/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo-legacy/distance.png"
/>
<p>
<FormattedMessage id="wedoLegacy.starterDistance" />
</p>
</div>
</a>
<a href="/projects/101033190/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo-legacy/tilt.png"
/>
<p>
<FormattedMessage id="wedoLegacy.starterTilt" />
</p>
</div>
</a>
</div>
</div>
</div>
<div className="inner">
<section>
<h3>
<FormattedMessage id="wedoLegacy.versionTitle" />
</h3>
<p>
<FormattedMessage id="wedoLegacy.versionText" />
</p>
<div className="device-card">
<h4>LEGO WeDo 1.0 Hub</h4>
<img
alt="LEGO WeDo 1.0 Hub"
src="/images/wedo-legacy/wedo1.png"
/>
<a href="/projects/editor/?tip_bar=ext1">
<FormattedMessage id="wedoLegacy.wedo1SetupInstructions" />
</a>
</div>
<div className="device-card">
<h4>LEGO WeDo 2.0 Hub</h4>
<img
alt="LEGO WeDo 2.0 Hub"
src="/images/wedo-legacy/wedo2.png"
/>
<a href="/projects/editor/?tip_bar=ext2">
<FormattedMessage id="wedoLegacy.wedo2SetupInstructions" />
</a>
</div>
</section>
</div>
</div>
);
render(<Page><Wedo2 /></Page>, document.getElementById('app'));

232
src/views/wedo2-legacy/wedo2.scss Normal file
View file

@ -0,0 +1,232 @@
@import "../../colors";
@import "../../frameless";
#view {
padding: 0;
}
.wedo {
h3,
h4 {
margin: 1.5em 0 .3em;
}
h2 {
margin: .75em 0 .3em;
}
p {
margin: .25em 0 1em;
&.intro {
margin-bottom: 1em;
}
&.callout {
padding: .75em 1em;
text-align: center;
}
}
.top-banner {
margin-bottom: 50px;
background-color: $ui-blue;
padding: 50px 0;
width: 100%;
h2 {
color: $ui-white;
}
p {
color: $ui-white;
}
.columns2 {
display: flex;
justify-content: space-between;
align-items: center;
}
.banner-text {
max-width: $cols7;
}
.banner-photo {
max-width: $cols4;
img {
width: 100%;
}
}
}
section {
margin-bottom: 50px;
text-align: center;
}
// Getting Started Section
.columns3 {
display: flex;
justify-content: space-between;
.column {
margin: 15px;
max-width: $cols4;
img {
margin: 0 auto;
width: 80%;
}
}
}
// Project Highlight Section
#starter-projects {
h3,
p {
text-align: center;
}
}
.banner {
background-color: $ui-gray;
padding: 10px 0 50px;
h3 {
margin-top: 30px;
}
}
.project-list {
display: flex;
margin: 0 auto;
max-width: $cols9;
justify-content: space-between;
}
.project-card {
transition: transform .25s ease;
margin: 10px;
border-radius: 7px;
background-color: $ui-white;
max-width: $cols3;
overflow: hidden;
img {
border-bottom: 2px solid $ui-white;
width: 100%;
}
p {
display: block;
margin: 15px 15px 20px;
color: $ui-blue;
font-weight: 500;
}
&:hover {
transform: scale(1.1, 1.1);
transition: transform .25s ease;
cursor: pointer;
p {
color: $ui-blue-dark;
}
}
}
// Device Cards
.device-card {
display: inline-block;
margin: 0 10px;
max-width: $cols3;
img {
width: 100%;
}
}
}
// Responsive Behavior
//4 columns
@media only screen and (max-width: $mobile - 1) {
.wedo {
.inner {
margin: 0 auto;
width: calc(100% - 40px);
}
.top-banner {
text-align: center;
.banner-photo {
display: none;
}
}
.project-list,
.columns3 {
display: block;
}
.project-card,
.columns3 .column {
display: block;
margin: 20px auto;
width: $cols6;
}
}
}
//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.wedo {
.project-list,
.columns3 {
display: inline-block;
}
.top-banner {
text-align: center;
.banner-photo {
display: none;
}
}
.project-card,
.columns3 .column {
display: inline-block;
width: $cols6;
}
}
}
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
#view {
text-align: center;
}
.wedo {
.top-banner {
text-align: left;
.banner-photo {
max-width: $cols3;
}
}
.inner {
margin: 0 auto;
width: $tablet;
}
}
}

43
src/views/wedo2/l10n.json
View file

@ -1,21 +1,24 @@
{
"wedo2.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.",
"wedo2.requirement": "The LEGO WeDo 2.0 extension is available for Mac OSX and Windows 10+.",
"wedo2.getStarted": "Getting Started with LEGO WeDo 2.0",
"wedo2.installTitle": "1. Install Device Manager",
"wedo2.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth",
"wedo2.downloadMac": "Download for Mac OSX",
"wedo2.downloadWin": "Download for Windows 10+",
"wedo2.setupTitle": "2. Setup & Help",
"wedo2.setupText": "Connect your WeDo 2.0 by following the steps in the <a href=\"/projects/editor/?tip_bar=ext2\">Tips Window</a>",
"wedo2.createTitle": "3. Create",
"wedo2.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
"wedo2.wedo2SetupInstructions": "WeDo 2.0 Setup Instructions",
"wedo2.wedo1SetupInstructions": "WeDo 1.0 Setup Instructions",
"wedo2.starterProjects": "WeDo 2.0 Starter Projects",
"wedo2.starterMotor": "Motor",
"wedo2.starterDistance": "Distance Sensor",
"wedo2.starterTilt": "Tilt Sensor",
"wedo2.versionTitle": "Which version do you have?",
"wedo2.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
}
"wedo2.headerText": "{wedo2Link} is an introductory invention kit you can use to build interactive robots and other creations. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations and sounds.",
"wedo2.gettingStarted": "Getting Started",
"wedo2.connectingWedo2": "Connecting WeDo 2.0 to Scratch",
"wedo2.useScratch3": "Use the {scratch3Link} editor.",
"wedo2.addExtension": "Add the WeDo 2.0 extension.",
"wedo2.thingsToTry": "Things to Try",
"wedo2.makeMotorMove": "Make a motor move",
"wedo2.plugMotorIn": "Plug a motor into the WeDo.",
"wedo2.clickMotorBlock": "Find the {motorBlockText} block and click on it.",
"wedo2.motorBlockText": "\"turn motor on for 1 seconds\"",
"wedo2.starterProjects": "Starter Projects",
"wedo2.starter1Title": "Starter 1",
"wedo2.starter1Description": "This is a project, and it does things.",
"wedo2.starter2Title": "Starter 2",
"wedo2.starter2Description": "This is a project, and it does things.",
"wedo2.starter3Title": "Starter 3",
"wedo2.starter3Description": "This is a project, and it does things.",
"wedo2.troubleshootingTitle": "Troubleshooting",
"wedo2.closeScratchCopiesTitle": "Close other copies of Scratch",
"wedo2.closeScratchCopiesText": "Only one copy of Scratch can connect with the WeDo 2.0 at a time. If you have Scratch open in other browser tabs, close it and try again.",
"wedo2.otherComputerConnectedTitle": "Make sure no other computer is connected to your WeDo 2.0",
"wedo2.otherComputerConnectedText": "Only one computer can be connected to an WeDo 2.0 at a time. If you have another computer connected to your WeDo 2.0, disconnect the WeDo 2.0 or close Scratch on that computer and try again."
}

326
src/views/wedo2/wedo2.jsx
View file

@ -1,155 +1,195 @@
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const FormattedMessage = require('react-intl').FormattedMessage;
const React = require('react');
const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
const ProjectCard = require('../../components/extension-landing/project-card.jsx');
const Steps = require('../../components/steps/steps.jsx');
const Step = require('../../components/steps/step.jsx');
require('../../components/extension-landing/extension-landing.scss');
require('./wedo2.scss');
const Wedo2 = () => (
<div className="wedo">
<div className="top-banner">
<div className="inner">
<div className="columns2">
<div className="banner-text">
<h2>LEGO WeDo 2.0 &amp; Scratch</h2>
<p className="intro">
<FormattedMessage id="wedo2.intro" />
</p>
</div>
<div className="banner-photo">
<img src="/images/wedo/wedo-milo.png" />
</div>
</div>
class Wedo2 extends ExtensionLanding {
render () {
return (
<div className="extension-landing wedo2">
<ExtensionHeader imageSrc="/images/wedo2/wedo2-illustration.png">
<FlexRow className="column extension-copy">
<h2><img src="/images/wedo2/wedo2.svg" />LEGO WeDo 2.0</h2>
<FormattedMessage
id="wedo2.headerText"
values={{
wedo2Link: (
<a
href="https://education.lego.com/en-us/products/lego-education-wedo-2-0-core-set/45300"
rel="noopener noreferrer"
target="_blank"
>
LEGO Education WeDo 2.0
</a>
)
}}
/>
</FlexRow>
<ExtensionRequirements>
<span>
<img src="/svgs/extensions/windows.svg" />
Windows 10+
</span>
<span>
<img src="/svgs/extensions/mac.svg" />
macOS 10.13+
</span>
<span>
<img src="/svgs/extensions/bluetooth.svg" />
Bluetooth
</span>
<span>
<img src="/svgs/extensions/scratch-link.svg" />
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
<OSChooser
currentOS={this.state.OS}
handleSetOS={this.onSetOS}
/>
<InstallScratchLink
currentOS={this.state.OS}
/>
<ExtensionSection className="getting-started">
<h2><FormattedMessage id="wedo2.gettingStarted" /></h2>
<FlexRow className="column getting-started-section">
<h3><FormattedMessage id="wedo2.connectingWedo2" /></h3>
<Steps>
<Step number={1}>
<div className="step-image">
<img
className="screenshot"
src="/images/wedo2/wedo2-connect-1.png"
/>
</div>
<p>
<FormattedMessage
id="wedo2.useScratch3"
values={{
scratch3Link: (
<a
href="https://beta.scratch.mit.edu/"
rel="noopener noreferrer"
target="_blank"
>
Scratch 3.0
</a>
)
}}
/>
</p>
</Step>
<Step number={2}>
<div className="step-image">
<img
className="screenshot"
src="/images/wedo2/wedo2-connect-2.png"
/>
</div>
<p><FormattedMessage id="wedo2.addExtension" /></p>
</Step>
</Steps>
</FlexRow>
</ExtensionSection>
<ExtensionSection className="blue things-to-try">
<h2><FormattedMessage id="wedo2.thingsToTry" /></h2>
<h3><FormattedMessage id="wedo2.makeMotorMove" /></h3>
<Steps>
<Step
compact
number={1}
>
<span className="step-description">
<FormattedMessage id="wedo2.plugMotorIn" />
</span>
<div className="step-image">
<img src="/images/wedo2/wedo2-motor.png" />
</div>
</Step>
<Step
compact
number={2}
>
<span className="step-description">
<FormattedMessage
id="wedo2.clickMotorBlock"
values={{
motorBlockText: (
<strong><FormattedMessage id="wedo2.motorBlockText" /></strong>
)
}}
/>
</span>
<div className="step-image">
<img src="/images/wedo2/wedo2-motor-turn-block.png" />
</div>
</Step>
</Steps>
<hr />
<h3><FormattedMessage id="wedo2.starterProjects" /></h3>
<Steps>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/wedo2/wedo2-starter1.sb3"
description={this.props.intl.formatMessage({id: 'wedo2.starter1Description'})}
imageSrc="/images/wedo2/wedo2-starter1.png"
title={this.props.intl.formatMessage({id: 'wedo2.starter1Title'})}
/>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/wedo2/wedo2-starter2.sb3"
description={this.props.intl.formatMessage({id: 'wedo2.starter2Description'})}
imageSrc="/images/wedo2/wedo2-starter2.png"
title={this.props.intl.formatMessage({id: 'wedo2.starter2Title'})}
/>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/wedo2/wedo2-starter3.sb3"
description={this.props.intl.formatMessage({id: 'wedo2.starter3Description'})}
imageSrc="/images/wedo2/wedo2-starter3.png"
title={this.props.intl.formatMessage({id: 'wedo2.starter3Title'})}
/>
</Steps>
</ExtensionSection>
<ExtensionSection className="faq">
<h2><FormattedMessage id="wedo2.troubleshootingTitle" /></h2>
<h3 className="faq-title"><FormattedMessage id="wedo2.closeScratchCopiesTitle" /></h3>
<p>
<FormattedMessage id="wedo2.closeScratchCopiesText" />
</p>
<h3 className="faq-title"><FormattedMessage id="wedo2.otherComputerConnectedTitle" /></h3>
<p>
<FormattedMessage id="wedo2.otherComputerConnectedText" />
</p>
</ExtensionSection>
</div>
</div>
);
}
}
<div className="inner">
<section id="getting-started">
<h3>
<FormattedMessage id="wedo2.getStarted" />
</h3>
<p className="callout">
<FormattedMessage id="wedo2.requirement" />
</p>
<div className="columns3">
<div className="column">
<img src="/images/wedo/download-device-manager.png" />
<h4>
<FormattedMessage id="wedo2.installTitle" />
</h4>
<p>
<FormattedHTMLMessage id="wedo2.installText" />
<br />
<a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
<FormattedMessage id="wedo2.downloadMac" />
</a>
<br />
<a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
<FormattedMessage id="wedo2.downloadWin" />
</a>
</p>
</div>
<div className="column">
<img src="/images/wedo/set-up.png" />
<h4>
<FormattedMessage id="wedo2.setupTitle" />
</h4>
<p>
<FormattedHTMLMessage id="wedo2.setupText" />
</p>
</div>
<div className="column">
<img src="/images/wedo/create-and-share.png" />
<h4>
<FormattedMessage id="wedo2.createTitle" />
</h4>
<p>
<FormattedMessage id="wedo2.createText" />
</p>
</div>
</div>
</section>
</div>
Wedo2.propTypes = {
intl: intlShape.isRequired
};
<div className="banner">
<div
className="inner"
id="starter-projects"
>
<h3>
<FormattedMessage id="wedo2.starterProjects" />
</h3>
<div className="project-list">
<a href="/projects/101037564/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo/motor.png"
/>
<p>
<FormattedMessage id="wedo2.starterMotor" />
</p>
</div>
</a>
<a href="/projects/101038249/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo/distance.png"
/>
<p>
<FormattedMessage id="wedo2.starterDistance" />
</p>
</div>
</a>
<a href="/projects/101033190/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo/tilt.png"
/>
<p>
<FormattedMessage id="wedo2.starterTilt" />
</p>
</div>
</a>
</div>
</div>
</div>
const WrappedWedo2 = injectIntl(Wedo2);
<div className="inner">
<section>
<h3>
<FormattedMessage id="wedo2.versionTitle" />
</h3>
<p>
<FormattedMessage id="wedo2.versionText" />
</p>
<div className="device-card">
<h4>LEGO WeDo 1.0 Hub</h4>
<img
alt="LEGO WeDo 1.0 Hub"
src="/images/wedo/wedo1.png"
/>
<a href="/projects/editor/?tip_bar=ext1">
<FormattedMessage id="wedo2.wedo1SetupInstructions" />
</a>
</div>
<div className="device-card">
<h4>LEGO WeDo 2.0 Hub</h4>
<img
alt="LEGO WeDo 2.0 Hub"
src="/images/wedo/wedo2.png"
/>
<a href="/projects/editor/?tip_bar=ext2">
<FormattedMessage id="wedo2.wedo2SetupInstructions" />
</a>
</div>
</section>
</div>
</div>
);
render(<Page><Wedo2 /></Page>, document.getElementById('app'));
render(<Page><WrappedWedo2 /></Page>, document.getElementById('app'));

232
src/views/wedo2/wedo2.scss
View file

@ -1,232 +1,8 @@
@import "../../colors";
@import "../../frameless";
#view {
padding: 0;
}
.wedo {
h3,
h4 {
margin: 1.5em 0 .3em;
}
h2 {
margin: .75em 0 .3em;
}
p {
margin: .25em 0 1em;
&.intro {
margin-bottom: 1em;
}
&.callout {
padding: .75em 1em;
text-align: center;
}
}
.top-banner {
margin-bottom: 50px;
background-color: $ui-blue;
padding: 50px 0;
width: 100%;
h2 {
color: $ui-white;
}
p {
color: $ui-white;
}
.columns2 {
display: flex;
justify-content: space-between;
align-items: center;
}
.banner-text {
max-width: $cols7;
}
.banner-photo {
max-width: $cols4;
img {
width: 100%;
}
}
}
section {
margin-bottom: 50px;
text-align: center;
}
// Getting Started Section
.columns3 {
display: flex;
justify-content: space-between;
.column {
margin: 15px;
max-width: $cols4;
img {
margin: 0 auto;
width: 80%;
}
}
}
// Project Highlight Section
#starter-projects {
h3,
p {
text-align: center;
}
}
.banner {
background-color: $ui-gray;
padding: 10px 0 50px;
h3 {
margin-top: 30px;
}
}
.project-list {
display: flex;
margin: 0 auto;
max-width: $cols9;
justify-content: space-between;
}
.project-card {
transition: transform .25s ease;
margin: 10px;
border-radius: 7px;
background-color: $ui-white;
max-width: $cols3;
overflow: hidden;
img {
border-bottom: 2px solid $ui-white;
width: 100%;
}
p {
display: block;
margin: 15px 15px 20px;
color: $ui-blue;
font-weight: 500;
}
&:hover {
transform: scale(1.1, 1.1);
transition: transform .25s ease;
cursor: pointer;
p {
color: $ui-blue-dark;
}
}
}
// Device Cards
.device-card {
display: inline-block;
margin: 0 10px;
max-width: $cols3;
img {
width: 100%;
}
}
}
// Responsive Behavior
//4 columns
@media only screen and (max-width: $mobile - 1) {
.wedo {
.inner {
margin: 0 auto;
width: calc(100% - 40px);
}
.top-banner {
text-align: center;
.banner-photo {
display: none;
}
}
.project-list,
.columns3 {
display: block;
}
.project-card,
.columns3 .column {
display: block;
margin: 20px auto;
width: $cols6;
}
}
}
//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.wedo {
.project-list,
.columns3 {
display: inline-block;
}
.top-banner {
text-align: center;
.banner-photo {
display: none;
}
}
.project-card,
.columns3 .column {
display: inline-block;
width: $cols6;
}
}
}
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
#view {
text-align: center;
}
.wedo {
.top-banner {
text-align: left;
.banner-photo {
max-width: $cols3;
}
}
.inner {
margin: 0 auto;
width: $tablet;
}
.wedo2 {
.extension-header {
background-color: $ui-coral;
background-image: url("/images/wedo2/wedo2-pattern.svg");
}
}

0
static/images/wedo/create-and-share.png → static/images/wedo-legacy/create-and-share.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
static/images/wedo/distance.jpg → static/images/wedo-legacy/distance.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
static/images/wedo/distance.png → static/images/wedo-legacy/distance.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

0
static/images/wedo/download-device-manager.png → static/images/wedo-legacy/download-device-manager.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
static/images/wedo/light-and-music.jpg → static/images/wedo-legacy/light-and-music.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
static/images/wedo/motor.jpg → static/images/wedo-legacy/motor.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
static/images/wedo/motor.png → static/images/wedo-legacy/motor.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

0
static/images/wedo/set-up.png → static/images/wedo-legacy/set-up.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
static/images/wedo/tilt.jpg → static/images/wedo-legacy/tilt.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
static/images/wedo/tilt.png → static/images/wedo-legacy/tilt.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

0
static/images/wedo/wedo-milo.png → static/images/wedo-legacy/wedo-milo.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 315 KiB

After

Width:  |  Height:  |  Size: 315 KiB

0
static/images/wedo/wedo1.png → static/images/wedo-legacy/wedo1.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

0
static/images/wedo/wedo2.png → static/images/wedo-legacy/wedo2.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 89 KiB

BIN
static/images/wedo2/wedo2-connect-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/images/wedo2/wedo2-connect-2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
static/images/wedo2/wedo2-illustration.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
static/images/wedo2/wedo2-motor-turn-block.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
static/images/wedo2/wedo2-motor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

12
static/images/wedo2/wedo2-pattern.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
static/images/wedo2/wedo2-starter1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
static/images/wedo2/wedo2-starter2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
static/images/wedo2/wedo2-starter3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 93 KiB

58
static/images/wedo2/wedo2.svg Normal file
View file

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>wedo2-block-icon</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="0 18.9025641 31.0588235 18.9025641 31.0588235 0.424182751 0 0.424182751"></polygon>
</defs>
<g id="wedo2-block-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="WeDo" transform="translate(4.000000, 10.000000)">
<path d="M19.5128913,1.16923077 L18.7825384,1.16923077 C18.4644208,1.16923077 18.2065384,1.38281026 18.2065384,1.6478359 L18.2065384,2.72820513 L20.0888913,2.72820513 L20.0888913,1.6478359 C20.0888913,1.38281026 19.831009,1.16923077 19.5128913,1.16923077" id="Fill-1" fill="#7C87A5"></path>
<path d="M20.9099405,1.16923077 L20.1795875,1.16923077 C19.8614699,1.16923077 19.6035875,1.38281026 19.6035875,1.6478359 L19.6035875,2.72820513 L21.4859405,2.72820513 L21.4859405,1.6478359 C21.4859405,1.38281026 21.2280581,1.16923077 20.9099405,1.16923077 Z" id="Stroke-3"></path>
<path d="M5.54051765,1.16923077 L4.81204706,1.16923077 C4.49204706,1.16923077 4.23604706,1.38281026 4.23604706,1.6478359 L4.23604706,2.72820513 L6.1184,2.72820513 L6.1184,1.6478359 C6.1184,1.38281026 5.86051765,1.16923077 5.54051765,1.16923077" id="Fill-5" fill="#7C87A5"></path>
<path d="M6.93756678,1.16923077 L6.20909619,1.16923077 C5.88909619,1.16923077 5.63309619,1.38281026 5.63309619,1.6478359 L5.63309619,2.72820513 L7.51544913,2.72820513 L7.51544913,1.6478359 C7.51544913,1.38281026 7.25756678,1.16923077 6.93756678,1.16923077 Z" id="Stroke-7"></path>
<path d="M22.3051073,1.16923077 L21.5747543,1.16923077 C21.2566367,1.16923077 21.0006367,1.38281026 21.0006367,1.6478359 L21.0006367,2.72820513 L22.8829896,2.72820513 L22.8829896,1.6478359 C22.8829896,1.38281026 22.6232249,1.16923077 22.3051073,1.16923077" id="Fill-9" fill="#7C87A5"></path>
<path d="M23.7021564,1.16923077 L22.9718035,1.16923077 C22.6536858,1.16923077 22.3976858,1.38281026 22.3976858,1.6478359 L22.3976858,2.72820513 L24.2800388,2.72820513 L24.2800388,1.6478359 C24.2800388,1.38281026 24.020274,1.16923077 23.7021564,1.16923077 Z" id="Stroke-11"></path>
<path d="M25.1010879,1.16923077 L24.3707349,1.16923077 C24.0526173,1.16923077 23.7947349,1.38281026 23.7947349,1.6478359 L23.7947349,2.72820513 L25.6770879,2.72820513 L25.6770879,1.6478359 C25.6770879,1.38281026 25.4192055,1.16923077 25.1010879,1.16923077" id="Fill-13" fill="#7C87A5"></path>
<path d="M26.498137,1.16923077 L25.7677841,1.16923077 C25.4496664,1.16923077 25.1917841,1.38281026 25.1917841,1.6478359 L25.1917841,2.72820513 L27.074137,2.72820513 L27.074137,1.6478359 C27.074137,1.38281026 26.8162547,1.16923077 26.498137,1.16923077 Z" id="Stroke-15"></path>
<path d="M13.9246948,1.16923077 L13.1943419,1.16923077 C12.8762242,1.16923077 12.6183419,1.38281026 12.6183419,1.6478359 L12.6183419,2.72820513 L14.5006948,2.72820513 L14.5006948,1.6478359 C14.5006948,1.38281026 14.2428125,1.16923077 13.9246948,1.16923077" id="Fill-17" fill="#7C87A5"></path>
<path d="M15.3217439,1.16923077 L14.591391,1.16923077 C14.2732734,1.16923077 14.015391,1.38281026 14.015391,1.6478359 L14.015391,2.72820513 L15.8977439,2.72820513 L15.8977439,1.6478359 C15.8977439,1.38281026 15.6398616,1.16923077 15.3217439,1.16923077 Z" id="Stroke-19"></path>
<path d="M16.7169107,1.16923077 L15.9865578,1.16923077 C15.6684401,1.16923077 15.4124401,1.38281026 15.4124401,1.6478359 L15.4124401,2.72820513 L17.2947931,2.72820513 L17.2947931,1.6478359 C17.2947931,1.38281026 17.0350284,1.16923077 16.7169107,1.16923077" id="Fill-21" fill="#7C87A5"></path>
<path d="M18.1139599,1.16923077 L17.3836069,1.16923077 C17.0654893,1.16923077 16.8094893,1.38281026 16.8094893,1.6478359 L16.8094893,2.72820513 L18.6918422,2.72820513 L18.6918422,1.6478359 C18.6918422,1.38281026 18.4320775,1.16923077 18.1139599,1.16923077 Z" id="Stroke-23"></path>
<path d="M11.1287142,1.16923077 L10.4002436,1.16923077 C10.0802436,1.16923077 9.8242436,1.38281026 9.8242436,1.6478359 L9.8242436,2.72820513 L11.7065965,2.72820513 L11.7065965,1.6478359 C11.7065965,1.38281026 11.4487142,1.16923077 11.1287142,1.16923077" id="Fill-25" fill="#7C87A5"></path>
<path d="M12.5257633,1.16923077 L11.7972927,1.16923077 C11.4772927,1.16923077 11.2212927,1.38281026 11.2212927,1.6478359 L11.2212927,2.72820513 L13.1036457,2.72820513 L13.1036457,1.6478359 C13.1036457,1.38281026 12.8457633,1.16923077 12.5257633,1.16923077 Z" id="Stroke-27"></path>
<path d="M8.33461592,1.16923077 L7.60426298,1.16923077 C7.28614533,1.16923077 7.03014533,1.38281026 7.03014533,1.6478359 L7.03014533,2.72820513 L8.91249827,2.72820513 L8.91249827,1.6478359 C8.91249827,1.38281026 8.65273356,1.16923077 8.33461592,1.16923077" id="Fill-29" fill="#7C87A5"></path>
<path d="M9.73166505,1.16923077 L9.00131211,1.16923077 C8.68319446,1.16923077 8.42719446,1.38281026 8.42719446,1.6478359 L8.42719446,2.72820513 L10.3095474,2.72820513 L10.3095474,1.6478359 C10.3095474,1.38281026 10.0497827,1.16923077 9.73166505,1.16923077 Z" id="Stroke-31"></path>
<path d="M27.8933038,1.16923077 L27.1629509,1.16923077 C26.8448332,1.16923077 26.5888332,1.38281026 26.5888332,1.6478359 L26.5888332,2.72820513 L28.4711862,2.72820513 L28.4711862,1.6478359 C28.4711862,1.38281026 28.2114215,1.16923077 27.8933038,1.16923077" id="Fill-33" fill="#7C87A5"></path>
<path d="M29.2903529,1.16923077 L28.56,1.16923077 C28.2418824,1.16923077 27.9858824,1.38281026 27.9858824,1.6478359 L27.9858824,2.72820513 L29.8682353,2.72820513 L29.8682353,1.6478359 C29.8682353,1.38281026 29.6084706,1.16923077 29.2903529,1.16923077 Z" id="Stroke-35"></path>
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,2.53333333 L29.6470588,2.53333333 C30.1665882,2.53333333 30.5882353,2.97778275 30.5882353,3.52540793 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268" id="Fill-37" fill="#FFFFFF"></path>
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,2.53333333 L29.6470588,2.53333333 C30.1665882,2.53333333 30.5882353,2.97778275 30.5882353,3.52540793 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268 Z" id="Stroke-39" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Fill-41" fill="#FFFFFF"></path>
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Stroke-43" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8.94117647,2.53333333 L7.05882353,2.53333333 C5.50023529,2.53333333 4.23529412,3.86668159 4.23529412,5.50955711 L4.23529412,7.49569044 C4.23529412,8.04331562 4.65694118,8.48776503 5.17647059,8.48776503 L8,8.48776503 C8.51952941,8.48776503 8.94117647,8.04331562 8.94117647,7.49569044 L8.94117647,5.50955711 C8.94117647,3.86668159 10.2061176,2.53333333 11.7647059,2.53333333 L12.7058824,2.53333333 L8.94117647,2.53333333 Z" id="Fill-45" fill="#4C97FF"></path>
<path d="M8.94117647,2.53333333 L7.05882353,2.53333333 C5.50023529,2.53333333 4.23529412,3.86668159 4.23529412,5.50955711 L4.23529412,7.49569044 C4.23529412,8.04331562 4.65694118,8.48776503 5.17647059,8.48776503 L8,8.48776503 C8.51952941,8.48776503 8.94117647,8.04331562 8.94117647,7.49569044 L8.94117647,5.50955711 C8.94117647,3.86668159 10.2061176,2.53333333 11.7647059,2.53333333 L12.7058824,2.53333333 L8.94117647,2.53333333 Z" id="Stroke-47" stroke="#3D79CC" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<polyline id="Stroke-50" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" points="0.470588235 10.4738984 28.4310588 10.4738984 30.5882353 13.448138"></polyline>
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Stroke-52" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M17.3069176,8.96410256 L16.5765647,8.96410256 C16.2584471,8.96410256 16.0005647,9.17768205 16.0005647,9.44270769 L16.0005647,10.5230769 L17.8829176,10.5230769 L17.8829176,9.44270769 C17.8829176,9.17768205 17.6250353,8.96410256 17.3069176,8.96410256" id="Fill-54" fill="#7C87A5"></path>
<path d="M17.3069176,8.96410256 L16.5765647,8.96410256 C16.2584471,8.96410256 16.0005647,9.17768205 16.0005647,9.44270769 L16.0005647,10.5230769 L17.8829176,10.5230769 L17.8829176,9.44270769 C17.8829176,9.17768205 17.6250353,8.96410256 17.3069176,8.96410256 Z" id="Stroke-56"></path>
<path d="M20.1782588,8.96410256 L19.4497882,8.96410256 C19.1297882,8.96410256 18.8737882,9.17768205 18.8737882,9.44270769 L18.8737882,10.5230769 L20.7561412,10.5230769 L20.7561412,9.44270769 C20.7561412,9.17768205 20.4982588,8.96410256 20.1782588,8.96410256" id="Fill-58" fill="#7C87A5"></path>
<path d="M20.1782588,8.96410256 L19.4497882,8.96410256 C19.1297882,8.96410256 18.8737882,9.17768205 18.8737882,9.44270769 L18.8737882,10.5230769 L20.7561412,10.5230769 L20.7561412,9.44270769 C20.7561412,9.17768205 20.4982588,8.96410256 20.1782588,8.96410256 Z" id="Stroke-60"></path>
<path d="M23.0514824,8.96410256 L22.3211294,8.96410256 C22.0030118,8.96410256 21.7451294,9.17768205 21.7451294,9.44270769 L21.7451294,10.5230769 L23.6274824,10.5230769 L23.6274824,9.44270769 C23.6274824,9.17768205 23.3696,8.96410256 23.0514824,8.96410256" id="Fill-62" fill="#7C87A5"></path>
<path d="M23.0514824,8.96410256 L22.3211294,8.96410256 C22.0030118,8.96410256 21.7451294,9.17768205 21.7451294,9.44270769 L21.7451294,10.5230769 L23.6274824,10.5230769 L23.6274824,9.44270769 C23.6274824,9.17768205 23.3696,8.96410256 23.0514824,8.96410256 Z" id="Stroke-64"></path>
<path d="M25.9228235,8.96410256 L25.1943529,8.96410256 C24.8743529,8.96410256 24.6183529,9.17768205 24.6183529,9.44270769 L24.6183529,10.5230769 L26.5007059,10.5230769 L26.5007059,9.44270769 C26.5007059,9.17768205 26.2428235,8.96410256 25.9228235,8.96410256" id="Fill-66" fill="#7C87A5"></path>
<path d="M25.9228235,8.96410256 L25.1943529,8.96410256 C24.8743529,8.96410256 24.6183529,9.17768205 24.6183529,9.44270769 L24.6183529,10.5230769 L26.5007059,10.5230769 L26.5007059,9.44270769 C26.5007059,9.17768205 26.2428235,8.96410256 25.9228235,8.96410256 Z" id="Stroke-68"></path>
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,10.4699301 L28.4310588,10.4699301 L30.5882353,13.448138 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268" id="Fill-70" fill="#E6E7E8"></path>
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,10.4699301 L28.4310588,10.4699301 L30.5882353,13.448138 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268 Z" id="Stroke-72" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,10.4699301 L11.7647059,10.4699301 L11.7647059,18.4065268 Z" id="Fill-74" fill="#E6E7E8"></path>
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,10.4699301 L11.7647059,10.4699301 L11.7647059,18.4065268 Z" id="Stroke-76" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-79"></g>
<polygon id="Fill-78" fill="#E6E7E8" mask="url(#mask-2)" points="15.5294118 14.4382284 26.8235294 14.4382284 26.8235294 10.4699301 15.5294118 10.4699301"></polygon>
<polygon id="Stroke-80" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-2)" points="15.5294118 14.4382284 26.8235294 14.4382284 26.8235294 10.4699301 15.5294118 10.4699301"></polygon>
<path d="M28.432,10.4738984 L30.5891765,7.68021632" id="Stroke-81" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-2)"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 13 KiB