Skip to content

GitLab

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

Update hoc page with new tutorials 

Adds:
1. Make it Fly
2. Make Music

Removes:
1. Hide-and-Seek
2. Dance, Dance, Dance
parent 974b364a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 271 additions and 361 deletions
src/l10n.json
View file @ 469d7a35
...@@ -69,12 +69,6 @@ ...@@ -69,12 +69,6 @@
"general.studios": "Studios", "general.studios": "Studios",
"general.support": "Support", "general.support": "Support",
"general.tipsWindow": "Tips Window", "general.tipsWindow": "Tips Window",
"general.tipsAnimateYourNameTitle": "Animate Your Name",
"general.tipsBearstack": "Bearstack Story",
"general.tipsDanceTitle": "Dance, Dance, Dance",
"general.tipsGetStarted": "Getting Started",
"general.tipsHideAndSeekTitle": "Hide-and-Seek Game",
"general.tipsPongGame": "Create a Pong Game",
"general.termsOfUse": "Terms of Use", "general.termsOfUse": "Terms of Use",
"general.username": "Username", "general.username": "Username",
"general.validationEmail": "Please enter a valid email address", "general.validationEmail": "Please enter a valid email address",
......
src/views/hoc/hoc.jsx
View file @ 469d7a35
This diff is collapsed.
src/views/hoc/hoc.scss
View file @ 469d7a35
...@@ -8,123 +8,117 @@ $base-bg: $ui-white; ...@@ -8,123 +8,117 @@ $base-bg: $ui-white;
} }
.hoc { .hoc {
.title-banner { .img,
&.wbb-bg { .button {
background-image: url("/images/hoc2015/hide-bg.jpg"); &.card-info {
width: calc(100% - 20px);
} }
}
&.dance-bg { .img {
background-image: url("/images/hoc2015/dance-bg.jpg"); &.card-info {
margin: 10px 10px 5px 10px;
border-radius: 5px;
} }
&.name-bg { &.mod-border {
background-image: url("/images/hoc2015/name-bg.jpg"); border-radius: 5px;
width: 100%;
} }
section { &.mod-resource,
border: 0; &.mod-studio {
padding: 10px 0; margin-right: 15px;
max-width: $desktop; }
.card-deck { &.mod-studio {
padding: 0 20px; float: left;
} }
//6 columns &.mod-logo {
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { margin: 20px;
max-width: $mobile; max-width: 150px;
} max-height: 55px;
vertical-align: middle;
} }
} }
.flex-row { .button {
.card { &.card-info {
margin: 10px; margin: 0 10px 10px 10px;
border-radius: 7px;
background-color: $active-gray;
padding: 2px;
width: 30%;
min-width: 200px;
max-width: 230px;
.card-info {
border-radius: 5px;
background-color: $base-bg;
width: 100%;
height: 100%;
button,
img {
width: calc(100% - 20px);
}
img {
margin: 10px 10px 5px 10px;
border-radius: 5px;
}
button {
margin: 0 10px 10px 10px;
}
}
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
margin: 2px;
min-width: 175px;
button {
font-size: .7em;
}
}
} }
} }
section { .section {
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
border-bottom: 1px solid $ui-border; border-bottom: 1px solid $ui-border;
padding: 50px 0; padding: 50px 0;
width: 95%; width: 95%;
text-align: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
p {
margin: 10px auto 20px;
max-width: 600px;
}
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
&.one-up { &.title-banner-section {
text-align: center; border: 0;
padding: 10px 0;
max-width: $desktop;
}
}
.column { .section-column {
width: 100%; width: 100%;
}
&.mod-split {
min-width: 200px;
max-width: 40%;
text-align: left;
} }
}
&.two-up { .section-paragraph {
.column { margin: 10px auto 20px;
min-width: 200px; max-width: 600px;
max-width: 40%; }
text-align: left;
img { .title-banner {
border-radius: 5px; &.wbb-bg {
width: 100%; background-image: url("/images/hoc2015/hide-bg.jpg");
} }
}
&.dance-bg {
background-image: url("/images/hoc2015/dance-bg.jpg");
}
&.name-bg {
background-image: url("/images/hoc2015/name-bg.jpg");
} }
} }
.flex-row-card {
margin: 10px;
border-radius: 7px;
background-color: $active-gray;
padding: 2px;
width: 30%;
min-width: 200px;
max-width: 230px;
}
.flex-row-card-info {
border-radius: 5px;
background-color: $base-bg;
width: 100%;
height: 100%;
}
.resource, .resource,
.studio { .studio {
display: flex; display: flex;
...@@ -134,97 +128,104 @@ $base-bg: $ui-white; ...@@ -134,97 +128,104 @@ $base-bg: $ui-white;
text-align: left; text-align: left;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img {
margin-right: 15px;
}
a {
h5 {
margin: 8px 0;
color: $ui-blue;
font-weight: 500;
&:hover {
color: darken($ui-blue, 15);
}
}
}
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
display: block;
width: 30%;
min-width: 180px;
text-align: center;
img {
margin: 0 auto;
}
}
} }
.resource { .resource {
width: 33%; width: 33%;
}
a { .resource-anchor {
display: block; display: block;
margin: 5px 0; margin: 5px 0;
font-size: .8em; font-size: .8em;
} }
.resource-info { .resource-info-header {
h5 { margin: 0;
margin: 0; line-height: inherit;
line-height: inherit;
}
}
} }
.studio { .studio {
width: 50%; width: 50%;
}
h5 { .studio-info-header {
width: 200px; margin: 8px 0;
} width: 200px;
color: $ui-blue;
font-weight: 500;
img { &:hover {
float: left; color: darken($ui-blue, 15);
} }
}
.logos {
margin: 20px 0;
width: 100%;
}
@media only screen and (max-width: $mobile - 1) { .trademark {
margin-top: 20px;
}
}
@media only screen and (max-width: $mobile - 1) {
.hoc {
.studio {
display: inline-block; display: inline-block;
} }
}
}
//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.hoc {
.title-banner-section {
max-width: $mobile;
}
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { .studio {
display: inline-block; display: inline-block;
} }
}
}
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
h5 { .hoc {
width: 100%; .img {
&.mod-resource,
&.mod-studio {
margin: 0 auto;
} }
img { &.mod-studio {
float: none; float: none;
} }
} }
}
.logos { .button {
margin: 20px 0; &.card-info {
width: 100%; font-size: .7em;
}
}
img { .flex-row-card {
margin: 20px; margin: 2px;
max-width: 150px; min-width: 175px;
max-height: 55px;
vertical-align: middle;
} }
}
.trademark { .resource,
margin-top: 20px; .studio {
display: block;
width: 30%;
min-width: 180px;
text-align: center;
}
.studio-info-header {
width: 100%;
}
} }
} }
src/views/hoc/l10n.json
View file @ 469d7a35
...@@ -15,5 +15,12 @@ ...@@ -15,5 +15,12 @@
"hoc.studioWeBareBears": "We Bare Bears Studio", "hoc.studioWeBareBears": "We Bare Bears Studio",
"hoc.subTitle": "With Scratch, you can program your own stories, games, and animations — and share them online.", "hoc.subTitle": "With Scratch, you can program your own stories, games, and animations — and share them online.",
"hoc.tipsDescription": "Need help getting started? Looking for ideas?&nbsp; You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>", "hoc.tipsDescription": "Need help getting started? Looking for ideas?&nbsp; You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>",
"hoc.title": "Get Creative with Coding" "hoc.title": "Get Creative with Coding",
"hoc.tipsAnimateYourNameTitle": "Animate Your Name",
"hoc.tipsBearstack": "Bearstack Story",
"hoc.tipsMakeMusicTitle": "Make Music",
"hoc.tipsGetStarted": "Getting Started",
"hoc.tipsMakeItFlyTitle": "Make it Fly",
"hoc.tipsPongGame": "Create a Pong Game",
"hoc.tipsBBallHoops": "B-Ball Hoops"
} }
\ No newline at end of file
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