Skip to content

GitLab

S
scratch-www
Commit 3220fd1b authored by carljbowman's avatar carljbowman
Browse files
Options

[WIP] Add WeDo Landing page 

Adding LEGO WeDO landing page. This also includes the initial pass on Global Typographic Standards.

Needs Work
-Add URLs to all links on the page (still being generated)
-Ater URLs have been added, update translation JSON to include messages that include links
parent 11a8eb17
Hide whitespace changes
Inline Side-by-side
Showing with 550 additions and 0 deletions
server/routes.json
View file @ 3220fd1b
......@@ -23,5 +23,10 @@
"pattern": "/info/credits",
"view": "credits",
"title": "Credits"
},
{
"pattern": "/wedo",
"view": "wedo2",
"title": "LEGO WeDo 2.0"
}
]
src/_typography.scss 0 → 100644
View file @ 3220fd1b
@import "./colors";
@import "./frameless";
#view {
// Global Typography
h1, h2, h3, h4, h5, p {
color: $type-gray;
line-height: 1.7em;
}
::selection {
background-color: lighten($ui-blue, 30);
}
// Headers
h3, h4, h5, {
margin: 1.5em 0 .3em 0;
}
h1 {
margin: .75em 0 .3em 0;
font-size: 2.5rem;
font-weight: 900;
}
h2 {
margin: .75em 0 .3em 0;
font-size: 2rem;
font-weight: 600;
}
h3 {
font-size: 1.4rem;
font-weight: 500;
}
h4 {
font-size: 1rem;
font-weight: 700;
}
h5 {
font-size: .85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
// Paragraph Typography
p {
margin: .25em 0 1em 0;
//max-width: 700px;
font-size: 1rem;
font-weight: 300;
&.intro {
font-size: 1.1rem;
margin-bottom: 1em;
}
&.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;
padding: 1.25em 1.25em;
background-color: lighten($ui-blue, 40);
&.orange {
background-color: lighten($ui-orange, 30);
}
}
}
b {
font-weight: 500;
}
// Link Typography
a {
font-weight: 500;
color: $ui-blue;
cursor: pointer;
&:hover {
color: darken($ui-blue, 15);
text-decoration: none;
}
}
p a {
white-space: nowrap;
}
// List Typography
ol, ul {
margin: .25em 0 1em 0;
padding-left: 20px;
font-size: 1rem;
font-weight: 300;
line-height: 1.5em;
li {
margin: .75em 0;
}
}
}
\ No newline at end of file
src/views/wedo2/l10n.json 0 → 100644
View file @ 3220fd1b
{
"wedo1.setupInstructions": "Wedo 1.0 Setup Instructions",
"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": "",
"wedo2.setupTitle": "2. Setup & Help",
"wedo2.setupText": "",
"wedo2.createTitle": "3. Create",
"wedo2.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
"wedo2.setupInstructions": "Wedo 2.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)."
}
\ No newline at end of file
src/views/wedo2/wedo2.jsx 0 → 100644
View file @ 3220fd1b
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 & Scratch</h2>
<p className="intro">
<FormattedMessage
id='wedo2.intro'
defaultMessage={
'The LEGO® Education WeDo 2.0 is an introductory invention kit ' +
'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.'
} />
</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'
defaultMessage={'Getting Started with LEGO WeDo 2.0'} />
</h3>
<p className="callout">
<FormattedMessage
id='wedo2.requirement'
defaultMessage={
'The LEGO WeDo 2.0 extension is currently only available for Mac OSX. ' +
'We plan to release a Windows version later in 2016.'
} />
</p>
<div className="columns3">
<div className="column">
<img src="/images/wedo/download-device-manager.png" />
<h4>
<FormattedMessage
id='wedo2.installTitle'
defaultMessage={
'1. Install Device Manager'
} />
</h4>
<p>
The Device Manager lets you connect WeDo 2.0 to Scratch using
Bluetooth <a href="#">Download Here</a>
</p>
</div>
<div className="column">
<img src="/images/wedo/set-up.png" />
<h4>
<FormattedHTMLMessage
id='wedo2.setupTitle'
defaultMessage={
'2. Setup &amp; Help'
} />
</h4>
<p>
Connect your WeDo 2.0 by following the steps
in the <a href="#">Tips Window</a>
</p>
</div>
<div className="column">
<img src="/images/wedo/create-and-share.png" />
<h4>
<FormattedMessage
id='wedo2.createTitle'
defaultMessage={
'3. Create'
} />
</h4>
<p>
<FormattedMessage
id='wedo2.createText'
defaultMessage={
'Use the WeDo extension blocks to turn on lights, control motors, ' +
'and make your project interactive'
} />
</p>
</div>
</div>
</section>
</div>
<div className="banner">
<div className="inner" id="starter-projects">
<h3>
<FormattedMessage
id='wedo2.starterProjects'
defaultMessage={
'WeDo 2.0 Starter Projects'
} />
</h3>
<div className="project-list">
<a href="#">
<div className="project-card">
<img src="/images/wedo/motor.png" alt="" />
<p>
<FormattedMessage
id='wedo2.starterMotor'
defaultMessage={
'Motor'
} />
</p>
</div>
</a>
<a href="#">
<div className="project-card">
<img src="/images/wedo/distance.png" alt="" />
<p>
<FormattedMessage
id='wedo2.starterDistance'
defaultMessage={
'Distance Sensor'
} />
</p>
</div>
</a>
<a href="#">
<div className="project-card">
<img src="/images/wedo/tilt.png" alt="" />
<p>
<FormattedMessage
id='wedo2.starterTilt'
defaultMessage={
'Tilt Sensor'
} />
</p>
</div>
</a>
</div>
</div>
</div>
<div className="inner">
<section>
<h3>
<FormattedMessage
id='wedo2.versionTitle'
defaultMessage={
'Which version do you have?'
} />
</h3>
<p>
<FormattedMessage
id='wedo2.versionText'
defaultMessage={
'You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0).'
} />
</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="#">
<FormattedMessage
id='wedo1.setupInstructions'
defaultMessage={
'Wedo 1.0 Setup Instructions'
} />
</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="#">
<FormattedMessage
id='wedo2.setupInstructions'
defaultMessage={
'Wedo 2.0 Setup Instructions'
} />
</a>
</div>
</section>
</div>
</div>
);
}
});
render(<Wedo2 />, document.getElementById('view'));
src/views/wedo2/wedo2.scss 0 → 100644
View file @ 3220fd1b
@import "../../colors";
@import "../../frameless";
@import "../../typography";
#view {
padding: 0;
.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;
}
// GETTING STARTED SECTION
#getting-started {
h3 {
text-align: center;
}
}
.columns3 {
display: flex;
justify-content: space-between;
.column {
max-width: $cols4;
margin: 15px;
text-align: center;
img {
width: 80%;
margin: 0 auto;
}
}
}
p.callout {
padding: .75em 1em;
text-align: center;
}
// PROJECT HIGHLIGHT SECTION
#starter-projects {
h3, p {
text-align: center;
}
}
.banner {
padding: 10px 0 50px;
background-color: $ui-gray;
h3 {
margin-top: 30px;
}
}
.project-list {
display: flex;
max-width: $cols9;
margin: 0 auto;
justify-content: space-between;
}
.project-card {
max-width: $cols3;
margin: 10px;
background-color: $ui-white;
border-radius: 7px;
overflow: hidden;
transition: transform .25s ease;
img {
width: 100%;
border-bottom: 2px solid $ui-white;
}
p {
display: block;
margin: 15px 15px 20px 15px;
color: $ui-blue;
font-weight: 500;
}
&:hover {
//background-color: $ui-blue;
cursor: pointer;
transform: scale(1.1, 1.1);
transition: transform .25s ease;
p {
color: darken($ui-blue, 15);
}
}
}
// DEVICE CARDS
.device-card {
display: inline-block;
max-width: $cols3;
margin: 0 10px;
img {
width: 100%;
}
}
// RESPONSIVE BEHAVIOR
//4 columns
@media only screen and (max-width: $mobile - 1) {
.inner {
width: calc(100% - 40px);
margin: 0 auto;
}
.top-banner {
text-align: center;
.banner-photo {
display: none;
}
}
.project-list, .columns3 {
display: block;
}
.project-card, .columns3 .column {
display: block;
width: $cols6;
margin: 20px auto;
}
}
//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;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment