mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-22 19:05:56 -04:00
Change bearstack/bball to hide and dance
Also make updates to style scoping based on feedback from @rschamp
This commit is contained in:
Matthew Taylor
parent
f4b0b26b5c
commit
cd6a60e5b8
7 changed files with 220 additions and 240 deletions
src/views/hoc
static/images/hoc
|
|
@ -36,42 +36,42 @@ var Hoc = React.createClass({
|
|||
<FormattedMessage id='hoc.subTitle' />
|
||||
</p>
|
||||
|
||||
<section className="section title-banner-section">
|
||||
<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, 'name-bg')}>
|
||||
<img className="img 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="card-info">
|
||||
<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, 'wbb-bg')}>
|
||||
<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="img card-info"
|
||||
<img className="flex-row-card-info-img"
|
||||
src="/images/hoc/make-it-fly-tutorial.png"
|
||||
alt="" />
|
||||
<Button className="card-info">
|
||||
<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, 'dance-bg')}>
|
||||
<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="img card-info"
|
||||
<img className="flex-row-card-info-img"
|
||||
src="/images/hoc/make-music-tutorial.png"
|
||||
alt="" />
|
||||
<Button className="card-info">
|
||||
<Button className="flex-row-card-info-button">
|
||||
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -106,8 +106,8 @@ var Hoc = React.createClass({
|
|||
|
||||
<div className="inner">
|
||||
<Box title={''}>
|
||||
<section id="teacher" className="section">
|
||||
<div className="section-column">
|
||||
<section id="teacher" className="hoc-section">
|
||||
<div className="hoc-section-column">
|
||||
<h3>
|
||||
<FormattedMessage id='hoc.activityCardsHeader' />
|
||||
</h3>
|
||||
|
|
@ -116,19 +116,19 @@ var Hoc = React.createClass({
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div className="resource">
|
||||
<img className="img mod-resource"
|
||||
<div className="hoc-section-resource">
|
||||
<img className="hoc-section-resource-img"
|
||||
src="/svgs/tips-card.svg"
|
||||
alt="" />
|
||||
<div className="resource-info">
|
||||
<h5 className="resource-info-header">
|
||||
<div className="hoc-section-resource-info">
|
||||
<h5 className="hoc-section-resource-info-header">
|
||||
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
|
||||
</h5>
|
||||
<a className="resource-anchor"
|
||||
<a className="hoc-section-resource-anchor"
|
||||
href="/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf">
|
||||
<FormattedMessage id='hoc.activityCards' />
|
||||
</a>
|
||||
<a className="resource-anchor"
|
||||
<a className="hoc-section-resource-anchor"
|
||||
href="/scratchr2/static/pdfs/help/AnimateYourNameGuide.pdf">
|
||||
<FormattedMessage id='hoc.facilitatorGuide' />
|
||||
</a>
|
||||
|
|
@ -136,28 +136,28 @@ var Hoc = React.createClass({
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="section-column mod-split">
|
||||
<section className="hoc-section">
|
||||
<div className="hoc-section-column mod-split">
|
||||
<h3>
|
||||
<FormattedMessage id='hoc.helpScratch' />
|
||||
</h3>
|
||||
<p className="section-paragraph">
|
||||
<p className="hoc-section-paragraph">
|
||||
<FormattedHTMLMessage id='hoc.helpScratchDescription' />
|
||||
</p>
|
||||
</div>
|
||||
<div className="section-column mod-split">
|
||||
<img className="img mod-border"
|
||||
<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="section">
|
||||
<div className="section-column">
|
||||
<section className="hoc-section">
|
||||
<div className="hoc-section-column">
|
||||
<h3>
|
||||
<FormattedMessage id='hoc.moreActivities' />
|
||||
</h3>
|
||||
<p className="section-paragraph">
|
||||
<p className="hoc-section-paragraph">
|
||||
<FormattedHTMLMessage id='hoc.moreDescription' />
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -166,7 +166,7 @@ var Hoc = React.createClass({
|
|||
<div className="flex-row-card">
|
||||
<a href="/projects/editor/?tip_bar=getStarted">
|
||||
<div className="flex-row-card-info">
|
||||
<img className="img card-info"
|
||||
<img className="flex-row-card-info-img"
|
||||
src="/images/hoc/getting-started-tutorial.jpg" alt="" />
|
||||
<Button>
|
||||
<FormattedMessage id='hoc.tipsGetStarted' />
|
||||
|
|
@ -176,26 +176,26 @@ var Hoc = React.createClass({
|
|||
</div>
|
||||
|
||||
<div className="flex-row-card">
|
||||
<a href="/bearstack/">
|
||||
<a href="/hide/">
|
||||
<div className="flex-row-card-info">
|
||||
<img className="img card-info"
|
||||
src="/images/hoc/bearstack-tutorial.jpg"
|
||||
<img className="flex-row-card-info-img"
|
||||
src="/images/hoc/hide-seek-tutorial.jpg"
|
||||
alt="" />
|
||||
<Button>
|
||||
<FormattedMessage id='hoc.tipsBearstack' />
|
||||
<FormattedMessage id='hoc.tipsHideAndSeekTitle' />
|
||||
</Button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex-row-card">
|
||||
<a href="/hoops">
|
||||
<a href="//projects/editor/?tip_bar=dance">
|
||||
<div className="flex-row-card-info">
|
||||
<img className="img card-info"
|
||||
src="/images/hoc/bball-tutorial.jpg"
|
||||
<img className="flex-row-card-info-img"
|
||||
src="/images/hoc/dance-tutorial.jpg"
|
||||
alt="" />
|
||||
<Button>
|
||||
<FormattedMessage id='hoc.tipsBBallHoops' />
|
||||
<FormattedMessage id='hoc.tipsDanceTitle' />
|
||||
</Button>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -203,24 +203,24 @@ var Hoc = React.createClass({
|
|||
</FlexRow>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="section-column">
|
||||
<section className="hoc-section">
|
||||
<div className="hoc-section-column">
|
||||
<h3>
|
||||
<FormattedMessage id='hoc.addToStudios' />
|
||||
</h3>
|
||||
<p className="section-paragraph">
|
||||
<p className="hoc-section-paragraph">
|
||||
<FormattedHTMLMessage id='hoc.addToStudiosDescription' />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FlexRow>
|
||||
<div className="studio">
|
||||
<img className="img mod-studio"
|
||||
<div className="hoc-section-studio">
|
||||
<img className="hoc-section-studio-img"
|
||||
src="/svgs/studio.svg"
|
||||
alt="" />
|
||||
<div className="studio-info">
|
||||
<div className="hoc-section-studio-info">
|
||||
<a href="/studios/432299/">
|
||||
<h5 className="studio-info-header">
|
||||
<h5 className="hoc-section-studio-info-header">
|
||||
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
|
||||
</h5>
|
||||
</a>
|
||||
|
|
@ -228,13 +228,13 @@ var Hoc = React.createClass({
|
|||
</div>
|
||||
|
||||
|
||||
<div className="studio">
|
||||
<img className="img mod-studio"
|
||||
<div className="hoc-section-studio">
|
||||
<img className="hoc-section-studio-img"
|
||||
src="/svgs/studio.svg"
|
||||
alt="" />
|
||||
<div className="studio-info">
|
||||
<div className="hoc-section-studio-info">
|
||||
<a href="/studios/1672166/">
|
||||
<h5 className="studio-info-header">
|
||||
<h5 className="hoc-section-studio-info-header">
|
||||
<FormattedMessage id='hoc.studioWeBareBears' />
|
||||
</h5>
|
||||
</a>
|
||||
|
|
@ -243,26 +243,26 @@ var Hoc = React.createClass({
|
|||
</FlexRow>
|
||||
|
||||
<FlexRow>
|
||||
<div className="studio">
|
||||
<img className="img mod-studio"
|
||||
<div className="hoc-section-studio">
|
||||
<img className="hoc-section-studio-img"
|
||||
src="/svgs/studio.svg"
|
||||
alt="" />
|
||||
<div className="studio-info">
|
||||
<div className="hoc-section-studio-info">
|
||||
<a href="/studios/1999784/">
|
||||
<h5 className="studio-info-header">
|
||||
<h5 className="hoc-section-studio-info-header">
|
||||
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="studio">
|
||||
<img className="img mod-studio"
|
||||
<div className="hoc-section-studio">
|
||||
<img className="hoc-section-studio-img"
|
||||
src="/svgs/studio.svg"
|
||||
alt="" />
|
||||
<div className="studio-info">
|
||||
<div className="hoc-section-studio-info">
|
||||
<a href="/studios/1672164/">
|
||||
<h5 className="studio-info-header">
|
||||
<h5 className="hoc-section-studio-info-header">
|
||||
<FormattedMessage id='hoc.studioAlice' />
|
||||
</h5>
|
||||
</a>
|
||||
|
|
@ -272,47 +272,47 @@ var Hoc = React.createClass({
|
|||
</section>
|
||||
</Box>
|
||||
|
||||
<section className="section">
|
||||
<section className="hoc-section">
|
||||
<h3>
|
||||
<FormattedMessage
|
||||
id='general.collaborators'
|
||||
defaultMessage={'Collaborators'} />
|
||||
</h3>
|
||||
<div className="logos">
|
||||
<div className="hoc-section-logos">
|
||||
<a href="http://scratched.gse.harvard.edu/">
|
||||
<img className="img mod-logo"
|
||||
<img className="hoc-section-logos-img"
|
||||
src="/images/hoc/scratchEd-logo.png"
|
||||
alt="ScratchEd" />
|
||||
</a>
|
||||
<a href="https://code.org/">
|
||||
<img className="img mod-logo"
|
||||
<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="img mod-logo"
|
||||
<img className="hoc-section-logos-img"
|
||||
src="/images/hoc/cn-logo.png"
|
||||
alt="Cartoon Network" />
|
||||
</a>
|
||||
<a href="http://www.madewithcode.com/">
|
||||
<img className="img mod-logo"
|
||||
<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="img mod-logo"
|
||||
<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="img mod-logo"
|
||||
<img className="hoc-section-logos-img"
|
||||
src="/images/hoc/pocketcode-logo.png"
|
||||
alt="Pocket Code" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="trademark">
|
||||
<p className="section-paragraph legal">
|
||||
<div className="hoc-section-trademark">
|
||||
<p className="hoc-section-paragraph legal">
|
||||
<FormattedHTMLMessage id='hoc.officialNotice' />
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,225 +7,205 @@ $base-bg: $ui-white;
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.hoc {
|
||||
.img,
|
||||
.button {
|
||||
&.card-info {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
.hoc-section {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid $ui-border;
|
||||
padding: 50px 0;
|
||||
width: 95%;
|
||||
text-align: center;
|
||||
|
||||
.img {
|
||||
&.card-info {
|
||||
margin: 10px 10px 5px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.mod-border {
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
.hoc-section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&.mod-resource,
|
||||
&.mod-studio {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.hoc-section.mod-title-banner {
|
||||
border: 0;
|
||||
padding: 10px 0;
|
||||
max-width: $desktop;
|
||||
}
|
||||
|
||||
&.mod-studio {
|
||||
float: left;
|
||||
}
|
||||
.hoc-section-column {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.mod-logo {
|
||||
margin: 20px;
|
||||
max-width: 150px;
|
||||
max-height: 55px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.hoc-section-column.mod-split {
|
||||
min-width: 200px;
|
||||
max-width: 40%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.button {
|
||||
&.card-info {
|
||||
margin: 0 10px 10px 10px;
|
||||
}
|
||||
}
|
||||
.hoc-section-column-img {
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid $ui-border;
|
||||
padding: 50px 0;
|
||||
width: 95%;
|
||||
text-align: center;
|
||||
.hoc-section-paragraph {
|
||||
margin: 10px auto 20px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.title-banner.mod-wbb-bg {
|
||||
background-image: url("/images/hoc2015/hide-bg.jpg");
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.title-banner.mod-dance-bg {
|
||||
background-image: url("/images/hoc2015/dance-bg.jpg");
|
||||
}
|
||||
|
||||
&.title-banner-section {
|
||||
border: 0;
|
||||
padding: 10px 0;
|
||||
max-width: $desktop;
|
||||
}
|
||||
}
|
||||
.title-banner.mod-name-bg {
|
||||
background-image: url("/images/hoc2015/name-bg.jpg");
|
||||
}
|
||||
|
||||
.section-column {
|
||||
width: 100%;
|
||||
.flex-row-card {
|
||||
margin: 10px;
|
||||
border-radius: 7px;
|
||||
background-color: $active-gray;
|
||||
padding: 2px;
|
||||
|
||||
&.mod-split {
|
||||
min-width: 200px;
|
||||
max-width: 40%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
width: 30%;
|
||||
min-width: 200px;
|
||||
max-width: 230px;
|
||||
}
|
||||
|
||||
.section-paragraph {
|
||||
margin: 10px auto 20px;
|
||||
max-width: 600px;
|
||||
}
|
||||
.flex-row-card-info {
|
||||
border-radius: 5px;
|
||||
background-color: $base-bg;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title-banner {
|
||||
&.wbb-bg {
|
||||
background-image: url("/images/hoc2015/hide-bg.jpg");
|
||||
}
|
||||
.flex-row-card-info-img,
|
||||
.button.flex-row-card-info-button {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
&.dance-bg {
|
||||
background-image: url("/images/hoc2015/dance-bg.jpg");
|
||||
}
|
||||
.flex-row-card-info-img {
|
||||
margin: 10px 10px 5px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&.name-bg {
|
||||
background-image: url("/images/hoc2015/name-bg.jpg");
|
||||
}
|
||||
}
|
||||
.button.flex-row-card-info-button {
|
||||
margin: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
.flex-row-card {
|
||||
margin: 10px;
|
||||
border-radius: 7px;
|
||||
background-color: $active-gray;
|
||||
padding: 2px;
|
||||
.hoc-section-resource,
|
||||
.hoc-section-studio {
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
min-width: 200px;
|
||||
|
||||
width: 30%;
|
||||
min-width: 200px;
|
||||
max-width: 230px;
|
||||
}
|
||||
text-align: left;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-row-card-info {
|
||||
border-radius: 5px;
|
||||
background-color: $base-bg;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.hoc-section-resource-img,
|
||||
.hoc-section-studio-img {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.resource,
|
||||
.studio {
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
min-width: 200px;
|
||||
.hoc-section-resource {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
text-align: left;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hoc-section-resource-anchor {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.resource {
|
||||
width: 33%;
|
||||
}
|
||||
.hoc-section-resource-info-header {
|
||||
margin: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.resource-anchor {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
font-size: .8em;
|
||||
}
|
||||
.hoc-section-studio {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.resource-info-header {
|
||||
margin: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
.hoc-section-studio-img {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.studio {
|
||||
width: 50%;
|
||||
}
|
||||
.hoc-section-studio-info-header {
|
||||
margin: 8px 0;
|
||||
width: 200px;
|
||||
color: $ui-blue;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.studio-info-header {
|
||||
margin: 8px 0;
|
||||
width: 200px;
|
||||
color: $ui-blue;
|
||||
font-weight: 500;
|
||||
.hoc-section-studio-info-header:hover {
|
||||
color: darken($ui-blue, 15);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: darken($ui-blue, 15);
|
||||
}
|
||||
}
|
||||
.hoc-section-logos {
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logos {
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
.hoc-section-logos-img {
|
||||
margin: 20px;
|
||||
max-width: 150px;
|
||||
max-height: 55px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.trademark {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.hoc-section-trademark {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.hoc {
|
||||
.studio {
|
||||
display: inline-block;
|
||||
}
|
||||
.hoc-section-studio {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
.hoc {
|
||||
.title-banner-section {
|
||||
max-width: $mobile;
|
||||
}
|
||||
.hoc-section.mod-title-banner {
|
||||
max-width: $mobile;
|
||||
}
|
||||
|
||||
.studio {
|
||||
display: inline-block;
|
||||
}
|
||||
.hoc-section-studio {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
//8 columns
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
.hoc {
|
||||
.img {
|
||||
&.mod-resource,
|
||||
&.mod-studio {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.flex-row-card {
|
||||
margin: 2px;
|
||||
min-width: 175px;
|
||||
}
|
||||
|
||||
&.mod-studio {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
.button.flex-row-card-info-button {
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
.button {
|
||||
&.card-info {
|
||||
font-size: .7em;
|
||||
}
|
||||
}
|
||||
.hoc-section-resource,
|
||||
.hoc-section-studio {
|
||||
display: block;
|
||||
width: 30%;
|
||||
min-width: 180px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-row-card {
|
||||
margin: 2px;
|
||||
min-width: 175px;
|
||||
}
|
||||
.hoc-section-resource-img,
|
||||
.hoc-section-studio-img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.resource,
|
||||
.studio {
|
||||
display: block;
|
||||
width: 30%;
|
||||
min-width: 180px;
|
||||
text-align: center;
|
||||
}
|
||||
.hoc-section-studio-img {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.studio-info-header {
|
||||
width: 100%;
|
||||
}
|
||||
.hoc-section-studio-info-header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@
|
|||
"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.tipsBearstack": "Bearstack Story",
|
||||
"hoc.tipsMakeMusicTitle": "Make Music",
|
||||
"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",
|
||||
"hoc.tipsBBallHoops": "B-Ball Hoops"
|
||||
"hoc.tipsPongGame": "Create a Pong Game"
|
||||
}
|
||||
Binary file not shown.
|
Before 
(image error) Size: 26 KiB |
Binary file not shown.
|
Before 
(image error) Size: 20 KiB |
BIN
static/images/hoc/dance-tutorial.jpg
Normal file
BIN
static/images/hoc/dance-tutorial.jpg
Normal file
Binary file not shown.
|
After 
(image error) Size: 28 KiB |
BIN
static/images/hoc/hide-seek-tutorial.jpg
Normal file
BIN
static/images/hoc/hide-seek-tutorial.jpg
Normal file
Binary file not shown.
|
After 
(image error) Size: 41 KiB |
Loading…
Reference in a new issue