diff --git a/src/l10n.json b/src/l10n.json index 6b9041260..2ea184c23 100644 --- a/src/l10n.json +++ b/src/l10n.json @@ -69,12 +69,6 @@ "general.studios": "Studios", "general.support": "Support", "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.username": "Username", "general.validationEmail": "Please enter a valid email address", diff --git a/src/views/hoc/hoc.jsx b/src/views/hoc/hoc.jsx index 420e4c672..89230e1fb 100644 --- a/src/views/hoc/hoc.jsx +++ b/src/views/hoc/hoc.jsx @@ -30,55 +30,49 @@ var Hoc = React.createClass({

- +

- +

-
+
-
+ - -
- - @@ -88,29 +82,21 @@ var Hoc = React.createClass({
  • - : + :
  • - +
  • - +
  • - +
    • @@ -120,163 +106,124 @@ var Hoc = React.createClass({
    -
    -
    +
    +

    - +

    -

    - +

    +

    -
    - -
    -
    - + - -
    - -
    -
    - +
    + +
    - -
    - -
    -
    - +
    + +
    -
    -
    +
    +

    - +

    -

    - Tips Window. ' + - 'For more resources, see Scratch Help' - } /> +

    +

    -
    - Tips Window Animation +
    + Tips Window Animation
    -
    -
    +
    +

    - +

    -

    - Starter Projects' - } /> +

    +

    -
    +
    - -
    - -
    - + -
    - -
    - +
    + +
    +
    @@ -284,47 +231,39 @@ var Hoc = React.createClass({
    -
    -
    +
    +

    - +

    -

    - +

    +

    -
    - -
    + -
    - -
    +
    + + @@ -332,27 +271,27 @@ var Hoc = React.createClass({ -
    - -
    - -
    - + -
    - -
    +
    + + @@ -361,43 +300,48 @@ var Hoc = React.createClass({
    -
    +

    -
    + -
    -

    - Computer Science Education Week ' + - 'and Code.org to introduce millions of ' + - 'students to one hour of computer science and computer programming.' - } /> +

    +

    +

    diff --git a/src/views/hoc/hoc.scss b/src/views/hoc/hoc.scss index 5502eadbb..f6b098ab6 100644 --- a/src/views/hoc/hoc.scss +++ b/src/views/hoc/hoc.scss @@ -7,224 +7,207 @@ $base-bg: $ui-white; padding: 0; } -.hoc { - .title-banner { - &.wbb-bg { - background-image: url("/images/hoc2015/hide-bg.jpg"); - } +.hoc-section { + display: flex; + margin: 0 auto; + border-bottom: 1px solid $ui-border; + padding: 50px 0; + width: 95%; + text-align: center; - &.dance-bg { - background-image: url("/images/hoc2015/dance-bg.jpg"); - } + justify-content: center; + flex-wrap: wrap; + align-items: center; +} - &.name-bg { - background-image: url("/images/hoc2015/name-bg.jpg"); - } +.hoc-section:last-child { + border-bottom: 0; +} - section { - border: 0; - padding: 10px 0; - max-width: $desktop; +.hoc-section.mod-title-banner { + border: 0; + padding: 10px 0; + max-width: $desktop; +} - .card-deck { - padding: 0 20px; - } +.hoc-section-column { + width: 100%; +} - //6 columns - @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { - max-width: $mobile; - } - } - } +.hoc-section-column.mod-split { + min-width: 200px; + max-width: 40%; + text-align: left; +} - .flex-row { - .card { - margin: 10px; - border-radius: 7px; - background-color: $active-gray; - padding: 2px; +.hoc-section-column-img { + border-radius: 5px; + width: 100%; +} - width: 30%; - min-width: 200px; - max-width: 230px; +.hoc-section-paragraph { + margin: 10px auto 20px; + max-width: 600px; +} - .card-info { - border-radius: 5px; - background-color: $base-bg; - width: 100%; - height: 100%; +.title-banner.mod-wbb-bg { + background-image: url("/images/hoc2015/hide-bg.jpg"); +} +.title-banner.mod-dance-bg { + background-image: url("/images/hoc2015/dance-bg.jpg"); +} - button, - img { - width: calc(100% - 20px); - } +.title-banner.mod-name-bg { + background-image: url("/images/hoc2015/name-bg.jpg"); +} - img { - margin: 10px 10px 5px 10px; - border-radius: 5px; - } +.flex-row-card { + margin: 10px; + border-radius: 7px; + background-color: $active-gray; + padding: 2px; - button { - margin: 0 10px 10px 10px; - } - } + width: 30%; + min-width: 200px; + max-width: 230px; +} - //8 columns - @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { - margin: 2px; - min-width: 175px; +.flex-row-card-info { + border-radius: 5px; + background-color: $base-bg; + width: 100%; + height: 100%; +} - button { - font-size: .7em; - } - } +.flex-row-card-info-img, +.button.flex-row-card-info-button { + width: calc(100% - 20px); +} - } - } +.flex-row-card-info-img { + margin: 10px 10px 5px 10px; + border-radius: 5px; +} - section { - display: flex; - margin: 0 auto; - border-bottom: 1px solid $ui-border; - padding: 50px 0; - width: 95%; +.button.flex-row-card-info-button { + margin: 0 10px 10px 10px; +} - justify-content: center; - flex-wrap: wrap; - align-items: center; +.hoc-section-resource, +.hoc-section-studio { + display: flex; + margin: 10px 0; + min-width: 200px; - p { - margin: 10px auto 20px; - max-width: 600px; - } + text-align: left; + justify-content: center; +} - &:last-child { - border-bottom: 0; - } +.hoc-section-resource-img, +.hoc-section-studio-img { + margin-right: 15px; +} - &.one-up { - text-align: center; +.hoc-section-resource { + width: 33%; + min-height: 4rem; + align-items: flex-start; +} - .column { - width: 100%; - } - } +.hoc-section-resource-anchor { + display: block; + margin: 5px 0; + font-size: .8em; +} - &.two-up { - .column { - min-width: 200px; - max-width: 40%; - text-align: left; +.hoc-section-resource-info-header { + margin: 0; + line-height: inherit; +} - img { - border-radius: 5px; - width: 100%; - } - } - } - } +.hoc-section-studio { + width: 50%; + align-items: center; +} - .resource, - .studio { - display: flex; - margin: 10px 0; - min-width: 200px; +.hoc-section-studio-img { + float: left; +} - text-align: left; - justify-content: center; - align-items: center; +.hoc-section-studio-info-header { + margin: 8px 0; + width: 200px; + color: $ui-blue; + font-weight: 500; +} - img { - margin-right: 15px; - } +.hoc-section-studio-info-header:hover { + color: darken($ui-blue, 15); +} - a { - h5 { - margin: 8px 0; - color: $ui-blue; - font-weight: 500; +.hoc-section-logos { + margin: 20px 0; + width: 100%; +} - &:hover { - color: darken($ui-blue, 15); - } - } - } +.hoc-section-logos-img { + margin: 20px; + max-width: 150px; + max-height: 55px; + vertical-align: middle; +} - //8 columns - @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { - display: block; - width: 30%; - min-width: 180px; - text-align: center; +.hoc-section-trademark { + margin-top: 20px; +} - img { - margin: 0 auto; - } - } - } - - .resource { - width: 33%; - - a { - display: block; - margin: 5px 0; - font-size: .8em; - } - - .resource-info { - h5 { - margin: 0; - line-height: inherit; - } - } - } - - .studio { - width: 50%; - - h5 { - width: 200px; - } - - img { - float: left; - } - - @media only screen and (max-width: $mobile - 1) { - display: inline-block; - } - - @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { - display: inline-block; - } - - //8 columns - @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { - h5 { - width: 100%; - } - - img { - float: none; - } - } - } - - .logos { - margin: 20px 0; - width: 100%; - - img { - margin: 20px; - max-width: 150px; - max-height: 55px; - vertical-align: middle; - } - } - - .trademark { - margin-top: 20px; +@media only screen and (max-width: $mobile - 1) { + .hoc-section-studio { + display: inline-block; + } +} + +//6 columns +@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { + .hoc-section.mod-title-banner { + max-width: $mobile; + } + + .hoc-section-studio { + display: inline-block; + } +} + +//8 columns +@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { + .flex-row-card { + margin: 2px; + min-width: 175px; + } + + .button.flex-row-card-info-button { + font-size: .7em; + } + + .hoc-section-resource, + .hoc-section-studio { + display: block; + width: 30%; + min-width: 180px; + text-align: center; + } + + .hoc-section-resource-img, + .hoc-section-studio-img { + margin: 0 auto; + } + + .hoc-section-studio-img { + float: none; + } + + .hoc-section-studio-info-header { + width: 100%; } } diff --git a/src/views/hoc/l10n.json b/src/views/hoc/l10n.json index 235499807..08d2c3965 100644 --- a/src/views/hoc/l10n.json +++ b/src/views/hoc/l10n.json @@ -15,5 +15,12 @@ "hoc.studioWeBareBears": "We Bare Bears Studio", "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?  You can find tutorials and helpful hints in the Tips Window", - "hoc.title": "Get Creative with Coding" + "hoc.title": "Get Creative with Coding", + "hoc.tipsAnimateYourNameTitle": "Animate Your Name", + "hoc.tipsDanceTitle": "Dance, Dance, Dance", + "hoc.tipsGetStarted": "Getting Started", + "hoc.tipsHideAndSeekTitle": "Hide-and-Seek Game", + "hoc.tipsMakeMusicTitle": "Make Music", + "hoc.tipsMakeItFlyTitle": "Make it Fly", + "hoc.tipsPongGame": "Create a Pong Game" } \ No newline at end of file diff --git a/static/images/hoc2015/cn-logo.png b/static/images/hoc/cn-logo.png similarity index 100% rename from static/images/hoc2015/cn-logo.png rename to static/images/hoc/cn-logo.png diff --git a/static/images/hoc2015/code-org-logo.png b/static/images/hoc/code-org-logo.png similarity index 100% rename from static/images/hoc2015/code-org-logo.png rename to static/images/hoc/code-org-logo.png diff --git a/static/images/hoc2015/dance-bg.jpg b/static/images/hoc/dance-bg.jpg similarity index 100% rename from static/images/hoc2015/dance-bg.jpg rename to static/images/hoc/dance-bg.jpg diff --git a/static/images/hoc2015/dance-tutorial.jpg b/static/images/hoc/dance-tutorial.jpg similarity index 100% rename from static/images/hoc2015/dance-tutorial.jpg rename to static/images/hoc/dance-tutorial.jpg diff --git a/static/images/hoc2015/getting-started-tutorial.jpg b/static/images/hoc/getting-started-tutorial.jpg similarity index 100% rename from static/images/hoc2015/getting-started-tutorial.jpg rename to static/images/hoc/getting-started-tutorial.jpg diff --git a/static/images/hoc2015/hide-bg.jpg b/static/images/hoc/hide-bg.jpg similarity index 100% rename from static/images/hoc2015/hide-bg.jpg rename to static/images/hoc/hide-bg.jpg diff --git a/static/images/hoc2015/hide-seek-tutorial.jpg b/static/images/hoc/hide-seek-tutorial.jpg similarity index 100% rename from static/images/hoc2015/hide-seek-tutorial.jpg rename to static/images/hoc/hide-seek-tutorial.jpg diff --git a/static/images/hoc2015/made-with-code-logo.png b/static/images/hoc/made-with-code-logo.png similarity index 100% rename from static/images/hoc2015/made-with-code-logo.png rename to static/images/hoc/made-with-code-logo.png diff --git a/static/images/hoc/make-it-fly-tutorial.png b/static/images/hoc/make-it-fly-tutorial.png new file mode 100644 index 000000000..14f3d0c19 Binary files /dev/null and b/static/images/hoc/make-it-fly-tutorial.png differ diff --git a/static/images/hoc/make-music-tutorial.png b/static/images/hoc/make-music-tutorial.png new file mode 100644 index 000000000..ae699c7a1 Binary files /dev/null and b/static/images/hoc/make-music-tutorial.png differ diff --git a/static/images/hoc2015/name-bg.jpg b/static/images/hoc/name-bg.jpg similarity index 100% rename from static/images/hoc2015/name-bg.jpg rename to static/images/hoc/name-bg.jpg diff --git a/static/images/hoc2015/name-tutorial.jpg b/static/images/hoc/name-tutorial.jpg similarity index 100% rename from static/images/hoc2015/name-tutorial.jpg rename to static/images/hoc/name-tutorial.jpg diff --git a/static/images/hoc2015/paa-logo.png b/static/images/hoc/paa-logo.png similarity index 100% rename from static/images/hoc2015/paa-logo.png rename to static/images/hoc/paa-logo.png diff --git a/static/images/hoc2015/pocketcode-logo.png b/static/images/hoc/pocketcode-logo.png similarity index 100% rename from static/images/hoc2015/pocketcode-logo.png rename to static/images/hoc/pocketcode-logo.png diff --git a/static/images/hoc2015/pong-tutorial.jpg b/static/images/hoc/pong-tutorial.jpg similarity index 100% rename from static/images/hoc2015/pong-tutorial.jpg rename to static/images/hoc/pong-tutorial.jpg diff --git a/static/images/hoc2015/scratchEd-logo.png b/static/images/hoc/scratchEd-logo.png similarity index 100% rename from static/images/hoc2015/scratchEd-logo.png rename to static/images/hoc/scratchEd-logo.png diff --git a/static/images/hoc2015/tips-test-animation.gif b/static/images/hoc/tips-test-animation.gif similarity index 100% rename from static/images/hoc2015/tips-test-animation.gif rename to static/images/hoc/tips-test-animation.gif diff --git a/static/images/hoc2015/bball-tutorial.jpg b/static/images/hoc2015/bball-tutorial.jpg deleted file mode 100644 index 0f043f736..000000000 Binary files a/static/images/hoc2015/bball-tutorial.jpg and /dev/null differ diff --git a/static/images/hoc2015/bearstack-tutorial.jpg b/static/images/hoc2015/bearstack-tutorial.jpg deleted file mode 100644 index 1adb992a1..000000000 Binary files a/static/images/hoc2015/bearstack-tutorial.jpg and /dev/null differ