diff --git a/en.json b/en.json index 19a2f7f1a..19dd560e5 100644 --- a/en.json +++ b/en.json @@ -32,6 +32,13 @@ "general.signIn": "Sign in", "general.statistics": "Statistics", "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.viewAll": "View All", @@ -41,6 +48,22 @@ "footer.discuss": "Discussion Forums", "footer.help": "Help Page", "footer.scratchFamily": "Scratch Family", + "hoc.activityCards": "Activity Cards", + "hoc.activityCardsHeader": "Activity Cards and Guides", + "hoc.activityCardsInfo1": "Want tips and ideas for these Hour of Code activities? Use the activity cards to get ideas for creating with Scratch. Facilitator guides can help you plan a group activity.", + "hoc.addToStudios": "Add Your Projects to Studios", + "hoc.addToStudiosDescription": "These studios include projects created by young people around the world. Take a look at the studios to get inspired - or submit your own projects to the studios!", + "hoc.facilitatorGuide": "Facilitator Guide", + "hoc.findOutMore": "Find out more", + "hoc.helpScratch": "Help with Scratch", + "hoc.helpScratchDescription": "You can find tutorials and helpful hints in the Tips Window. For more resources, see Scratch Help", + "hoc.moreActivities": "Want More Activities?", + "hoc.moreDescription": "Check out these other tutorials. Or remix one of our Starter Projects", + "hoc.studioAlice": "Alice in Wonderland 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.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", "intro.aboutScratch": "ABOUT SCRATCH", "intro.forEducators": "FOR EDUCATORS", "infro.forParents": "FOR PARENTS", diff --git a/src/_frameless.scss b/src/_frameless.scss new file mode 100644 index 000000000..c8e2b9457 --- /dev/null +++ b/src/_frameless.scss @@ -0,0 +1,91 @@ +/* + Frameless + by Joni Korpi + licensed under CC0 +*/ + + +// +// Configuration +// + +$font-size: 16px; // Your base font-size in pixels +$em: $font-size / 1em; // Shorthand for outputting ems + +$column: 60px; // The column-width of your grid in pixels +$gutter: 20px; // The gutter-width of your grid in pixels + + + +// +// Column-widths in variables, in ems +// + +$cols1: ( 1 * ($column + $gutter) - $gutter) / $em; +$cols2: ( 2 * ($column + $gutter) - $gutter) / $em; +$cols3: ( 3 * ($column + $gutter) - $gutter) / $em; +$cols4: ( 4 * ($column + $gutter) - $gutter) / $em; +$cols5: ( 5 * ($column + $gutter) - $gutter) / $em; +$cols6: ( 6 * ($column + $gutter) - $gutter) / $em; +$cols7: ( 7 * ($column + $gutter) - $gutter) / $em; +$cols8: ( 8 * ($column + $gutter) - $gutter) / $em; +$cols9: ( 9 * ($column + $gutter) - $gutter) / $em; +$cols10: (10 * ($column + $gutter) - $gutter) / $em; +$cols11: (11 * ($column + $gutter) - $gutter) / $em; +$cols12: (12 * ($column + $gutter) - $gutter) / $em; + +// +// Column-widths in a function, in ems +// + +@mixin width ($cols: 1) { + width: ($cols * ($column + $gutter) - $gutter) / $em; +} + +$desktop: 942px; +$tablet: 640px; +$mobile: 480px; + +//4 columns +@media only screen and (max-width: $mobile - 1) { + #view { + text-align: center; + } + + .inner { + margin: 0 auto; + width: 100%; + } +} + +//6 columns +@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { + #view { + text-align: center; + } + + .inner { + margin: 0 auto; + width: $mobile; + } +} + +//8 columns +@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { + #view { + text-align: center; + } + + .inner { + margin: 0 auto; + width: $tablet; + } +} + +//12 columns +@media only screen and (min-width: $desktop) { + .inner { + margin: 0 auto; + width: $desktop; + } +} diff --git a/src/components/box/box.scss b/src/components/box/box.scss index c44d71a37..632c31a07 100644 --- a/src/components/box/box.scss +++ b/src/components/box/box.scss @@ -1,4 +1,5 @@ @import "../../colors"; +@import "../../frameless"; $base-bg: $ui-white; @@ -6,6 +7,47 @@ $base-bg: $ui-white; display: inline-block; border: 1px solid $ui-border; border-radius: 10px 10px 0 0; + + //4 columns + @media only screen and (max-width: $mobile - 1) { + width: $cols4; + .box-header { + h4 { + font-size: .9rem; + } + } + } + + //6 columns + @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { + width: $cols6; + .box-header { + h4 { + font-size: 1.0rem; + } + } + } + + //8 columns + @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { + width: $cols8; + .box-header { + h4 { + font-size: 1.1rem; + } + } + } + + //12 columns + @media only screen and (min-width: $desktop) { + width: $cols12; + .box-header { + h4 { + font-size: 1.1rem; + } + } + } + background-color: $ui-white; width: 100%; @@ -25,8 +67,6 @@ $base-bg: $ui-white; h4 { display: inline-block; float: left; - - font-size: 1.1rem; } p { diff --git a/src/components/news/news.scss b/src/components/news/news.scss index e58bee698..ff43bfe7b 100644 --- a/src/components/news/news.scss +++ b/src/components/news/news.scss @@ -19,6 +19,7 @@ a { display: block; text-decoration: none; + white-space: normal; &:hover { text-decoration: none; diff --git a/src/components/subnavigation/subnavigation.jsx b/src/components/subnavigation/subnavigation.jsx new file mode 100644 index 000000000..ca0e2bcd3 --- /dev/null +++ b/src/components/subnavigation/subnavigation.jsx @@ -0,0 +1,21 @@ +var classNames = require('classnames'); +var React = require('react'); + +require('./subnavigation.scss'); + +var SubNavigation = React.createClass({ + type: 'SubNavigation', + render: function () { + var classes = classNames( + 'sub-nav', + this.props.className + ); + return ( +
+ {this.props.children} +
+ ); + } +}); + +module.exports = SubNavigation; diff --git a/src/components/subnavigation/subnavigation.scss b/src/components/subnavigation/subnavigation.scss new file mode 100644 index 000000000..0f951cd4e --- /dev/null +++ b/src/components/subnavigation/subnavigation.scss @@ -0,0 +1,56 @@ +@import "../../colors"; + +.sub-nav { + display: flex; + margin: 0 auto; + padding: 5px 0; + width: 100%; + color: $type-white; + font-size: .8rem; + font-weight: bold; + justify-content: center; + flex-wrap: wrap; + + + li { + display: inline-block; + margin: 5px; + border: 2px solid $active-gray; + border-radius: 50px; + padding: .75em 1em; + text-decoration: none; + color: $type-white; + list-style-type: none; + + &:hover { + transition: background-color .25s ease; + border-color: transparent; + background-color: $active-gray; + } + + &:active { + border: 0 solid transparent; + box-shadow: inset 0 0 5px $box-shadow-gray; + background-color: $active-dark-gray; + padding: calc(.75em + 2px) calc(1em + 2px); + } + + &.description { + /* clear styling for info element */ + border: none; + border-radius: none; + text-decoration: none; + + &:hover { + transition: none; + background-color: transparent; + } + + &:active { + border: none; + box-shadow: none; + background-color: transparent; + } + } + } +} diff --git a/src/main.scss b/src/main.scss index 78840ed01..9f4666247 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,4 +1,5 @@ @import "colors"; +@import "frameless"; /* Tags */ html, @@ -35,6 +36,10 @@ h4 { } /* Links */ +a { + white-space: nowrap; +} + a:link, a:visited, a:active { @@ -47,11 +52,6 @@ a:hover { } /* Classes */ -.inner { - margin: 0 auto; - width: 942px; -} - .empty { $bg-blue: #d9edf7; $bg-blue-accent: #bce8f1; @@ -62,6 +62,7 @@ a:hover { text-align: center; line-height: 2rem; color: $type-gray; + h4 { color: $type-gray; } diff --git a/src/views/hoc/hoc.jsx b/src/views/hoc/hoc.jsx index f98fe4d3c..a613e8913 100644 --- a/src/views/hoc/hoc.jsx +++ b/src/views/hoc/hoc.jsx @@ -1,11 +1,14 @@ var classNames = require('classnames'); +var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage; +var FormattedMessage = require('react-intl').FormattedMessage; var React = require('react'); var render = require('../../lib/render.jsx'); -require('./hoc.scss'); - var Button = require('../../components/forms/button.jsx'); var Box = require('../../components/box/box.jsx'); +var SubNavigation = require('../../components/subnavigation/subnavigation.jsx'); + +require('./hoc.scss'); var Hoc = React.createClass({ type: 'Hoc', @@ -28,102 +31,329 @@ var Hoc = React.createClass({ return (
-

Get Creative with Coding

+

+ +

- With Scratch, you can program your own stories, games, and animations — - and share them online. +

- + +
- +
-

Activity Cards and Guides

+

+ +

- Want tips and ideas for your Hour-of-Code activities?  - View and print activity cards and facilitator guides. -
- For more resources, see Scratch Help. +

-
Animate Your Name
- Activity Cards - Facilitator Guide +
+ +
+ + + + + +
-
Hide-and-Seek
- Activity Cards - Facilitator Guide +
+ +
+ + + + + +
-
Dance, Dance, Dance
- Activity Cards - Facilitator Guide +
+ +
+ + + + + +
-

Tips Window

+

+ +

- Need help getting started? Looking for ideas?  - You can find tutorials and helpful hints in the -
- Tips Window + Tips Window. ' + + 'For more resources, see Scratch Help' + } />

- + +
+
+ +
+
+

+ +

+

+ Starter Projects' + } /> +

+
+ + +
+ +
+
+

+ +

+

+ +

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
@@ -131,10 +361,21 @@ var Hoc = React.createClass({

Collaborators

diff --git a/src/views/hoc/hoc.scss b/src/views/hoc/hoc.scss index 88847e3a1..b4089d0ec 100644 --- a/src/views/hoc/hoc.scss +++ b/src/views/hoc/hoc.scss @@ -1,4 +1,5 @@ @import "../../colors"; +@import "../../frameless"; $base-bg: $ui-white; @@ -6,147 +7,112 @@ $base-bg: $ui-white; padding: 0; // To be integrated into the Global Typography standards + h3, + p { + font-weight: 300; + } + p { line-height: 2em; } - // To be revamped in Global Grids standards - .inner { - margin: 0 auto; - width: 80%; - max-width: 960px; - - .box { - margin-bottom: 10px; - } - } - .top-banner { transition: background-image .5s ease, background-color .5s ease; - - margin-top: 10px; margin-bottom: 40px; - background-color: $ui-aqua; background-position: center; background-size: cover; - - padding: 10px 0; + padding: 20px 0; width: 100%; &.wbb-bg { - background-image: url("/images/hide-bg.jpg"); + background-image: url("/images/hoc2015/hide-bg.jpg"); } &.dance-bg { - background-image: url("/images/dance-bg.jpg"); + background-image: url("/images/hoc2015/dance-bg.jpg"); } &.name-bg { - background-image: url("/images/name-bg.jpg"); + background-image: url("/images/hoc2015/name-bg.jpg"); } h1, p { margin: 0 auto; - padding-top: 10px; - + padding: 5px 0; max-width: 500px; - text-align: center; color: $type-white; } - .card-deck, - .sub-nav { - display: flex; - margin: 20px auto; + section { + border: 0; + padding: 10px 0; + max-width: $desktop; + + .card-deck { + padding: 0 20px; + } + + //6 columns + @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { + max-width: $mobile; + } + } + } + + .card-deck { + display: inline-flex; + justify-content: center; + flex-wrap: wrap; + + .card { + margin: 10px; + border-radius: 7px; + background-color: $active-gray; + padding: 2px; - width: 80%; - max-width: 960px; + width: 30%; + min-width: 200px; + max-width: 230px; - justify-content: center; - flex-wrap: wrap; - } + a { + white-space: normal; + } - .card-deck { - - .card { - display: inline-block; - margin: 10px; - border-radius: 7px; - background-color: $active-gray; - padding: 2px; + .card-info { + border-radius: 5px; + background-color: $base-bg; + width: 100%; + height: 100%; - width: 30%; - min-width: 200px; - max-width: 230px; - .card-info { + button, + img { + width: calc(100% - 20px); + } + + img { + margin: 10px 10px 5px 10px; 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; - } - } - } - } - - .sub-nav { - color: $type-white; - font-size: .8em; - font-weight: bold; - - li { - - display: inline-block; - margin: 5px; - - padding: .75em 1em; - - list-style-type: none; - - } - - a .link { - - border: 2px solid $active-gray; - - border-radius: 50px; - - text-decoration: none; - color: $type-white; - - - &:hover { - transition: background-color .25s ease; - border-color: transparent; - background-color: $active-gray; } - &:active { - border: 0 solid transparent; - box-shadow: inset 0 0 5px $box-shadow-gray; - background-color: $active-dark-gray; - padding: calc(.75em + 2px) calc(1em + 2px); + 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; + } + } + } } @@ -154,92 +120,134 @@ $base-bg: $ui-white; display: flex; margin: 0 auto; border-bottom: 1px solid $ui-border; - padding: 30px 0; + padding: 50px 0; width: 95%; justify-content: center; flex-wrap: wrap; align-items: center; + p { + margin: 10px auto 20px; + max-width: 600px; + } + &:last-child { border-bottom: 0; } - h3, - p { - font-weight: 300; - } - - .logos { - margin: 10px 0; - width: 100%; - - img { - margin: 0 20px; - max-width: 200px; - max-height: 75px; - - vertical-align: middle; - } - } - - .resource { - display: flex; - margin: 10px; - border-radius: 5px; - - padding: 10px 15px; - width: 30%; - min-width: 200px; - max-width: 230px; - text-align: left; - - justify-content: center; - align-items: center; - - img { - margin-right: 15px; - } - - h5 { - margin: 8px 0; - font-weight: 500; - } - - a { - display: block; - margin: 5px 0; - font-size: .8em; - } - } - &.one-up { text-align: center; .column { - margin: 10px; width: 100%; } - - .logo { - display: block; - } } &.two-up { - .column { - margin: 10px; - min-width: 200px; max-width: 40%; + text-align: left; img { border-radius: 5px; - width: 100%; } } } } + + .resource, + .studio { + display: flex; + margin: 10px 0; + min-width: 200px; + + text-align: left; + justify-content: center; + align-items: center; + + img { + margin-right: 15px; + } + + h5 { + margin: 8px 0; + font-weight: 500; + } + + //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 { + width: 33%; + + a { + display: block; + margin: 5px 0; + font-size: .8em; + } + } + + .studio { + width: 50%; + + a { + white-space: normal; + } + + 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%; + + a { + white-space: normal; + } + + img { + margin: 20px; + max-width: 150px; + max-height: 55px; + vertical-align: middle; + } + } } diff --git a/static/images/hoc2015/bearstack-tutorial.jpg b/static/images/hoc2015/bearstack-tutorial.jpg new file mode 100644 index 000000000..d2d7cc193 Binary files /dev/null and b/static/images/hoc2015/bearstack-tutorial.jpg differ diff --git a/static/images/cn-logo.png b/static/images/hoc2015/cn-logo.png similarity index 100% rename from static/images/cn-logo.png rename to static/images/hoc2015/cn-logo.png diff --git a/static/images/code-org-logo.png b/static/images/hoc2015/code-org-logo.png similarity index 100% rename from static/images/code-org-logo.png rename to static/images/hoc2015/code-org-logo.png diff --git a/static/images/dance-bg.jpg b/static/images/hoc2015/dance-bg.jpg similarity index 100% rename from static/images/dance-bg.jpg rename to static/images/hoc2015/dance-bg.jpg diff --git a/static/images/dance-tutorial.jpg b/static/images/hoc2015/dance-tutorial.jpg similarity index 100% rename from static/images/dance-tutorial.jpg rename to static/images/hoc2015/dance-tutorial.jpg diff --git a/static/images/hoc2015/getting-started-tutorial.jpg b/static/images/hoc2015/getting-started-tutorial.jpg new file mode 100644 index 000000000..814e7433d Binary files /dev/null and b/static/images/hoc2015/getting-started-tutorial.jpg differ diff --git a/static/images/hide-bg.jpg b/static/images/hoc2015/hide-bg.jpg similarity index 100% rename from static/images/hide-bg.jpg rename to static/images/hoc2015/hide-bg.jpg diff --git a/static/images/hide-seek-tutorial.jpg b/static/images/hoc2015/hide-seek-tutorial.jpg similarity index 100% rename from static/images/hide-seek-tutorial.jpg rename to static/images/hoc2015/hide-seek-tutorial.jpg diff --git a/static/images/name-bg.jpg b/static/images/hoc2015/name-bg.jpg similarity index 100% rename from static/images/name-bg.jpg rename to static/images/hoc2015/name-bg.jpg diff --git a/static/images/name-tutorial.jpg b/static/images/hoc2015/name-tutorial.jpg similarity index 100% rename from static/images/name-tutorial.jpg rename to static/images/hoc2015/name-tutorial.jpg diff --git a/static/images/paa-logo.png b/static/images/hoc2015/paa-logo.png similarity index 100% rename from static/images/paa-logo.png rename to static/images/hoc2015/paa-logo.png diff --git a/static/images/pocketcode-logo.png b/static/images/hoc2015/pocketcode-logo.png similarity index 100% rename from static/images/pocketcode-logo.png rename to static/images/hoc2015/pocketcode-logo.png diff --git a/static/images/hoc2015/pong-tutorial.jpg b/static/images/hoc2015/pong-tutorial.jpg new file mode 100644 index 000000000..222815eae Binary files /dev/null and b/static/images/hoc2015/pong-tutorial.jpg differ diff --git a/static/images/hoc2015/scratchEd-logo.png b/static/images/hoc2015/scratchEd-logo.png new file mode 100644 index 000000000..f116ff7b8 Binary files /dev/null and b/static/images/hoc2015/scratchEd-logo.png differ diff --git a/static/images/tips-test-animation.gif b/static/images/hoc2015/tips-test-animation.gif similarity index 100% rename from static/images/tips-test-animation.gif rename to static/images/hoc2015/tips-test-animation.gif diff --git a/static/svgs/studio.svg b/static/svgs/studio.svg new file mode 100644 index 000000000..bd1d2fbce --- /dev/null +++ b/static/svgs/studio.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +