mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 15:47:53 -05:00
Merge branch 'release/hoc-2016-1' into release/2.2.15
* release/hoc-2016-1: Merge pull request #1027 from TheGrits/patch-7 Additional content changes Fix TTT content Redirect hoc page to `/go` Merge pull request #1037 from chrisgarrity/patch-column-count update ttt content Update ttt content Merge pull request #1006 from chrisgarrity/feature/gh979-tttpage Merge pull request #1018 from mewtaylor/issue/gh-995 Merge pull request #1008 from mewtaylor/issue/gh-980 Update pattern so rewrite accepts querystring too # Conflicts: # src/components/modal/ttt/modal.jsx # src/views/jobs/jobs.jsx # src/views/thingstotry/l10n.json
This commit is contained in:
Matthew Taylor
commit
0c9f2561f9
9 changed files with 15 additions and 591 deletions
|
|
@ -88,7 +88,7 @@ var TTTModal = React.createClass({
|
||||||
href={this.props.activityLoc}
|
href={this.props.activityLoc}
|
||||||
className="button white mod-ttt-item"
|
className="button white mod-ttt-item"
|
||||||
>
|
>
|
||||||
<FormattedMessage id="ttt.download" />
|
<FormattedMessage id="ttt.open" />
|
||||||
</a>
|
</a>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
<FlexRow as="li" className="mod-ttt-item">
|
<FlexRow as="li" className="mod-ttt-item">
|
||||||
|
|
@ -109,7 +109,7 @@ var TTTModal = React.createClass({
|
||||||
href={this.props.guideLoc}
|
href={this.props.guideLoc}
|
||||||
className="button white mod-ttt-item"
|
className="button white mod-ttt-item"
|
||||||
>
|
>
|
||||||
<FormattedMessage id="ttt.download" />
|
<FormattedMessage id="ttt.open" />
|
||||||
</a>
|
</a>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -10,15 +10,20 @@
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
p {
|
p {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $type-white;
|
color: $type-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// On windows strong gets reset to font-weight 500, so make sure to override for banners
|
||||||
|
strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -121,10 +121,9 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "hoc",
|
"name": "hoc",
|
||||||
"pattern": "^/hoc/?$",
|
"pattern": "^/hoc/?(\\?.*)?$",
|
||||||
"routeAlias": "/hoc/?\\??",
|
"routeAlias": "/hoc/?\\??",
|
||||||
"view": "hoc/hoc",
|
"redirect": "/go"
|
||||||
"title": "Hour of Code"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "cards",
|
"name": "cards",
|
||||||
|
|
|
||||||
|
|
@ -1,338 +0,0 @@
|
||||||
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
|
|
||||||
var FormattedMessage = require('react-intl').FormattedMessage;
|
|
||||||
var React = require('react');
|
|
||||||
var render = require('../../lib/render.jsx');
|
|
||||||
|
|
||||||
var Button = require('../../components/forms/button.jsx');
|
|
||||||
var Box = require('../../components/box/box.jsx');
|
|
||||||
var FlexRow = require('../../components/flex-row/flex-row.jsx');
|
|
||||||
var Page = require('../../components/page/www/page.jsx');
|
|
||||||
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
|
||||||
var TitleBanner = require('../../components/title-banner/title-banner.jsx');
|
|
||||||
|
|
||||||
require('./hoc.scss');
|
|
||||||
|
|
||||||
var Hoc = React.createClass({
|
|
||||||
type: 'Hoc',
|
|
||||||
|
|
||||||
getInitialState: function () {
|
|
||||||
return {
|
|
||||||
bgClass: ''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
onCardEnter: function (bgClass) {
|
|
||||||
this.setState({
|
|
||||||
bgClass: bgClass
|
|
||||||
});
|
|
||||||
},
|
|
||||||
render: function () {
|
|
||||||
return (
|
|
||||||
<div className="hoc">
|
|
||||||
<TitleBanner className={this.state.bgClass}>
|
|
||||||
<h1>
|
|
||||||
<FormattedMessage id='hoc.title' />
|
|
||||||
</h1>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id='hoc.subTitle' />
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<section className="hoc-section mod-title-banner">
|
|
||||||
<FlexRow>
|
|
||||||
<div className="flex-row-card">
|
|
||||||
<a href="/projects/editor/?tip_bar=name">
|
|
||||||
<div className="flex-row-card-info"
|
|
||||||
onMouseEnter={this.onCardEnter.bind(this, 'mod-name-bg')}>
|
|
||||||
<img className="flex-row-card-info-img"
|
|
||||||
src="/images/hoc/name-tutorial.jpg"
|
|
||||||
alt="" />
|
|
||||||
<Button className="flex-row-card-info-button">
|
|
||||||
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-row-card" onMouseEnter={this.onCardEnter.bind(this, 'mod-wbb-bg')}>
|
|
||||||
<a href="/projects/editor/?tip_bar=fly">
|
|
||||||
<div className="flex-row-card-info">
|
|
||||||
<img className="flex-row-card-info-img"
|
|
||||||
src="/images/hoc/make-it-fly-tutorial.jpg"
|
|
||||||
alt="" />
|
|
||||||
<Button className="flex-row-card-info-button">
|
|
||||||
<FormattedMessage id='hoc.tipsMakeItFlyTitle' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-row-card" onMouseEnter={this.onCardEnter.bind(this, 'mod-dance-bg')}>
|
|
||||||
<a href="/projects/editor/?tip_bar=music">
|
|
||||||
<div className="flex-row-card-info">
|
|
||||||
<img className="flex-row-card-info-img"
|
|
||||||
src="/images/hoc/make-music-tutorial.png"
|
|
||||||
alt="" />
|
|
||||||
<Button className="flex-row-card-info-button">
|
|
||||||
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</FlexRow>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<SubNavigation>
|
|
||||||
<li className="description">
|
|
||||||
<FormattedMessage id='hoc.findOutMore' />:
|
|
||||||
</li>
|
|
||||||
<a href="/about/">
|
|
||||||
<li>
|
|
||||||
<FormattedMessage id='general.about' />
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a href="/parents/">
|
|
||||||
<li>
|
|
||||||
<FormattedMessage id='general.forParents' />
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a href="/educators/">
|
|
||||||
<li>
|
|
||||||
<FormattedMessage id='general.forEducators'/>
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
</SubNavigation>
|
|
||||||
</TitleBanner>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="inner">
|
|
||||||
<Box title={''}>
|
|
||||||
<section id="teacher" className="hoc-section">
|
|
||||||
<div className="hoc-section-column">
|
|
||||||
<h3>
|
|
||||||
<FormattedMessage id='hoc.activityCardsHeader' />
|
|
||||||
</h3>
|
|
||||||
<p className="section-paragraph">
|
|
||||||
<FormattedHTMLMessage id='hoc.activityCardsInfo1' />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hoc-section-resource">
|
|
||||||
<img className="hoc-section-resource-img"
|
|
||||||
src="/svgs/tips-card.svg"
|
|
||||||
alt="" />
|
|
||||||
<div className="hoc-section-resource-info">
|
|
||||||
<h5 className="hoc-section-resource-info-header">
|
|
||||||
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
|
|
||||||
</h5>
|
|
||||||
<a className="hoc-section-resource-anchor"
|
|
||||||
href="/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf">
|
|
||||||
<FormattedMessage id='hoc.activityCards' />
|
|
||||||
</a>
|
|
||||||
<a className="hoc-section-resource-anchor"
|
|
||||||
href="/scratchr2/static/pdfs/help/AnimateYourNameGuide.pdf">
|
|
||||||
<FormattedMessage id='hoc.facilitatorGuide' />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="hoc-section-resource">
|
|
||||||
<img className="hoc-section-resource-img"
|
|
||||||
src="/svgs/tips-card.svg"
|
|
||||||
alt="" />
|
|
||||||
<div className="hoc-section-resource-info">
|
|
||||||
<h5 className="hoc-section-resource-info-header">
|
|
||||||
<FormattedMessage id='hoc.tipsMakeItFlyTitle' />
|
|
||||||
</h5>
|
|
||||||
<a className="hoc-section-resource-anchor"
|
|
||||||
href="/scratchr2/static/pdfs/help/FlyCards.pdf">
|
|
||||||
<FormattedMessage id='hoc.activityCards' />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="hoc-section-resource">
|
|
||||||
<img className="hoc-section-resource-img"
|
|
||||||
src="/svgs/tips-card.svg"
|
|
||||||
alt="" />
|
|
||||||
<div className="hoc-section-resource-info">
|
|
||||||
<h5 className="hoc-section-resource-info-header">
|
|
||||||
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
|
|
||||||
</h5>
|
|
||||||
<a className="hoc-section-resource-anchor"
|
|
||||||
href="/scratchr2/static/pdfs/help/MusicCards.pdf">
|
|
||||||
<FormattedMessage id='hoc.activityCards' />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="hoc-section">
|
|
||||||
<div className="hoc-section-column mod-split">
|
|
||||||
<h3>
|
|
||||||
<FormattedMessage id='hoc.helpScratch' />
|
|
||||||
</h3>
|
|
||||||
<p className="hoc-section-paragraph">
|
|
||||||
<FormattedHTMLMessage id='hoc.helpScratchDescription' />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="hoc-section-column mod-split">
|
|
||||||
<img className="hoc-section-column-img"
|
|
||||||
src="/images/hoc/tips-test-animation.gif"
|
|
||||||
alt="Tips Window Animation" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="hoc-section">
|
|
||||||
<div className="hoc-section-column">
|
|
||||||
<h3>
|
|
||||||
<FormattedMessage id='hoc.moreActivities' />
|
|
||||||
</h3>
|
|
||||||
<p className="hoc-section-paragraph">
|
|
||||||
<FormattedHTMLMessage id='hoc.moreDescription' />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FlexRow>
|
|
||||||
<div className="flex-row-card">
|
|
||||||
<a href="/projects/editor/?tip_bar=getStarted">
|
|
||||||
<div className="flex-row-card-info">
|
|
||||||
<img className="flex-row-card-info-img"
|
|
||||||
src="/images/hoc/getting-started-tutorial.jpg" alt="" />
|
|
||||||
<Button>
|
|
||||||
<FormattedMessage id='hoc.tipsGetStarted' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-row-card">
|
|
||||||
<a href="/hide/">
|
|
||||||
<div className="flex-row-card-info">
|
|
||||||
<img className="flex-row-card-info-img"
|
|
||||||
src="/images/hoc/hide-seek-tutorial.jpg"
|
|
||||||
alt="" />
|
|
||||||
<Button>
|
|
||||||
<FormattedMessage id='hoc.tipsHideAndSeekTitle' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-row-card">
|
|
||||||
<a href="/projects/editor/?tip_bar=dance">
|
|
||||||
<div className="flex-row-card-info">
|
|
||||||
<img className="flex-row-card-info-img"
|
|
||||||
src="/images/hoc/dance-tutorial.jpg"
|
|
||||||
alt="" />
|
|
||||||
<Button>
|
|
||||||
<FormattedMessage id='hoc.tipsDanceTitle' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</FlexRow>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="hoc-section">
|
|
||||||
<div className="hoc-section-column">
|
|
||||||
<h3>
|
|
||||||
<FormattedMessage id='hoc.addToStudios' />
|
|
||||||
</h3>
|
|
||||||
<p className="hoc-section-paragraph">
|
|
||||||
<FormattedHTMLMessage id='hoc.addToStudiosDescription' />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FlexRow className="mod-studio">
|
|
||||||
<div className="hoc-section-studio">
|
|
||||||
<img className="hoc-section-studio-img"
|
|
||||||
src="/svgs/studio.svg"
|
|
||||||
alt="" />
|
|
||||||
<div className="hoc-section-studio-info">
|
|
||||||
<a href="/studios/432299/">
|
|
||||||
<h5 className="hoc-section-studio-info-header">
|
|
||||||
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
|
|
||||||
</h5>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hoc-section-studio">
|
|
||||||
<img className="hoc-section-studio-img"
|
|
||||||
src="/svgs/studio.svg"
|
|
||||||
alt="" />
|
|
||||||
<div className="hoc-section-studio-info">
|
|
||||||
<a href="/studios/1999784/">
|
|
||||||
<h5 className="hoc-section-studio-info-header">
|
|
||||||
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
|
|
||||||
</h5>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hoc-section-studio">
|
|
||||||
<img className="hoc-section-studio-img"
|
|
||||||
src="/svgs/studio.svg"
|
|
||||||
alt="" />
|
|
||||||
<div className="hoc-section-studio-info">
|
|
||||||
<a href="/studios/2050750/">
|
|
||||||
<h5 className="hoc-section-studio-info-header">
|
|
||||||
<FormattedMessage id='hoc.tipsMakeItFlyTitle' />
|
|
||||||
</h5>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</FlexRow>
|
|
||||||
</section>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<section className="hoc-section">
|
|
||||||
<h3>
|
|
||||||
<FormattedMessage
|
|
||||||
id='general.collaborators'
|
|
||||||
defaultMessage={'Collaborators'} />
|
|
||||||
</h3>
|
|
||||||
<div className="hoc-section-logos">
|
|
||||||
<a href="http://scratched.gse.harvard.edu/">
|
|
||||||
<img className="hoc-section-logos-img"
|
|
||||||
src="/images/hoc/scratchEd-logo.png"
|
|
||||||
alt="ScratchEd" />
|
|
||||||
</a>
|
|
||||||
<a href="https://code.org/">
|
|
||||||
<img className="hoc-section-logos-img"
|
|
||||||
src="/images/hoc/code-org-logo.png"
|
|
||||||
alt="code.org" />
|
|
||||||
</a>
|
|
||||||
<a href="http://www.cartoonnetwork.com/">
|
|
||||||
<img className="hoc-section-logos-img"
|
|
||||||
src="/images/hoc/cn-logo.png"
|
|
||||||
alt="Cartoon Network" />
|
|
||||||
</a>
|
|
||||||
<a href="http://www.madewithcode.com/">
|
|
||||||
<img className="hoc-section-logos-img"
|
|
||||||
src="/images/hoc/made-with-code-logo.png"
|
|
||||||
alt="Made with Code" />
|
|
||||||
</a>
|
|
||||||
<a href="http://www.paalive.org/">
|
|
||||||
<img className="hoc-section-logos-img"
|
|
||||||
src="/images/hoc/paa-logo.png"
|
|
||||||
alt="Progressive Arts Alliance" />
|
|
||||||
</a>
|
|
||||||
<a href="http://www.catrobat.org/">
|
|
||||||
<img className="hoc-section-logos-img"
|
|
||||||
src="/images/hoc/pocketcode-logo.png"
|
|
||||||
alt="Pocket Code" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hoc-section-trademark">
|
|
||||||
<p className="hoc-section-paragraph legal">
|
|
||||||
<FormattedHTMLMessage id='hoc.officialNotice' />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
render(<Page><Hoc /></Page>, document.getElementById('app'));
|
|
||||||
|
|
@ -1,216 +0,0 @@
|
||||||
@import "../../colors";
|
|
||||||
@import "../../frameless";
|
|
||||||
|
|
||||||
$base-bg: $ui-white;
|
|
||||||
|
|
||||||
#view {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section {
|
|
||||||
display: flex;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-bottom: 1px solid $ui-border;
|
|
||||||
padding: 50px 0;
|
|
||||||
width: 95%;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section:last-child {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section.mod-title-banner {
|
|
||||||
border: 0;
|
|
||||||
padding: 10px 0;
|
|
||||||
max-width: $desktop;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-column {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-column.mod-split {
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 40%;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-column-img {
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-paragraph {
|
|
||||||
margin: 10px auto 20px;
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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");
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-banner.mod-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%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.flex-row-card-info-button {
|
|
||||||
margin: 0 10px 10px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-resource,
|
|
||||||
.hoc-section-studio {
|
|
||||||
display: flex;
|
|
||||||
margin: 10px 0;
|
|
||||||
min-width: 200px;
|
|
||||||
|
|
||||||
text-align: left;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-resource-img,
|
|
||||||
.hoc-section-studio-img {
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-resource {
|
|
||||||
width: 33%;
|
|
||||||
min-height: 4rem;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-resource-anchor {
|
|
||||||
display: block;
|
|
||||||
margin: 5px 0;
|
|
||||||
font-size: .8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-resource-info-header {
|
|
||||||
margin: 0;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-row.mod-studio {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-studio {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-studio-img {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-studio-info-header {
|
|
||||||
margin: 8px 0;
|
|
||||||
width: 150px;
|
|
||||||
color: $ui-blue;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-studio-info-header:hover {
|
|
||||||
color: darken($ui-blue, 15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-logos {
|
|
||||||
margin: 20px 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-logos-img {
|
|
||||||
margin: 20px;
|
|
||||||
max-width: 150px;
|
|
||||||
max-height: 55px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoc-section-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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
{
|
|
||||||
"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.officialNotice": "The \"Hour of Code™\" is a nationwide initiative by <a href=\"http://csedweek.org\">Computer Science Education Week</a> and <a href=\"http://code.org\">Code.org</a> to introduce millions of students to one hour of computer science and computer programming.",
|
|
||||||
"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",
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
|
|
@ -31,7 +31,7 @@ var Jobs = React.createClass({
|
||||||
<h3><FormattedMessage id='jobs.openings' /></h3>
|
<h3><FormattedMessage id='jobs.openings' /></h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="http://bit.ly/24B9aEz">
|
<a href="http://bit.ly/2f5hABE">
|
||||||
Trust & Safety Manager
|
Trust & Safety Manager
|
||||||
</a>
|
</a>
|
||||||
<span>
|
<span>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"ttt.placeholder": "Placeholder text",
|
"ttt.placeholder": "Placeholder text",
|
||||||
"ttt.title": "Things to Try",
|
"ttt.title": "Things to Try",
|
||||||
"ttt.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try a <b>Tutorial</b>. You can also download a set of <b>Activity Cards</b> and <b>Educator Guide</b> for each theme.",
|
"ttt.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try the <strong>Tutorial</strong>. You can also download a set of <strong>Activity Cards</strong> and <strong>Educator Guide</strong> for each theme.",
|
||||||
"tile.tutorial": "Tutorial",
|
"tile.tutorial": "Tutorial",
|
||||||
"tile.guides": "See Cards and Guides",
|
"tile.guides": "See Cards and Guides",
|
||||||
"ttt.tutorialTitle": "Tutorial",
|
"ttt.tutorialTitle": "Tutorial",
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
"ttt.educatorTitle": "Educator Guide",
|
"ttt.educatorTitle": "Educator Guide",
|
||||||
"ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
|
"ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
|
||||||
"ttt.tryIt": "Try It",
|
"ttt.tryIt": "Try It",
|
||||||
"ttt.download": "Download",
|
"ttt.open": "Open",
|
||||||
"ttt.MakeItFlyTitle": "Make It Fly",
|
"ttt.MakeItFlyTitle": "Make It Fly",
|
||||||
"ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
|
"ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
|
||||||
"ttt.AnimateYourNameTitle": "Animate Your Name",
|
"ttt.AnimateYourNameTitle": "Animate Your Name",
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
"ttt.RaceDescription": "Make a game where two characters race each other.",
|
"ttt.RaceDescription": "Make a game where two characters race each other.",
|
||||||
"ttt.MakeMusicTitle": "Make Music",
|
"ttt.MakeMusicTitle": "Make Music",
|
||||||
"ttt.MakeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
|
"ttt.MakeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
|
||||||
"ttt.HideAndSeekTitle": "Hide-and-Seek Game",
|
"ttt.HideAndSeekTitle": "Hide and Seek",
|
||||||
"ttt.HideAndSeekDescription": "Make a hide-and-seek game with characters that appear and disappear.",
|
"ttt.HideAndSeekDescription": "Make a hide-and-seek game with characters that appear and disappear.",
|
||||||
"ttt.StoryTitle": "Create a Story",
|
"ttt.StoryTitle": "Create a Story",
|
||||||
"ttt.StoryDescription": "Choose characters, add conversation, and bring your story to life.",
|
"ttt.StoryDescription": "Choose characters, add conversation, and bring your story to life.",
|
||||||
|
|
|
||||||
Binary file not shown.
Loading…
Reference in a new issue