scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #379 from mewtaylor/wedo-landing

Browse source 
[Master] – Wedo landing page
This commit is contained in:
Matthew Taylor 2016-03-10 10:29:34 -05:00
commit 8c6e12677d
18 changed files with 493 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
server/routes.json
View file

@ -23,5 +23,10 @@
"pattern": "/info/credits",
"view": "credits",
"title": "Credits"
},
{
"pattern": "/wedo",
"view": "wedo2",
"title": "LEGO WeDo 2.0"
}
]

126
src/_typography.scss Normal file
View file

@ -0,0 +1,126 @@
@import "./colors";
@import "./frameless";
#view {
// Global Typography
h1,
h2,
h3,
h4,
h5,
p {
line-height: 1.7em;
color: $type-gray;
}
::selection {
background-color: lighten($ui-blue, 30);
}
// Headers
h3,
h4,
h5 {
margin: 1.5em 0 .3em;
}
h1 {
margin: .75em 0 .3em;
font-size: 2.5rem;
font-weight: 900;
}
h2 {
margin: .75em 0 .3em;
font-size: 2rem;
font-weight: 600;
}
h3 {
font-size: 1.4rem;
font-weight: 500;
}
h4 {
font-size: 1rem;
font-weight: 700;
}
h5 {
text-transform: uppercase;
letter-spacing: 2px;
font-size: .85rem;
font-weight: 700;
}
// Link Typography
a {
cursor: pointer;
color: $ui-blue;
font-weight: 500;
&:hover {
text-decoration: none;
color: darken($ui-blue, 15);
}
}
// Paragraph Typography
p {
margin: .25em 0 1em;
//max-width: 700px;
font-size: 1rem;
font-weight: 300;
&.intro {
margin-bottom: 1em;
font-size: 1.1rem;
}
&.callout {
// margin: 1.5em 0;
// border-top: 1px solid $ui-border;
// border-bottom: 1px solid $ui-border;
// padding: 1em 0;
margin: 1.5em 0;
border: 1px solid $active-gray;
border-radius: 5px;
background-color: lighten($ui-blue, 40);
padding: 1.25em;
&.orange {
background-color: lighten($ui-orange, 30);
}
}
a {
white-space: nowrap;
}
}
b {
font-weight: 500;
}
// List Typography
ol,
ul {
margin: .25em 0 1em;
padding-left: 20px;
line-height: 1.5em;
font-size: 1rem;
font-weight: 300;
li {
margin: .75em 0;
}
}
}

19
src/views/wedo2/l10n.json Normal file
View file

@ -0,0 +1,19 @@
{
"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 currently only available for Mac OSX. We plan to release a Windows version later in 2016.",
"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 <a href=\"#\">Download Here</a>",
"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)."
}

133
src/views/wedo2/wedo2.jsx Normal file
View file

@ -0,0 +1,133 @@
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var FormattedMessage = require('react-intl').FormattedMessage;
var React = require('react');
var render = require('../../lib/render.jsx');
require('./wedo2.scss');
var Wedo2 = React.createClass({
type: 'wedo2',
render: function () {
return (
<div>
<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>
</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' />
</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>
<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 src="/images/wedo/motor.png" alt="" />
<p>
<FormattedMessage id='wedo2.starterMotor' />
</p>
</div>
</a>
<a href="/projects/101038249/?tip_bar=ext2#editor">
<div className="project-card">
<img src="/images/wedo/distance.png" alt="" />
<p>
<FormattedMessage id='wedo2.starterDistance' />
</p>
</div>
</a>
<a href="/projects/101033190/?tip_bar=ext2#editor">
<div className="project-card">
<img src="/images/wedo/tilt.png" alt="" />
<p>
<FormattedMessage id='wedo2.starterTilt' />
</p>
</div>
</a>
</div>
</div>
</div>
<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 src="/images/wedo/wedo1.png" alt="LEGO WeDo 1.0 Hub" />
<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 src="/images/wedo/wedo2.png" alt="LEGO WeDo 2.0 Hub" />
<a href="/projects/editor/?tip_bar=ext2">
<FormattedMessage id='wedo2.wedo2SetupInstructions' />
</a>
</div>
</section>
</div>
</div>
);
}
});
render(<Wedo2 />, document.getElementById('view'));

210
src/views/wedo2/wedo2.scss Normal file
View file

@ -0,0 +1,210 @@
@import "../../colors";
@import "../../frameless";
@import "../../typography";
#view {
padding: 0;
p {
&.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: darken($ui-blue, 15);
}
}
}
// 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) {
.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) {
.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;
}
.top-banner {
text-align: left;
.banner-photo {
max-width: $cols3;
}
}
.inner {
margin: 0 auto;
width: $tablet;
}
}
}

BIN
static/images/wedo/create-and-share.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/images/wedo/distance.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/images/wedo/distance.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
static/images/wedo/download-device-manager.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/images/wedo/light-and-music.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/images/wedo/motor.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/images/wedo/motor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
static/images/wedo/set-up.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/images/wedo/tilt.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/images/wedo/tilt.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
static/images/wedo/wedo-milo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 315 KiB

BIN
static/images/wedo/wedo1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
static/images/wedo/wedo2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 89 KiB