Skip to content

GitLab

S
scratch-www
Commit aeaa02aa authored by Matthew Taylor's avatar Matthew Taylor
Browse files
Options

Update with links, fix linter issues, center setup

parent 3220fd1b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 189 deletions
src/_typography.scss
View file @ aeaa02aa
......@@ -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;
}
// Link Typography
a {
cursor: pointer;
color: $ui-blue;
font-weight: 500;
&:hover {
text-decoration: none;
color: darken($ui-blue, 15);
}
}
// Paragraph Typography
// 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);
}
}
}
b {
font-weight: 500;
a {
white-space: nowrap;
}
}
// Link Typography
a {
b {
font-weight: 500;
color: $ui-blue;
cursor: pointer;
&:hover {
color: darken($ui-blue, 15);
text-decoration: none;
}
}
p a {
white-space: nowrap;
}
// List Typography
// 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;
}
}
}
\ No newline at end of file
}
src/views/wedo2/l10n.json
View file @ aeaa02aa
{
"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)."
}
\ No newline at end of file
}
src/views/wedo2/wedo2.jsx
View file @ aeaa02aa
This diff is collapsed.
src/views/wedo2/wedo2.scss
View file @ aeaa02aa
......@@ -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;
transition: transform .25s ease;
margin: 10px;
background-color: $ui-white;
border-radius: 7px;
background-color: $ui-white;
max-width: $cols3;
overflow: hidden;
transition: transform .25s ease;
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;
}
......
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