Skip to content

GitLab

S
scratch-www
Commit cd6a60e5 authored by Matthew Taylor's avatar Matthew Taylor
Browse files
Options

Change bearstack/bball to hide and dance 

Also make updates to style scoping based on feedback from @rschamp
parent f4b0b26b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 230 additions and 250 deletions
src/views/hoc/hoc.jsx
View file @ cd6a60e5
This diff is collapsed.
src/views/hoc/hoc.scss
View file @ cd6a60e5
...@@ -7,225 +7,205 @@ $base-bg: $ui-white; ...@@ -7,225 +7,205 @@ $base-bg: $ui-white;
padding: 0; padding: 0;
} }
.hoc { .hoc-section {
.img, display: flex;
.button { margin: 0 auto;
&.card-info { border-bottom: 1px solid $ui-border;
width: calc(100% - 20px); padding: 50px 0;
} width: 95%;
} text-align: center;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.img { .hoc-section:last-child {
&.card-info { border-bottom: 0;
margin: 10px 10px 5px 10px; }
border-radius: 5px;
}
&.mod-border {
border-radius: 5px;
width: 100%;
}
&.mod-resource,
&.mod-studio {
margin-right: 15px;
}
&.mod-studio {
float: left;
}
&.mod-logo {
margin: 20px;
max-width: 150px;
max-height: 55px;
vertical-align: middle;
}
}
.button { .hoc-section.mod-title-banner {
&.card-info { border: 0;
margin: 0 10px 10px 10px; padding: 10px 0;
} max-width: $desktop;
} }
.section { .hoc-section-column {
display: flex; width: 100%;
margin: 0 auto; }
border-bottom: 1px solid $ui-border;
padding: 50px 0;
width: 95%;
text-align: center;
justify-content: center; .hoc-section-column.mod-split {
flex-wrap: wrap; min-width: 200px;
align-items: center; max-width: 40%;
text-align: left;
}
&:last-child { .hoc-section-column-img {
border-bottom: 0; border-radius: 5px;
} width: 100%;
}
&.title-banner-section { .hoc-section-paragraph {
border: 0; margin: 10px auto 20px;
padding: 10px 0; max-width: 600px;
max-width: $desktop; }
}
}
.section-column { .title-banner.mod-wbb-bg {
width: 100%; background-image: url("/images/hoc2015/hide-bg.jpg");
}
&.mod-split { .title-banner.mod-dance-bg {
min-width: 200px; background-image: url("/images/hoc2015/dance-bg.jpg");
max-width: 40%; }
text-align: left;
}
}
.section-paragraph { .title-banner.mod-name-bg {
margin: 10px auto 20px; background-image: url("/images/hoc2015/name-bg.jpg");
max-width: 600px; }
}
.title-banner { .flex-row-card {
&.wbb-bg { margin: 10px;
background-image: url("/images/hoc2015/hide-bg.jpg"); border-radius: 7px;
} background-color: $active-gray;
padding: 2px;
&.dance-bg { width: 30%;
background-image: url("/images/hoc2015/dance-bg.jpg"); min-width: 200px;
} max-width: 230px;
}
&.name-bg { .flex-row-card-info {
background-image: url("/images/hoc2015/name-bg.jpg"); border-radius: 5px;
} background-color: $base-bg;
} width: 100%;
height: 100%;
}
.flex-row-card { .flex-row-card-info-img,
margin: 10px; .button.flex-row-card-info-button {
border-radius: 7px; width: calc(100% - 20px);
background-color: $active-gray; }
padding: 2px;
width: 30%; .flex-row-card-info-img {
min-width: 200px; margin: 10px 10px 5px 10px;
max-width: 230px; border-radius: 5px;
} }
.flex-row-card-info { .button.flex-row-card-info-button {
border-radius: 5px; margin: 0 10px 10px 10px;
background-color: $base-bg; }
width: 100%;
height: 100%;
}
.resource, .hoc-section-resource,
.studio { .hoc-section-studio {
display: flex; display: flex;
margin: 10px 0; margin: 10px 0;
min-width: 200px; min-width: 200px;
text-align: left; text-align: left;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.resource { .hoc-section-resource-img,
width: 33%; .hoc-section-studio-img {
} margin-right: 15px;
}
.resource-anchor { .hoc-section-resource {
display: block; width: 33%;
margin: 5px 0; }
font-size: .8em;
}
.resource-info-header { .hoc-section-resource-anchor {
margin: 0; display: block;
line-height: inherit; margin: 5px 0;
} font-size: .8em;
}
.studio { .hoc-section-resource-info-header {
width: 50%; margin: 0;
} line-height: inherit;
}
.studio-info-header { .hoc-section-studio {
margin: 8px 0; width: 50%;
width: 200px; }
color: $ui-blue;
font-weight: 500;
&:hover { .hoc-section-studio-img {
color: darken($ui-blue, 15); float: left;
} }
}
.logos { .hoc-section-studio-info-header {
margin: 20px 0; margin: 8px 0;
width: 100%; width: 200px;
} color: $ui-blue;
font-weight: 500;
}
.trademark { .hoc-section-studio-info-header:hover {
margin-top: 20px; color: darken($ui-blue, 15);
} }
.hoc-section-logos {
margin: 20px 0;
width: 100%;
}
.hoc-section-logos-img {
margin: 20px;
max-width: 150px;
max-height: 55px;
vertical-align: middle;
}
.hoc-section-trademark {
margin-top: 20px;
} }
@media only screen and (max-width: $mobile - 1) { @media only screen and (max-width: $mobile - 1) {
.hoc { .hoc-section-studio {
.studio { display: inline-block;
display: inline-block;
}
} }
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.hoc { .hoc-section.mod-title-banner {
.title-banner-section { max-width: $mobile;
max-width: $mobile; }
}
.hoc-section-studio {
.studio { display: inline-block;
display: inline-block;
}
} }
} }
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
.hoc { .flex-row-card {
.img { margin: 2px;
&.mod-resource, min-width: 175px;
&.mod-studio { }
margin: 0 auto;
} .button.flex-row-card-info-button {
font-size: .7em;
&.mod-studio { }
float: none;
} .hoc-section-resource,
} .hoc-section-studio {
display: block;
.button { width: 30%;
&.card-info { min-width: 180px;
font-size: .7em; text-align: center;
} }
}
.hoc-section-resource-img,
.flex-row-card { .hoc-section-studio-img {
margin: 2px; margin: 0 auto;
min-width: 175px; }
}
.hoc-section-studio-img {
.resource, float: none;
.studio { }
display: block;
width: 30%; .hoc-section-studio-info-header {
min-width: 180px; width: 100%;
text-align: center;
}
.studio-info-header {
width: 100%;
}
} }
} }
src/views/hoc/l10n.json
View file @ cd6a60e5
...@@ -17,10 +17,10 @@ ...@@ -17,10 +17,10 @@
"hoc.tipsDescription": "Need help getting started? Looking for ideas?&nbsp; You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>", "hoc.tipsDescription": "Need help getting started? Looking for ideas?&nbsp; 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.title": "Get Creative with Coding",
"hoc.tipsAnimateYourNameTitle": "Animate Your Name", "hoc.tipsAnimateYourNameTitle": "Animate Your Name",
"hoc.tipsBearstack": "Bearstack Story", "hoc.tipsDanceTitle": "Dance, Dance, Dance",
"hoc.tipsMakeMusicTitle": "Make Music",
"hoc.tipsGetStarted": "Getting Started", "hoc.tipsGetStarted": "Getting Started",
"hoc.tipsHideAndSeekTitle": "Hide-and-Seek Game",
"hoc.tipsMakeMusicTitle": "Make Music",
"hoc.tipsMakeItFlyTitle": "Make it Fly", "hoc.tipsMakeItFlyTitle": "Make it Fly",
"hoc.tipsPongGame": "Create a Pong Game", "hoc.tipsPongGame": "Create a Pong Game"
"hoc.tipsBBallHoops": "B-Ball Hoops"
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment