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

Update with links, fix linter issues, center setup

Browse source
This commit is contained in:
Matthew Taylor 2016-03-09 22:59:27 -05:00
parent 3220fd1b9d
commit aeaa02aae8
4 changed files with 134 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/_typography.scss
View file

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

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

@ -1,19 +1,19 @@
{ {
"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.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.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.getStarted": "Getting Started with LEGO WeDo 2.0",
"wedo2.installTitle": "1. Install Device Manager", "wedo2.installTitle": "1. Install Device Manager",
"wedo2.installText": "", "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.setupTitle": "2. Setup & Help",
"wedo2.setupText": "", "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.createTitle": "3. Create",
"wedo2.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive", "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.wedo2SetupInstructions": "Wedo 2.0 Setup Instructions",
"wedo2.wedo1SetupInstructions": "Wedo 1.0 Setup Instructions",
"wedo2.starterProjects": "WeDo 2.0 Starter Projects", "wedo2.starterProjects": "WeDo 2.0 Starter Projects",
"wedo2.starterMotor": "Motor", "wedo2.starterMotor": "Motor",
"wedo2.starterDistance": "Distance Sensor", "wedo2.starterDistance": "Distance Sensor",
"wedo2.starterTilt": "Tilt Sensor", "wedo2.starterTilt": "Tilt Sensor",
"wedo2.versionTitle": "Which version do you have?", "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.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
} }

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

