mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
Update with links, fix linter issues, center setup
This commit is contained in:
Matthew Taylor
parent
3220fd1b9d
commit
aeaa02aae8
4 changed files with 134 additions and 191 deletions
|
|
@ -3,30 +3,38 @@
|
|||
|
||||
#view {
|
||||
|
||||
// Global Typography
|
||||
// Global Typography
|
||||
|
||||
h1, h2, h3, h4, h5, p {
|
||||
color: $type-gray;
|
||||
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 0;
|
||||
// Headers
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
margin: 1.5em 0 .3em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: .75em 0 .3em 0;
|
||||
margin: .75em 0 .3em;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: .75em 0 .3em 0;
|
||||
margin: .75em 0 .3em;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -42,26 +50,39 @@
|
|||
}
|
||||
|
||||
h5 {
|
||||
font-size: .85rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
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 {
|
||||
margin: .25em 0 1em 0;
|
||||
margin: .25em 0 1em;
|
||||
//max-width: 700px;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
|
||||
&.intro {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1em;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
&.callout{
|
||||
&.callout {
|
||||
// margin: 1.5em 0;
|
||||
// border-top: 1px solid $ui-border;
|
||||
// border-bottom: 1px solid $ui-border;
|
||||
|
|
@ -70,48 +91,36 @@
|
|||
margin: 1.5em 0;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
padding: 1.25em 1.25em;
|
||||
background-color: lighten($ui-blue, 40);
|
||||
padding: 1.25em;
|
||||
|
||||
&.orange {
|
||||
background-color: lighten($ui-orange, 30);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Link Typography
|
||||
// List 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;
|
||||
ol,
|
||||
ul {
|
||||
margin: .25em 0 1em;
|
||||
padding-left: 20px;
|
||||
|
||||
line-height: 1.5em;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.5em;
|
||||
|
||||
li {
|
||||
margin: .75em 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.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.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": "",
|
||||
"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.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.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)."
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
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');
|
||||
|
|
@ -14,16 +15,9 @@ var Wedo2 = React.createClass({
|
|||
<div className="inner">
|
||||
<div className="columns2">
|
||||
<div className="banner-text">
|
||||
<h2>LEGO WeDo 2.0 & Scratch</h2>
|
||||
<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.'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.intro' />
|
||||
</p>
|
||||
</div>
|
||||
<div className="banner-photo">
|
||||
|
|
@ -36,63 +30,37 @@ var Wedo2 = React.createClass({
|
|||
<div className="inner">
|
||||
<section id="getting-started">
|
||||
<h3>
|
||||
<FormattedMessage
|
||||
id='wedo2.getStarted'
|
||||
defaultMessage={'Getting Started with LEGO WeDo 2.0'} />
|
||||
<FormattedMessage id='wedo2.getStarted' />
|
||||
</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.'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.requirement' />
|
||||
</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'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.installTitle' />
|
||||
</h4>
|
||||
<p>
|
||||
The Device Manager lets you connect WeDo 2.0 to Scratch using
|
||||
Bluetooth <a href="#">Download Here</a>
|
||||
<FormattedHTMLMessage id='wedo2.installText' />
|
||||
</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<img src="/images/wedo/set-up.png" />
|
||||
<h4>
|
||||
<FormattedHTMLMessage
|
||||
id='wedo2.setupTitle'
|
||||
defaultMessage={
|
||||
'2. Setup & Help'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.setupTitle' />
|
||||
</h4>
|
||||
<p>
|
||||
Connect your WeDo 2.0 by following the steps
|
||||
in the <a href="#">Tips Window</a>
|
||||
<FormattedHTMLMessage id='wedo2.setupText' />
|
||||
</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<img src="/images/wedo/create-and-share.png" />
|
||||
<h4>
|
||||
<FormattedMessage
|
||||
id='wedo2.createTitle'
|
||||
defaultMessage={
|
||||
'3. Create'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.createTitle' />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='wedo2.createText'
|
||||
defaultMessage={
|
||||
'Use the WeDo extension blocks to turn on lights, control motors, ' +
|
||||
'and make your project interactive'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.createText' />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -102,46 +70,30 @@ var Wedo2 = React.createClass({
|
|||
<div className="banner">
|
||||
<div className="inner" id="starter-projects">
|
||||
<h3>
|
||||
<FormattedMessage
|
||||
id='wedo2.starterProjects'
|
||||
defaultMessage={
|
||||
'WeDo 2.0 Starter Projects'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.starterProjects' />
|
||||
</h3>
|
||||
<div className="project-list">
|
||||
<a href="#">
|
||||
<a href="/projects/101037564/?tip_bar=ext2#editor">
|
||||
<div className="project-card">
|
||||
<img src="/images/wedo/motor.png" alt="" />
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='wedo2.starterMotor'
|
||||
defaultMessage={
|
||||
'Motor'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.starterMotor' />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<a href="/projects/101038249/?tip_bar=ext2#editor">
|
||||
<div className="project-card">
|
||||
<img src="/images/wedo/distance.png" alt="" />
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='wedo2.starterDistance'
|
||||
defaultMessage={
|
||||
'Distance Sensor'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.starterDistance' />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<a href="/projects/101033190/?tip_bar=ext2#editor">
|
||||
<div className="project-card">
|
||||
<img src="/images/wedo/tilt.png" alt="" />
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='wedo2.starterTilt'
|
||||
defaultMessage={
|
||||
'Tilt Sensor'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.starterTilt' />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -152,39 +104,23 @@ var Wedo2 = React.createClass({
|
|||
<div className="inner">
|
||||
<section>
|
||||
<h3>
|
||||
<FormattedMessage
|
||||
id='wedo2.versionTitle'
|
||||
defaultMessage={
|
||||
'Which version do you have?'
|
||||
} />
|
||||
<FormattedMessage id='wedo2.versionTitle' />
|
||||
</h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='wedo2.versionText'
|
||||
defaultMessage={
|
||||
'You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0).'
|
||||
} />
|
||||
<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="#">
|
||||
<FormattedMessage
|
||||
id='wedo1.setupInstructions'
|
||||
defaultMessage={
|
||||
'Wedo 1.0 Setup Instructions'
|
||||
} />
|
||||
<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="#">
|
||||
<FormattedMessage
|
||||
id='wedo2.setupInstructions'
|
||||
defaultMessage={
|
||||
'Wedo 2.0 Setup Instructions'
|
||||
} />
|
||||
<a href="/projects/editor/?tip_bar=ext2">
|
||||
<FormattedMessage id='wedo2.wedo2SetupInstructions' />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -5,84 +5,80 @@
|
|||
#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;
|
||||
}
|
||||
h2 {
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $ui-white;
|
||||
}
|
||||
p {
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
.columns2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.columns2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
max-width: $cols7;
|
||||
}
|
||||
.banner-text {
|
||||
max-width: $cols7;
|
||||
}
|
||||
|
||||
.banner-photo {
|
||||
max-width: $cols4;
|
||||
.banner-photo {
|
||||
max-width: $cols4;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// GETTING STARTED SECTION
|
||||
|
||||
#getting-started {
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
// Getting Started Section
|
||||
|
||||
.columns3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.column {
|
||||
max-width: $cols4;
|
||||
margin: 15px;
|
||||
text-align: center;
|
||||
max-width: $cols4;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.callout {
|
||||
padding: .75em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
// PROJECT HIGHLIGHT SECTION
|
||||
// Project Highlight Section
|
||||
|
||||
#starter-projects {
|
||||
h3, p {
|
||||
h3,
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
padding: 10px 0 50px;
|
||||
background-color: $ui-gray;
|
||||
padding: 10px 0 50px;
|
||||
|
||||
h3 {
|
||||
margin-top: 30px;
|
||||
|
|
@ -90,39 +86,37 @@
|
|||
}
|
||||
|
||||
.project-list {
|
||||
display: flex;
|
||||
max-width: $cols9;
|
||||
margin: 0 auto;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
max-width: $cols9;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
max-width: $cols3;
|
||||
margin: 10px;
|
||||
background-color: $ui-white;
|
||||
border-radius: 7px;
|
||||
overflow: hidden;
|
||||
transition: transform .25s ease;
|
||||
margin: 10px;
|
||||
border-radius: 7px;
|
||||
background-color: $ui-white;
|
||||
max-width: $cols3;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-bottom: 2px solid $ui-white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
margin: 15px 15px 20px 15px;
|
||||
margin: 15px 15px 20px;
|
||||
color: $ui-blue;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
//background-color: $ui-blue;
|
||||
cursor: pointer;
|
||||
|
||||
transform: scale(1.1, 1.1);
|
||||
transition: transform .25s ease;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
color: darken($ui-blue, 15);
|
||||
|
|
@ -130,25 +124,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
// DEVICE CARDS
|
||||
// Device Cards
|
||||
|
||||
.device-card {
|
||||
display: inline-block;
|
||||
max-width: $cols3;
|
||||
margin: 0 10px;
|
||||
max-width: $cols3;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// RESPONSIVE BEHAVIOR
|
||||
// Responsive Behavior
|
||||
|
||||
//4 columns
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.inner {
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
|
|
@ -159,20 +153,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.project-list, .columns3 {
|
||||
.project-list,
|
||||
.columns3 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.project-card, .columns3 .column {
|
||||
.project-card,
|
||||
.columns3 .column {
|
||||
display: block;
|
||||
width: $cols6;
|
||||
margin: 20px auto;
|
||||
width: $cols6;
|
||||
}
|
||||
}
|
||||
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
.project-list, .columns3 {
|
||||
.project-list,
|
||||
.columns3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +181,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.project-card, .columns3 .column {
|
||||
.project-card,
|
||||
.columns3 .column {
|
||||
display: inline-block;
|
||||
width: $cols6;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue