mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-26 00:58:14 -05:00
Update HOC page with new mobile, styling & content
Mobile styling is from the frameless framework from #198 (ht @rthorn!). Localization also in as well. Use `white-space: normal` instead of `inline-block` Prep for componetizing Sub-Nav - Fixed top banner extra margin - Updated HTML containers and SCSS Add subnavigation component Added more content - More projects (still need photos) - Added section about Studios (need to create links to studios) WIP: adding frameless to HOC page Remove Grid elements on Sections Made the implmentation more granular with breakpoints in mind. More formatting adjustments Cards in box now working. Update responsive behavior and spacing Updated all elements to respond to new grid system breakpoints. Update content and organize HOC assets - Added studios section with studio elements - Reorganized the image assets for HOC 2015 Fix SCSS linting errors Update addtional activities photo assets Generalize `info` class on subnav Move onto one line left-align single-column studio links Add strings for localization Some rebase conflicts Code review feedback ht @thisandagain! Fix alignment of studios Keep `inline-block` for mobile
This commit is contained in:
Matthew Taylor
parent
b4e7eaa94e
commit
ad8d32474f
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