@ -1,6 +1,7 @@
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage; var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var FormattedMessage = require('react-intl').FormattedMessage; var FormattedMessage = require('react-intl').FormattedMessage;
var React = require('react'); var React = require('react');
var render = require('../../lib/render.jsx'); var render = require('../../lib/render.jsx');
require('./wedo2.scss'); require('./wedo2.scss');
@ -14,16 +15,9 @@ var Wedo2 = React.createClass({
<div className="inner"> <div className="inner">
<div className="columns2"> <div className="columns2">
<div className="banner-text"> <div className="banner-text">
<h2>LEGO WeDo 2.0 & Scratch</h2> <h2>LEGO WeDo 2.0 &amp; Scratch</h2>
<p className="intro"> <p className="intro">
<FormattedMessage <FormattedMessage id='wedo2.intro' />
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> </p>
</div> </div>
<div className="banner-photo"> <div className="banner-photo">
@ -36,63 +30,37 @@ var Wedo2 = React.createClass({
<div className="inner"> <div className="inner">
<section id="getting-started"> <section id="getting-started">
<h3> <h3>
<FormattedMessage <FormattedMessage id='wedo2.getStarted' />
id='wedo2.getStarted'
defaultMessage={'Getting Started with LEGO WeDo 2.0'} />
</h3> </h3>
<p className="callout"> <p className="callout">
<FormattedMessage <FormattedMessage id='wedo2.requirement' />
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> </p>
<div className="columns3"> <div className="columns3">
<div className="column"> <div className="column">
<img src="/images/wedo/download-device-manager.png" /> <img src="/images/wedo/download-device-manager.png" />
<h4> <h4>
<FormattedMessage <FormattedMessage id='wedo2.installTitle' />
id='wedo2.installTitle'
defaultMessage={
'1. Install Device Manager'
} />
</h4> </h4>
<p> <p>
The Device Manager lets you connect WeDo 2.0 to Scratch using <FormattedHTMLMessage id='wedo2.installText' />
Bluetooth <a href="#">Download Here</a>
</p> </p>
</div> </div>
<div className="column"> <div className="column">
<img src="/images/wedo/set-up.png" /> <img src="/images/wedo/set-up.png" />
<h4> <h4>
<FormattedHTMLMessage <FormattedMessage id='wedo2.setupTitle' />
id='wedo2.setupTitle'
defaultMessage={
'2. Setup &amp; Help'
} />
</h4> </h4>
<p> <p>
Connect your WeDo 2.0 by following the steps <FormattedHTMLMessage id='wedo2.setupText' />
in the <a href="#">Tips Window</a>
</p> </p>
</div> </div>
<div className="column"> <div className="column">
<img src="/images/wedo/create-and-share.png" /> <img src="/images/wedo/create-and-share.png" />
<h4> <h4>
<FormattedMessage <FormattedMessage id='wedo2.createTitle' />
id='wedo2.createTitle'
defaultMessage={
'3. Create'
} />
</h4> </h4>
<p> <p>
<FormattedMessage <FormattedMessage id='wedo2.createText' />
id='wedo2.createText'
defaultMessage={
'Use the WeDo extension blocks to turn on lights, control motors, ' +
'and make your project interactive'
} />
</p> </p>
</div> </div>
</div> </div>
@ -102,46 +70,30 @@ var Wedo2 = React.createClass({
<div className="banner"> <div className="banner">
<div className="inner" id="starter-projects"> <div className="inner" id="starter-projects">
<h3> <h3>
<FormattedMessage <FormattedMessage id='wedo2.starterProjects' />
id='wedo2.starterProjects'
defaultMessage={
'WeDo 2.0 Starter Projects'
} />
</h3> </h3>
<div className="project-list"> <div className="project-list">
<a href="#"> <a href="/projects/101037564/?tip_bar=ext2#editor">
<div className="project-card"> <div className="project-card">
<img src="/images/wedo/motor.png" alt="" /> <img src="/images/wedo/motor.png" alt="" />
<p> <p>
<FormattedMessage <FormattedMessage id='wedo2.starterMotor' />
id='wedo2.starterMotor'
defaultMessage={
'Motor'
} />
</p> </p>
</div> </div>
</a> </a>
<a href="#"> <a href="/projects/101038249/?tip_bar=ext2#editor">
<div className="project-card"> <div className="project-card">
<img src="/images/wedo/distance.png" alt="" /> <img src="/images/wedo/distance.png" alt="" />
<p> <p>
<FormattedMessage <FormattedMessage id='wedo2.starterDistance' />
id='wedo2.starterDistance'
defaultMessage={
'Distance Sensor'
} />
</p> </p>
</div> </div>
</a> </a>
<a href="#"> <a href="/projects/101033190/?tip_bar=ext2#editor">
<div className="project-card"> <div className="project-card">
<img src="/images/wedo/tilt.png" alt="" /> <img src="/images/wedo/tilt.png" alt="" />
<p> <p>
<FormattedMessage <FormattedMessage id='wedo2.starterTilt' />
id='wedo2.starterTilt'
defaultMessage={
'Tilt Sensor'
} />
</p> </p>
</div> </div>
</a> </a>
@ -152,39 +104,23 @@ var Wedo2 = React.createClass({
<div className="inner"> <div className="inner">
<section> <section>
<h3> <h3>
<FormattedMessage <FormattedMessage id='wedo2.versionTitle' />
id='wedo2.versionTitle'
defaultMessage={
'Which version do you have?'
} />
</h3> </h3>
<p> <p>
<FormattedMessage <FormattedMessage id='wedo2.versionText' />
id='wedo2.versionText'
defaultMessage={
'You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0).'
} />
</p> </p>
<div className="device-card"> <div className="device-card">
<h4>LEGO WeDo 1.0 Hub</h4> <h4>LEGO WeDo 1.0 Hub</h4>
<img src="/images/wedo/wedo1.png" alt="LEGO WeDo 1.0 Hub" /> <img src="/images/wedo/wedo1.png" alt="LEGO WeDo 1.0 Hub" />
<a href="#"> <a href="/projects/editor/?tip_bar=ext1">
<FormattedMessage <FormattedMessage id='wedo2.wedo1SetupInstructions' />
id='wedo1.setupInstructions'
defaultMessage={
'Wedo 1.0 Setup Instructions'
} />
</a> </a>
</div> </div>
<div className="device-card"> <div className="device-card">
<h4>LEGO WeDo 2.0 Hub</h4> <h4>LEGO WeDo 2.0 Hub</h4>
<img src="/images/wedo/wedo2.png" alt="LEGO WeDo 2.0 Hub" /> <img src="/images/wedo/wedo2.png" alt="LEGO WeDo 2.0 Hub" />
<a href="#"> <a href="/projects/editor/?tip_bar=ext2">
<FormattedMessage <FormattedMessage id='wedo2.wedo2SetupInstructions' />
id='wedo2.setupInstructions'
defaultMessage={
'Wedo 2.0 Setup Instructions'
} />
</a> </a>
</div> </div>
</section> </section>

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

@ -5,84 +5,80 @@
#view { #view {
padding: 0; padding: 0;
p {
&.callout {
padding: .75em 1em;
text-align: center;
}
}
.top-banner { .top-banner {
margin-bottom: 50px; margin-bottom: 50px;
background-color: $ui-blue; background-color: $ui-blue;
padding: 50px 0; padding: 50px 0;
width: 100%; width: 100%;
h2 { h2 {
color: $ui-white; color: $ui-white;
} }
p { p {
color: $ui-white; color: $ui-white;
} }
.columns2 { .columns2 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.banner-text { .banner-text {
max-width: $cols7; max-width: $cols7;
} }
.banner-photo { .banner-photo {
max-width: $cols4; max-width: $cols4;
img { img {
width: 100%; width: 100%;
}
} }
}
} }
section { section {
margin-bottom: 50px; margin-bottom: 50px;
text-align: center;
} }
// GETTING STARTED SECTION // Getting Started Section
#getting-started {
h3 {
text-align: center;
}
}
.columns3 { .columns3 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.column { .column {
max-width: $cols4;
margin: 15px; margin: 15px;
text-align: center; max-width: $cols4;
img { img {
width: 80%;
margin: 0 auto; margin: 0 auto;
width: 80%;
} }
} }
} }
p.callout { // Project Highlight Section
padding: .75em 1em;
text-align: center;
}
// PROJECT HIGHLIGHT SECTION
#starter-projects { #starter-projects {
h3, p { h3,
p {
text-align: center; text-align: center;
} }
} }
.banner { .banner {
padding: 10px 0 50px;
background-color: $ui-gray; background-color: $ui-gray;
padding: 10px 0 50px;
h3 { h3 {
margin-top: 30px; margin-top: 30px;
@ -90,39 +86,37 @@
} }
.project-list { .project-list {
display: flex; display: flex;
max-width: $cols9; margin: 0 auto;
margin: 0 auto; max-width: $cols9;
justify-content: space-between; justify-content: space-between;
} }
.project-card { .project-card {
max-width: $cols3;
margin: 10px;
background-color: $ui-white;
border-radius: 7px;
overflow: hidden;
transition: transform .25s ease; transition: transform .25s ease;
margin: 10px;
border-radius: 7px;
background-color: $ui-white;
max-width: $cols3;
overflow: hidden;
img { img {
width: 100%;
border-bottom: 2px solid $ui-white; border-bottom: 2px solid $ui-white;
width: 100%;
} }
p { p {
display: block; display: block;
margin: 15px 15px 20px 15px; margin: 15px 15px 20px;
color: $ui-blue; color: $ui-blue;
font-weight: 500; font-weight: 500;
} }
&:hover { &:hover {
//background-color: $ui-blue;
cursor: pointer;
transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);
transition: transform .25s ease; transition: transform .25s ease;
cursor: pointer;
p { p {
color: darken($ui-blue, 15); color: darken($ui-blue, 15);
@ -130,25 +124,25 @@
} }
} }
// DEVICE CARDS // Device Cards
.device-card { .device-card {
display: inline-block; display: inline-block;
max-width: $cols3;
margin: 0 10px; margin: 0 10px;
max-width: $cols3;
img { img {
width: 100%; width: 100%;
} }
} }
// RESPONSIVE BEHAVIOR // Responsive Behavior
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media only screen and (max-width: $mobile - 1) {
.inner { .inner {
width: calc(100% - 40px);
margin: 0 auto; margin: 0 auto;
width: calc(100% - 40px);
} }
.top-banner { .top-banner {
@ -159,20 +153,23 @@
} }
} }
.project-list, .columns3 { .project-list,
.columns3 {
display: block; display: block;
} }
.project-card, .columns3 .column { .project-card,
.columns3 .column {
display: block; display: block;
width: $cols6;
margin: 20px auto; margin: 20px auto;
width: $cols6;
} }
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.project-list, .columns3 { .project-list,
.columns3 {
display: inline-block; display: inline-block;
} }
@ -184,7 +181,8 @@
} }
} }
.project-card, .columns3 .column { .project-card,
.columns3 .column {
display: inline-block; display: inline-block;
width: $cols6; width: $cols6;
} }