mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 09:35:56 -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.signIn": "Sign in",
|
||||||
"general.statistics": "Statistics",
|
"general.statistics": "Statistics",
|
||||||
"general.support": "Support",
|
"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.termsOfUse": "Terms of Use",
|
||||||
"general.username": "Username",
|
"general.username": "Username",
|
||||||
"general.viewAll": "View All",
|
"general.viewAll": "View All",
|
||||||
|
|
@ -41,6 +48,22 @@
|
||||||
"footer.discuss": "Discussion Forums",
|
"footer.discuss": "Discussion Forums",
|
||||||
"footer.help": "Help Page",
|
"footer.help": "Help Page",
|
||||||
"footer.scratchFamily": "Scratch Family",
|
"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.aboutScratch": "ABOUT SCRATCH",
|
||||||
"intro.forEducators": "FOR EDUCATORS",
|
"intro.forEducators": "FOR EDUCATORS",
|
||||||
"infro.forParents": "FOR PARENTS",
|
"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 "../../colors";
|
||||||
|
@import "../../frameless";
|
||||||
|
|
||||||
$base-bg: $ui-white;
|
$base-bg: $ui-white;
|
||||||
|
|
||||||
|
|
@ -6,6 +7,47 @@ $base-bg: $ui-white;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 1px solid $ui-border;
|
border: 1px solid $ui-border;
|
||||||
border-radius: 10px 10px 0 0;
|
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;
|
background-color: $ui-white;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
|
@ -25,8 +67,6 @@ $base-bg: $ui-white;
|
||||||
h4 {
|
h4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
white-space: normal;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
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 "colors";
|
||||||
|
@import "frameless";
|
||||||
|
|
||||||
/* Tags */
|
/* Tags */
|
||||||
html,
|
html,
|
||||||
|
|
@ -35,6 +36,10 @@ h4 {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Links */
|
/* Links */
|
||||||
|
a {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
a:link,
|
a:link,
|
||||||
a:visited,
|
a:visited,
|
||||||
a:active {
|
a:active {
|
||||||
|
|
@ -47,11 +52,6 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Classes */
|
/* Classes */
|
||||||
.inner {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 942px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
$bg-blue: #d9edf7;
|
$bg-blue: #d9edf7;
|
||||||
$bg-blue-accent: #bce8f1;
|
$bg-blue-accent: #bce8f1;
|
||||||
|
|
@ -62,6 +62,7 @@ a:hover {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
color: $type-gray;
|
color: $type-gray;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
color: $type-gray;
|
color: $type-gray;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,14 @@
|
||||||
var classNames = require('classnames');
|
var classNames = require('classnames');
|
||||||
|
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
|
||||||
|
var FormattedMessage = require('react-intl').FormattedMessage;
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
var render = require('../../lib/render.jsx');
|
var render = require('../../lib/render.jsx');
|
||||||
|
|
||||||
require('./hoc.scss');
|
|
||||||
|
|
||||||
var Button = require('../../components/forms/button.jsx');
|
var Button = require('../../components/forms/button.jsx');
|
||||||
var Box = require('../../components/box/box.jsx');
|
var Box = require('../../components/box/box.jsx');
|
||||||
|
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
||||||
|
|
||||||
|
require('./hoc.scss');
|
||||||
|
|
||||||
var Hoc = React.createClass({
|
var Hoc = React.createClass({
|
||||||
type: 'Hoc',
|
type: 'Hoc',
|
||||||
|
|
@ -28,18 +31,31 @@ var Hoc = React.createClass({
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className={classes}>
|
<div className={classes}>
|
||||||
<h1>Get Creative with Coding</h1>
|
<h1>
|
||||||
|
<FormattedMessage
|
||||||
|
id='hoc.title'
|
||||||
|
defaultMessage={'Get Creative with Coding'} />
|
||||||
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
With Scratch, you can program your own stories, games, and animations —
|
<FormattedMessage
|
||||||
and share them online.
|
id='hoc.subTitle'
|
||||||
|
defaultMessage={
|
||||||
|
'With Scratch, you can program your own stories, games, and animations — ' +
|
||||||
|
'and share them online.'
|
||||||
|
} />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<section>
|
||||||
<div className="card-deck">
|
<div className="card-deck">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<a href="/projects/editor/?tip_bar=name">
|
<a href="/projects/editor/?tip_bar=name">
|
||||||
<div className="card-info" onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
|
<div className="card-info" onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
|
||||||
<img src="/images/name-tutorial.jpg" />
|
<img src="/images/hoc2015/name-tutorial.jpg" />
|
||||||
<Button>Animate Your Name</Button>
|
<Button>
|
||||||
|
<FormattedMessage
|
||||||
|
id='general.tipsAnimateYourNameTitle'
|
||||||
|
defaultMessage={'Animate Your Name'} />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -47,8 +63,12 @@ var Hoc = React.createClass({
|
||||||
<div className="card" onMouseEnter={this.onCardEnter.bind(this, 'wbb-bg')}>
|
<div className="card" onMouseEnter={this.onCardEnter.bind(this, 'wbb-bg')}>
|
||||||
<a href="/hide">
|
<a href="/hide">
|
||||||
<div className="card-info">
|
<div className="card-info">
|
||||||
<img src="/images/hide-seek-tutorial.jpg" />
|
<img src="/images/hoc2015/hide-seek-tutorial.jpg" />
|
||||||
<Button> Hide-and-Seek Game</Button>
|
<Button>
|
||||||
|
<FormattedMessage
|
||||||
|
id='general.tipsHideAndSeekTitle'
|
||||||
|
defaultMessage={'Hide-and-Seek Game'} />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -56,74 +76,284 @@ var Hoc = React.createClass({
|
||||||
<div className="card" onMouseEnter={this.onCardEnter.bind(this, 'dance-bg')}>
|
<div className="card" onMouseEnter={this.onCardEnter.bind(this, 'dance-bg')}>
|
||||||
<a href="/projects/editor/?tip_bar=dance">
|
<a href="/projects/editor/?tip_bar=dance">
|
||||||
<div className="card-info">
|
<div className="card-info">
|
||||||
<img src="/images/dance-tutorial.jpg" />
|
<img src="/images/hoc2015/dance-tutorial.jpg" />
|
||||||
<Button>Dance, Dance, Dance</Button>
|
<Button>
|
||||||
|
<FormattedMessage
|
||||||
|
id='general.tipsDanceTitle'
|
||||||
|
defaultMessage={'Dance, Dance, Dance'} />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<ul className="sub-nav">
|
<SubNavigation>
|
||||||
<li className="info">Find out more:</li>
|
<li className="description">
|
||||||
<a href="/about"><li className="link">About Scratch</li></a>
|
<FormattedMessage
|
||||||
<a href="/parents"><li className="link">For Parents</li></a>
|
id='hoc.findOutMore'
|
||||||
<a href="/educators"><li className="link">For Educators</li></a>
|
defaultMessage={'Find out more'} />:
|
||||||
</ul>
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="inner">
|
<div className="inner">
|
||||||
<Box>
|
<Box title={''}>
|
||||||
<section className="one-up">
|
<section className="one-up">
|
||||||
<div className="column">
|
<div className="column">
|
||||||
<h3>Activity Cards and Guides</h3>
|
<h3>
|
||||||
|
<FormattedMessage
|
||||||
|
id='hoc.activityCardsHeader'
|
||||||
|
defaultMessage={'Activity Cards and Guides'} />
|
||||||
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
Want tips and ideas for your Hour-of-Code activities?
|
<FormattedHTMLMessage
|
||||||
View and print activity cards and facilitator guides.
|
id='hoc.activityCardsInfo1'
|
||||||
<br />
|
defaultMessage={
|
||||||
For more resources, see <a href="/help">Scratch Help</a>.
|
'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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="resource">
|
<div className="resource">
|
||||||
<img src="/svgs/tips-card.svg" />
|
<img src="/svgs/tips-card.svg" />
|
||||||
<div className="resource-info">
|
<div className="resource-info">
|
||||||
<h5>Animate Your Name</h5>
|
<h5>
|
||||||
<a href="#">Activity Cards</a>
|
<FormattedMessage
|
||||||
<a href="#">Facilitator Guide</a>
|
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>
|
</div>
|
||||||
|
|
||||||
<div className="resource">
|
<div className="resource">
|
||||||
<img src="/svgs/tips-card.svg" />
|
<img src="/svgs/tips-card.svg" />
|
||||||
<div className="resource-info">
|
<div className="resource-info">
|
||||||
<h5>Hide-and-Seek</h5>
|
<h5>
|
||||||
<a href="#">Activity Cards</a>
|
<FormattedMessage
|
||||||
<a href="#">Facilitator Guide</a>
|
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>
|
</div>
|
||||||
|
|
||||||
<div className="resource">
|
<div className="resource">
|
||||||
<img src="/svgs/tips-card.svg" />
|
<img src="/svgs/tips-card.svg" />
|
||||||
<div className="resource-info">
|
<div className="resource-info">
|
||||||
<h5>Dance, Dance, Dance</h5>
|
<h5>
|
||||||
<a href="#">Activity Cards</a>
|
<FormattedMessage
|
||||||
<a href="#">Facilitator Guide</a>
|
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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="two-up">
|
<section className="two-up">
|
||||||
<div className="column">
|
<div className="column">
|
||||||
<h3>Tips Window</h3>
|
<h3>
|
||||||
|
<FormattedMessage
|
||||||
|
id='hoc.helpScratch'
|
||||||
|
defaultMessage={'Help with Scratch'} />
|
||||||
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
Need help getting started? Looking for ideas?
|
<FormattedHTMLMessage
|
||||||
You can find tutorials and helpful hints in the
|
id='hoc.helpScratchDescription'
|
||||||
<br />
|
defaultMessage={
|
||||||
<a href="/projects/editor/?tip_bar=home">Tips Window</a>
|
'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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="column">
|
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
@ -131,10 +361,21 @@ var Hoc = React.createClass({
|
||||||
<section className="one-up">
|
<section className="one-up">
|
||||||
<h3>Collaborators</h3>
|
<h3>Collaborators</h3>
|
||||||
<div className="logos">
|
<div className="logos">
|
||||||
<img src="/images/code-org-logo.png" />
|
<a href="http://scratched.gse.harvard.edu/">
|
||||||
<img src="/images/cn-logo.png" />
|
<img src="/images/hoc2015/scratchEd-logo.png" />
|
||||||
<img src="/images/paa-logo.png" />
|
</a>
|
||||||
<img src="/images/pocketcode-logo.png" />
|
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
@import "../../colors";
|
@import "../../colors";
|
||||||
|
@import "../../frameless";
|
||||||
|
|
||||||
$base-bg: $ui-white;
|
$base-bg: $ui-white;
|
||||||
|
|
||||||
|
|
@ -6,73 +7,67 @@ $base-bg: $ui-white;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
// To be integrated into the Global Typography standards
|
// To be integrated into the Global Typography standards
|
||||||
|
h3,
|
||||||
|
p {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 2em;
|
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 {
|
.top-banner {
|
||||||
transition: background-image .5s ease, background-color .5s ease;
|
transition: background-image .5s ease, background-color .5s ease;
|
||||||
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
|
|
||||||
background-color: $ui-aqua;
|
background-color: $ui-aqua;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
padding: 20px 0;
|
||||||
padding: 10px 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&.wbb-bg {
|
&.wbb-bg {
|
||||||
background-image: url("/images/hide-bg.jpg");
|
background-image: url("/images/hoc2015/hide-bg.jpg");
|
||||||
}
|
}
|
||||||
|
|
||||||
&.dance-bg {
|
&.dance-bg {
|
||||||
background-image: url("/images/dance-bg.jpg");
|
background-image: url("/images/hoc2015/dance-bg.jpg");
|
||||||
}
|
}
|
||||||
|
|
||||||
&.name-bg {
|
&.name-bg {
|
||||||
background-image: url("/images/name-bg.jpg");
|
background-image: url("/images/hoc2015/name-bg.jpg");
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
p {
|
p {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-top: 10px;
|
padding: 5px 0;
|
||||||
|
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $type-white;
|
color: $type-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-deck,
|
section {
|
||||||
.sub-nav {
|
border: 0;
|
||||||
display: flex;
|
padding: 10px 0;
|
||||||
margin: 20px auto;
|
max-width: $desktop;
|
||||||
|
|
||||||
width: 80%;
|
.card-deck {
|
||||||
max-width: 960px;
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
justify-content: center;
|
//6 columns
|
||||||
flex-wrap: wrap;
|
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||||
|
max-width: $mobile;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-deck {
|
.card-deck {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
display: inline-block;
|
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
background-color: $active-gray;
|
background-color: $active-gray;
|
||||||
|
|
@ -82,11 +77,13 @@ $base-bg: $ui-white;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
max-width: 230px;
|
max-width: 230px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.card-info {
|
.card-info {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
background-color: $base-bg;
|
background-color: $base-bg;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
|
@ -105,48 +102,17 @@ $base-bg: $ui-white;
|
||||||
margin: 0 10px 10px 10px;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -154,46 +120,51 @@ $base-bg: $ui-white;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border-bottom: 1px solid $ui-border;
|
border-bottom: 1px solid $ui-border;
|
||||||
padding: 30px 0;
|
padding: 50px 0;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 10px auto 20px;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3,
|
&.one-up {
|
||||||
p {
|
text-align: center;
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos {
|
.column {
|
||||||
margin: 10px 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
img {
|
|
||||||
margin: 0 20px;
|
|
||||||
max-width: 200px;
|
|
||||||
max-height: 75px;
|
|
||||||
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource {
|
&.two-up {
|
||||||
display: flex;
|
.column {
|
||||||
margin: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
padding: 10px 15px;
|
|
||||||
width: 30%;
|
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
max-width: 230px;
|
max-width: 40%;
|
||||||
text-align: left;
|
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;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
@ -206,6 +177,22 @@ $base-bg: $ui-white;
|
||||||
font-weight: 500;
|
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 {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
|
|
@ -213,33 +200,54 @@ $base-bg: $ui-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.one-up {
|
.studio {
|
||||||
text-align: center;
|
width: 50%;
|
||||||
|
|
||||||
.column {
|
a {
|
||||||
margin: 10px;
|
white-space: normal;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
h5 {
|
||||||
display: block;
|
width: 200px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.two-up {
|
|
||||||
|
|
||||||
.column {
|
|
||||||
margin: 10px;
|
|
||||||
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 40%;
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 5px;
|
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%;
|
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