mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
Merge pull request #189 from mewtaylor/feature/hoc
Update hoc page formatting
This commit is contained in:
Matthew Taylor
commit
a5e6ea4a61
25 changed files with 763 additions and 229 deletions
23
en.json
23
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 <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>. For more resources, see <a href=\"/help\">Scratch Help</a>",
|
||||
"hoc.moreActivities": "Want More Activities?",
|
||||
"hoc.moreDescription": "Check out these other tutorials. Or remix one of our <a href=\"/starter_projects\">Starter Projects</a>",
|
||||
"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 <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>",
|
||||
"hoc.title": "Get Creative with Coding",
|
||||
"intro.aboutScratch": "ABOUT SCRATCH",
|
||||
"intro.forEducators": "FOR EDUCATORS",
|
||||
"infro.forParents": "FOR PARENTS",
|
||||
|
|
|
|||
91
src/_frameless.scss
Normal file
91
src/_frameless.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
/*
|
||||
Frameless <http://framelessgrid.com/>
|
||||
by Joni Korpi <http://jonikorpi.com/>
|
||||
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
|
||||
*/
|
||||
|
||||
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
white-space: normal;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
21
src/components/subnavigation/subnavigation.jsx
Normal file
21
src/components/subnavigation/subnavigation.jsx
Normal file
|
|
@ -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 (
|
||||
<div className={classes}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = SubNavigation;
|
||||
56
src/components/subnavigation/subnavigation.scss
Normal file
56
src/components/subnavigation/subnavigation.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div>
|
||||
<div className={classes}>
|
||||
<h1>Get Creative with Coding</h1>
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
id='hoc.title'
|
||||
defaultMessage={'Get Creative with Coding'} />
|
||||
</h1>
|
||||
<p>
|
||||
With Scratch, you can program your own stories, games, and animations —
|
||||
and share them online.
|
||||
<FormattedMessage
|
||||
id='hoc.subTitle'
|
||||
defaultMessage={
|
||||
'With Scratch, you can program your own stories, games, and animations — ' +
|
||||
'and share them online.'
|
||||
} />
|
||||
</p>
|
||||
|
||||
<div className="card-deck">
|
||||
<div className="card">
|
||||
<a href="/projects/editor/?tip_bar=name">
|
||||
<div className="card-info" onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
|
||||
<img src="/images/name-tutorial.jpg" />
|
||||
<Button>Animate Your Name</Button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<section>
|
||||
<div className="card-deck">
|
||||
<div className="card">
|
||||
<a href="/projects/editor/?tip_bar=name">
|
||||
<div className="card-info" onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
|
||||
<img src="/images/hoc2015/name-tutorial.jpg" />
|
||||
<Button>
|
||||
<FormattedMessage
|
||||
id='general.tipsAnimateYourNameTitle'
|
||||
defaultMessage={'Animate Your Name'} />
|
||||
</Button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="card" onMouseEnter={this.onCardEnter.bind(this, 'wbb-bg')}>
|
||||
<a href="/hide">
|
||||
<div className="card-info">
|
||||
<img src="/images/hide-seek-tutorial.jpg" />
|
||||
<Button> Hide-and-Seek Game</Button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="card" onMouseEnter={this.onCardEnter.bind(this, 'wbb-bg')}>
|
||||
<a href="/hide">
|
||||
<div className="card-info">
|
||||
<img src="/images/hoc2015/hide-seek-tutorial.jpg" />
|
||||
<Button>
|
||||
<FormattedMessage
|
||||
id='general.tipsHideAndSeekTitle'
|
||||
defaultMessage={'Hide-and-Seek Game'} />
|
||||
</Button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="card" onMouseEnter={this.onCardEnter.bind(this, 'dance-bg')}>
|
||||
<a href="/projects/editor/?tip_bar=dance">
|
||||
<div className="card-info">
|
||||
<img src="/images/dance-tutorial.jpg" />
|
||||
<Button>Dance, Dance, Dance</Button>
|
||||
</div>
|
||||
</a>
|
||||
<div className="card" onMouseEnter={this.onCardEnter.bind(this, 'dance-bg')}>
|
||||
<a href="/projects/editor/?tip_bar=dance">
|
||||
<div className="card-info">
|
||||
<img src="/images/hoc2015/dance-tutorial.jpg" />
|
||||
<Button>
|
||||
<FormattedMessage
|
||||
id='general.tipsDanceTitle'
|
||||
defaultMessage={'Dance, Dance, Dance'} />
|
||||
</Button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="sub-nav">
|
||||
<li className="info">Find out more:</li>
|
||||
<a href="/about"><li className="link">About Scratch</li></a>
|
||||
<a href="/parents"><li className="link">For Parents</li></a>
|
||||
<a href="/educators"><li className="link">For Educators</li></a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<SubNavigation>
|
||||
<li className="description">
|
||||
<FormattedMessage
|
||||
id='hoc.findOutMore'
|
||||
defaultMessage={'Find out more'} />:
|
||||
</li>
|
||||
<a href="/about">
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id='footer.about'
|
||||
defaultMessage={'About Scratch'} />
|
||||
</li>
|
||||
</a>
|
||||
<a href="/parents">
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id='general.forParents'
|
||||
defaultMessage={'For Parents'} />
|
||||
</li>
|
||||
</a>
|
||||
<a href="/educators">
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id='general.forEducators'
|
||||
defaultMessage={'For Educators'} />
|
||||
</li>
|
||||
</a>
|
||||
</SubNavigation>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="inner">
|
||||
<Box>
|
||||
<Box title={''}>
|
||||
<section className="one-up">
|
||||
<div className="column">
|
||||
<h3>Activity Cards and Guides</h3>
|
||||
<h3>
|
||||
<FormattedMessage
|
||||
id='hoc.activityCardsHeader'
|
||||
defaultMessage={'Activity Cards and Guides'} />
|
||||
</h3>
|
||||
<p>
|
||||
Want tips and ideas for your Hour-of-Code activities?
|
||||
View and print activity cards and facilitator guides.
|
||||
<br />
|
||||
For more resources, see <a href="/help">Scratch Help</a>.
|
||||
<FormattedHTMLMessage
|
||||
id='hoc.activityCardsInfo1'
|
||||
defaultMessage={
|
||||
'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.'
|
||||
} />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="resource">
|
||||
<img src="/svgs/tips-card.svg" />
|
||||
<div className="resource-info">
|
||||
<h5>Animate Your Name</h5>
|
||||
<a href="#">Activity Cards</a>
|
||||
<a href="#">Facilitator Guide</a>
|
||||
<h5>
|
||||
<FormattedMessage
|
||||
id='general.tipsAnimateYourNameTitle'
|
||||
defaultMessage={'Animate Your Name'} />
|
||||
</h5>
|
||||
<a href="/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf">
|
||||
<FormattedMessage
|
||||
id='hoc.activityCards'
|
||||
defaultMessage={'Activity Cards'} />
|
||||
</a>
|
||||
<a href="/scratchr2/static/pdfs/help/AnimateYourNameGuide.pdf">
|
||||
<FormattedMessage
|
||||
id='hoc.facilitatorGuide'
|
||||
defaultMessage={'Facilitator Guide'} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="resource">
|
||||
<img src="/svgs/tips-card.svg" />
|
||||
<div className="resource-info">
|
||||
<h5>Hide-and-Seek</h5>
|
||||
<a href="#">Activity Cards</a>
|
||||
<a href="#">Facilitator Guide</a>
|
||||
<h5>
|
||||
<FormattedMessage
|
||||
id='general.tipsHideAndSeekTitle'
|
||||
defaultMessage={'Hide-and-Seek Game'} />
|
||||
</h5>
|
||||
<a href="/scratchr2/static/pdfs/help/Hide-and-Seek-Cards.pdf">
|
||||
<FormattedMessage
|
||||
id='hoc.activityCards'
|
||||
defaultMessage={'Activity Cards'} />
|
||||
</a>
|
||||
<a href="/scratchr2/static/pdfs/help/Hide-and-Seek-Guide.pdf">
|
||||
<FormattedMessage
|
||||
id='hoc.facilitatorGuide'
|
||||
defaultMessage={'Facilitator Guide'} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="resource">
|
||||
<img src="/svgs/tips-card.svg" />
|
||||
<div className="resource-info">
|
||||
<h5>Dance, Dance, Dance</h5>
|
||||
<a href="#">Activity Cards</a>
|
||||
<a href="#">Facilitator Guide</a>
|
||||
<h5>
|
||||
<FormattedMessage
|
||||
id='general.tipsDanceTitle'
|
||||
defaultMessage={'Dance, Dance, Dance'} />
|
||||
</h5>
|
||||
<a href="/scratchr2/static/pdfs/help/DanceCards.pdf">
|
||||
<FormattedMessage
|
||||
id='hoc.activityCards'
|
||||
defaultMessage={'Activity Cards'} />
|
||||
</a>
|
||||
<a href="/scratchr2/static/pdfs/help/DanceGuide.pdf">
|
||||
<FormattedMessage
|
||||
id='hoc.facilitatorGuide'
|
||||
defaultMessage={'Facilitator Guide'} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="two-up">
|
||||
<div className="column">
|
||||
<h3>Tips Window</h3>
|
||||
<h3>
|
||||
<FormattedMessage
|
||||
id='hoc.helpScratch'
|
||||
defaultMessage={'Help with Scratch'} />
|
||||
</h3>
|
||||
<p>
|
||||
Need help getting started? Looking for ideas?
|
||||
You can find tutorials and helpful hints in the
|
||||
<br />
|
||||
<a href="/projects/editor/?tip_bar=home">Tips Window</a>
|
||||
<FormattedHTMLMessage
|
||||
id='hoc.helpScratchDescription'
|
||||
defaultMessage={
|
||||
'You can find tutorials and helpful hints in the ' +
|
||||
'<a href="/projects/editor/?tip_bar=home">Tips Window</a>. ' +
|
||||
'For more resources, see <a href="/help">Scratch Help</a>'
|
||||
} />
|
||||
</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<img src="/images/tips-test-animation.gif" />
|
||||
<img src="/images/hoc2015/tips-test-animation.gif" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="one-up">
|
||||
<div className="column">
|
||||
<h3>
|
||||
<FormattedMessage
|
||||
id='hoc.moreActivities'
|
||||
defaultMessage={'Want More Activities?'} />
|
||||
</h3>
|
||||
<p>
|
||||
<FormattedHTMLMessage
|
||||
id='hoc.moreDescription'
|
||||
defaultMessage={
|
||||
'Check out these other tutorials. Or remix one of our ' +
|
||||
'<a href="/starter_projects">Starter Projects</a>'
|
||||
} />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="card-deck">
|
||||
<div className="card">
|
||||
<a href="/projects/editor/?tip_bar=getStarted">
|
||||
<div className="card-info">
|
||||
<img src="/images/hoc2015/getting-started-tutorial.jpg" />
|
||||
<Button>
|
||||
<FormattedMessage
|
||||
id='general.tipsGetStarted'
|
||||
defaultMessage={'Getting Started'} />
|
||||
</Button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<a href="scratch.mit.edu/bearstack ">
|
||||
<div className="card-info">
|
||||
<img src="/images/hoc2015/bearstack-tutorial.jpg" />
|
||||
<Button>
|
||||
<FormattedMessage
|
||||
id='general.tipsBearstack'
|
||||
defaultMessage={'Bearstack Story'} />
|
||||
</Button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<a href="/projects/editor/?tip_bar=pong">
|
||||
<div className="card-info">
|
||||
<img src="/images/hoc2015/pong-tutorial.jpg" />
|
||||
<Button>
|
||||
<FormattedMessage
|
||||
id='general.tipsPongGame'
|
||||
defaultMessage={'Create a Pong Game'} />
|
||||
</Button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="one-up">
|
||||
<div className="column">
|
||||
<h3>
|
||||
<FormattedMessage
|
||||
id='hoc.addToStudios'
|
||||
defaultMessage={'Add Your Projects to Studios'} />
|
||||
</h3>
|
||||
<p>
|
||||
<FormattedHTMLMessage
|
||||
id='hoc.addToStudiosDescription'
|
||||
defaultMessage={
|
||||
'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!'
|
||||
} />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="studio">
|
||||
<img src="/svgs/studio.svg" />
|
||||
<div className="studio-info">
|
||||
<a href="/studios/432299/">
|
||||
<h5>
|
||||
<FormattedMessage
|
||||
id='general.tipsAnimateYourNameTitle'
|
||||
defaultMessage={'Animate Your Name'} />
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="studio">
|
||||
<img src="/svgs/studio.svg" />
|
||||
<div className="studio-info">
|
||||
<a href="/studios/1672166">
|
||||
<h5>
|
||||
<FormattedMessage
|
||||
id='hoc.studioWeBareBears'
|
||||
defaultMessage={'We Bare Bears Studio'} />
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="studio">
|
||||
<img src="/svgs/studio.svg" />
|
||||
<div className="studio-info">
|
||||
<a href="/1065372/projects/">
|
||||
<h5>
|
||||
<FormattedMessage
|
||||
id='general.tipsDanceTitle'
|
||||
defaultMessage={'Dance, Dance, Dance'} />
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="studio">
|
||||
<img src="/svgs/studio.svg" />
|
||||
<div className="studio-info">
|
||||
<a href="/studios/1672164/">
|
||||
<h5>
|
||||
<FormattedMessage
|
||||
id='hoc.studioAlice'
|
||||
defaultMessage={'Alice in Wonderland Studio'} />
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Box>
|
||||
|
|
@ -131,10 +361,21 @@ var Hoc = React.createClass({
|
|||
<section className="one-up">
|
||||
<h3>Collaborators</h3>
|
||||
<div className="logos">
|
||||
<img src="/images/code-org-logo.png" />
|
||||
<img src="/images/cn-logo.png" />
|
||||
<img src="/images/paa-logo.png" />
|
||||
<img src="/images/pocketcode-logo.png" />
|
||||
<a href="http://scratched.gse.harvard.edu/">
|
||||
<img src="/images/hoc2015/scratchEd-logo.png" />
|
||||
</a>
|
||||
<a href="https://code.org/">
|
||||
<img src="/images/hoc2015/code-org-logo.png" />
|
||||
</a>
|
||||
<a href="http://www.cartoonnetwork.com/">
|
||||
<img src="/images/hoc2015/cn-logo.png" />
|
||||
</a>
|
||||
<a href="http://www.paalive.org/">
|
||||
<img src="/images/hoc2015/paa-logo.png" />
|
||||
</a>
|
||||
<a href="http://www.catrobat.org/">
|
||||
<img src="/images/hoc2015/pocketcode-logo.png" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
static/images/hoc2015/bearstack-tutorial.jpg
Normal file
BIN
static/images/hoc2015/bearstack-tutorial.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
BIN
static/images/hoc2015/getting-started-tutorial.jpg
Normal file
BIN
static/images/hoc2015/getting-started-tutorial.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
BIN
static/images/hoc2015/pong-tutorial.jpg
Normal file
BIN
static/images/hoc2015/pong-tutorial.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
static/images/hoc2015/scratchEd-logo.png
Normal file
BIN
static/images/hoc2015/scratchEd-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
52
static/svgs/studio.svg
Normal file
52
static/svgs/studio.svg
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="54.5px" height="43.3px" viewBox="0 0 54.5 43.3" style="enable-background:new 0 0 54.5 43.3;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
|
||||
<path style="fill:#FFFFFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
|
||||
M7.2,33.9v-31c0-1.2,1-2.2,2.2-2.2h42.3c1.2,0,2.2,1,2.2,2.2v31c0,1.2-1,2.2-2.2,2.2H9.4C8.2,36.1,7.2,35.1,7.2,33.9z"/>
|
||||
</g>
|
||||
|
||||
<line style="fill:none;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="7.2" y1="6.4" x2="53.8" y2="6.4"/>
|
||||
<g>
|
||||
|
||||
<path style="fill:#B6ECFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
|
||||
M4,37.2v-31C4,4.9,4.9,4,6.1,4h42.3c1.2,0,2.2,1,2.2,2.2v31c0,1.2-1,2.2-2.2,2.2H6.1C4.9,39.3,4,38.4,4,37.2z"/>
|
||||
</g>
|
||||
|
||||
<line style="fill:none;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="3.7" y1="10.4" x2="50.3" y2="10.4"/>
|
||||
<g>
|
||||
|
||||
<path style="fill:#FFFFFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
|
||||
M0.7,40.4v-31c0-1.2,1-2.2,2.2-2.2h42.3c1.2,0,2.2,1,2.2,2.2v31c0,1.2-1,2.2-2.2,2.2H2.9C1.7,42.6,0.7,41.6,0.7,40.4z"/>
|
||||
</g>
|
||||
|
||||
<line style="fill:none;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="0.7" y1="13.4" x2="47.3" y2="13.4"/>
|
||||
<circle style="fill:#2BB673;" cx="40.3" cy="10.6" r="0.8"/>
|
||||
<circle style="fill:#DB4C3E;" cx="43.4" cy="10.6" r="0.8"/>
|
||||
<g>
|
||||
<g>
|
||||
|
||||
<path style="fill:#B6ECFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
|
||||
M26.7,28.2c0.8,1.1,1.2,2.5,1.3,4c2.4,0.7,6.4,0.1,6.4-1.7c0-2-1-3.6-2.5-4.3c-0.4,0.4-1,0.6-1.6,0.6c-0.6,0-1.2-0.2-1.6-0.6
|
||||
C27.8,26.6,27.1,27.3,26.7,28.2z"/>
|
||||
|
||||
<path style="fill:#B6ECFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
|
||||
M27.8,24.4c0,0.7,0.3,1.4,0.8,1.9c0.4,0.4,1,0.6,1.6,0.6c0.6,0,1.2-0.2,1.6-0.6c0.5-0.5,0.9-1.1,0.9-1.9c0-1.3-1.1-2.4-2.4-2.4
|
||||
C28.9,21.9,27.8,23,27.8,24.4z"/>
|
||||
</g>
|
||||
<g>
|
||||
|
||||
<path style="fill:#B6ECFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
|
||||
M15.3,32.7c0,4,12.7,4,12.7,0c0-0.1,0-0.3,0-0.4c-0.1-1.5-0.5-2.9-1.3-4c-0.7-1-1.6-1.8-2.6-2.2c-0.6,0.6-1.5,0.9-2.4,0.9
|
||||
c-0.9,0-1.8-0.3-2.4-0.9C16.9,27.1,15.3,29.6,15.3,32.7z"/>
|
||||
|
||||
<path style="fill:#B6ECFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
|
||||
M17.9,23.1c0,1.1,0.5,2.2,1.3,2.9c0.7,0.6,1.5,0.9,2.4,0.9c0.9,0,1.8-0.3,2.4-0.9c0.8-0.7,1.3-1.7,1.3-2.9c0-2.1-1.7-3.8-3.8-3.8
|
||||
C19.6,19.4,17.9,21,17.9,23.1z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3 KiB |
Loading…
Reference in a new issue