diff --git a/src/components/intro/intro.jsx b/src/components/intro/intro.jsx index 965978e53..0dd57a8ca 100644 --- a/src/components/intro/intro.jsx +++ b/src/components/intro/intro.jsx @@ -2,7 +2,7 @@ var connect = require('react-redux').connect; var omit = require('lodash.omit'); var React = require('react'); -var actions = require('../../redux/actions.js'); +var actions = require('../../redux/auth.js'); var Modal = require('../modal/modal.jsx'); var Registration = require('../registration/registration.jsx'); diff --git a/src/components/intro/intro.scss b/src/components/intro/intro.scss index fdcb03fa1..7d4be04ac 100644 --- a/src/components/intro/intro.scss +++ b/src/components/intro/intro.scss @@ -1,12 +1,5 @@ @import "../../colors"; -h1 { - line-height: 2.125rem; - color: $ui-orange; - font-size: 1.625rem; - font-weight: 400; -} - .intro { display: flex; margin-top: 20px; @@ -16,6 +9,13 @@ h1 { justify-content: space-between; align-content: flex-start; + h1 { + line-height: 2.125rem; + color: $ui-orange; + font-size: 1.625rem; + font-weight: 400; + } + .content { display: inline-block; width: calc(66% - 30px); diff --git a/src/components/microworld/microworld.jsx b/src/components/microworld/microworld.jsx index 860694a41..e9d08337c 100644 --- a/src/components/microworld/microworld.jsx +++ b/src/components/microworld/microworld.jsx @@ -223,7 +223,7 @@ var Microworld = React.createClass({ }, render: function () { return ( -
+

{this.props.microworldData.title}

{this.props.microworldData.description.join(' ')}

diff --git a/src/components/microworld/microworld.scss b/src/components/microworld/microworld.scss index fdda3ea19..c786e35e3 100644 --- a/src/components/microworld/microworld.scss +++ b/src/components/microworld/microworld.scss @@ -3,181 +3,167 @@ $base-bg: $ui-white; -background-color: $base-bg; -padding: 0; - -// To be integrated into the Global Typography standards -h3, -p { - font-weight: 300; - +#view { + background-color: $base-bg; + padding: 0; } -p { - line-height: 2em; -} +.microworld { + .top-banner, + .videos-section, + .section { + padding: 30px 0; + width: 100%; -h1 { - margin: 0 auto; - padding: 5px 10%; - text-align: center; - color: $type-gray; -} - -.top-banner, -.videos-section, -.section { - padding: 30px 0; - width: 100%; - - h1, - p { - margin: 0 auto; - padding: 5px 10%; - text-align: center; - color: $type-gray; + h1, + p { + margin: 0 auto; + padding: 5px 10%; + text-align: center; + color: $type-gray; + } } -} -.videos-container { - display: flex; - margin: 0 auto; + .videos-container { + display: flex; + margin: 0 auto; - justify-content: center; - flex-wrap: wrap; - align-items: center; - - .videos { - display: inline-flex; justify-content: center; flex-wrap: wrap; - } + align-items: center; - .video { - position: relative; - margin: 10px; - border-radius: 7px; - background-color: $active-gray; - padding: 2px; - max-width: 290px; - } - - img { - margin: 10px 10px 5px; - border-radius: 5px; - width: calc(100% - 20px); - height: 179px; - } - - .play-button { - display: block; - top: calc(50% - 25px); - left: calc(50% - 35px); - opacity: .8; - border: 5px solid $ui-border; - border-radius: 20px; - background-color: $type-gray; - width: 70px; - height: 50px; - - &, - &:after { - position: absolute; - margin: 0; - cursor: pointer; - padding: 0; + .videos { + display: inline-flex; + justify-content: center; + flex-wrap: wrap; } - &:after { - $play-arrow: rgba(255, 255, 255, 0); - top: 37px; - left: 28px; - margin-top: -30px; - border: solid transparent; - border-width: 18px; - border-color: $play-arrow; - border-left-color: $ui-white; - width: 0; - height: 0; - content: " "; - pointer-events: none; + .video { + position: relative; + margin: 10px; + border-radius: 7px; + background-color: $active-gray; + padding: 2px; + max-width: 290px; + } + + img { + margin: 10px 10px 5px; + border-radius: 5px; + width: calc(100% - 20px); + height: 179px; + } + + .play-button { + display: block; + top: calc(50% - 25px); + left: calc(50% - 35px); + opacity: .8; + border: 5px solid $ui-border; + border-radius: 20px; + background-color: $type-gray; + width: 70px; + height: 50px; + + &, + &:after { + position: absolute; + margin: 0; + cursor: pointer; + padding: 0; + } + + &:after { + $play-arrow: rgba(255, 255, 255, 0); + top: 37px; + left: 28px; + margin-top: -30px; + border: solid transparent; + border-width: 18px; + border-color: $play-arrow; + border-left-color: $ui-white; + width: 0; + height: 0; + content: " "; + pointer-events: none; + } } } -} -.content { - img { - display: block; - margin-right: auto; - margin-left: auto; - } - - .box, - iframe { - display: block; - margin-right: auto; - margin-left: auto; - border: 0; - padding-top: 25px; - padding-bottom: 15px; - } - - iframe { - height: 600px; - } - - .editor { - position: relative; + .content { + img { + display: block; + margin-right: auto; + margin-left: auto; + } + .box, iframe { - width: 100%; - } - - .scratch-link { - position: absolute; - right: 3%; - width: 10%; - } - } - - .side-by-side { - margin-right: auto; - margin-left: auto; - - height: 520px; - - .design-studio-projects, - .design-studio { - display: inline-block; - width: 45%; - height: 500px; + display: block; + margin-right: auto; + margin-left: auto; + border: 0; + padding-top: 25px; + padding-bottom: 15px; } - .design-studio-projects { - float: right; + iframe { + height: 600px; } - .design-studio { - float: left; + .editor { + position: relative; iframe { - margin-top: 60px; - width: 200%; - -webkit-transform: scale(.5); - -webkit-transform-origin: top left; - -moz-transform: scale(.5); + width: 100%; + } + + .scratch-link { + position: absolute; + right: 3%; + width: 10%; + } + } + + .side-by-side { + margin-right: auto; + margin-left: auto; + + height: 520px; + + .design-studio-projects, + .design-studio { + display: inline-block; + width: 45%; + height: 500px; + } + + .design-studio-projects { + float: right; + } + + .design-studio { + float: left; + + iframe { + margin-top: 60px; + width: 200%; + -webkit-transform: scale(.5); + -webkit-transform-origin: top left; + -moz-transform: scale(.5); + } + } + } + } + + .box-content { + .nestedcarousel { + text-align: center; + + .thumbnail { + display: inline-block; + margin: 0 50px; } } } } - -.box-content { - .nestedcarousel { - text-align: center; - - .thumbnail { - display: inline-block; - margin: 0 50px; - } - } -} diff --git a/src/views/about/about.jsx b/src/views/about/about.jsx index 94fb16bac..76c296514 100644 --- a/src/views/about/about.jsx +++ b/src/views/about/about.jsx @@ -11,7 +11,7 @@ var About = React.createClass({ type: 'About', render: function () { return ( -
+

diff --git a/src/views/about/about.scss b/src/views/about/about.scss index 955db9cfe..1ae2e7ce6 100644 --- a/src/views/about/about.scss +++ b/src/views/about/about.scss @@ -1,70 +1,72 @@ @import "../../colors"; -.masthead { - display: flex; - flex-wrap: no-wrap; - justify-content: space-between; - align-items: stretch; +.about { + .masthead { + display: flex; + flex-wrap: no-wrap; + justify-content: space-between; + align-items: stretch; - div { - display: inline-block; - width: calc(50% - 10px); + div { + display: inline-block; + width: calc(50% - 10px); + + ul { + margin: 0; + padding: 0; + list-style: none; + } + + li { + display: inline-block; + text-transform: uppercase; + + &:nth-child(odd) { + margin-right: 10px; + border-right: 1px solid $ui-gray; + padding-right: 10px; + } + } + + iframe { + border: 1px solid $ui-gray; + width: 460px; + height: 290px; + } + } + } + + .body { + position: relative; + margin: 20px 0 0; + border: 1px solid $ui-gray; + border-radius: 10px; + background: $ui-white; + padding: 26px 40px 6px; + width: calc(100% - 80px); ul { + display: flex; margin: 0; padding: 0; list-style: none; + justify-content: space-between; + flex-wrap: wrap; } li { display: inline-block; - text-transform: uppercase; - - &:nth-child(odd) { - margin-right: 10px; - border-right: 1px solid $ui-gray; - padding-right: 10px; - } + margin-bottom: 20px; + width: calc(384px + 5px + 5px); } + img, iframe { + display: block; border: 1px solid $ui-gray; - width: 460px; - height: 290px; + padding: 5px; + width: 396px; + height: 222px; } } } - -.body { - position: relative; - margin: 20px 0 0; - border: 1px solid $ui-gray; - border-radius: 10px; - background: $ui-white; - padding: 26px 40px 6px; - width: calc(100% - 80px); - - ul { - display: flex; - margin: 0; - padding: 0; - list-style: none; - justify-content: space-between; - flex-wrap: wrap; - } - - li { - display: inline-block; - margin-bottom: 20px; - width: calc(384px + 5px + 5px); - } - - img, - iframe { - display: block; - border: 1px solid $ui-gray; - padding: 5px; - width: 396px; - height: 222px; - } -} diff --git a/src/views/cards/cards.jsx b/src/views/cards/cards.jsx index 9a58afc73..177be0b2b 100644 --- a/src/views/cards/cards.jsx +++ b/src/views/cards/cards.jsx @@ -31,8 +31,8 @@ var Cards = injectIntl(React.createClass({ 'cards.hideLink': formatMessage({id: 'cards.hideLink'}) }; return ( -
-
+
+

diff --git a/src/views/cards/cards.scss b/src/views/cards/cards.scss index 5909edd54..6c023702b 100644 --- a/src/views/cards/cards.scss +++ b/src/views/cards/cards.scss @@ -1,55 +1,57 @@ @import "../../colors"; @import "../../frameless"; -// type-specific margins -h4 { - margin: 1.5em 0 .3em; -} - -h1 { - margin: .75em 0 .3em; -} - -p { - margin: .25em 0 1em; -} - .cards { - display: flex; - margin: 1em 0; - align-items: center; - justify-content: center; - - .intro-content { - float: left; - width: 45%; + // type-specific margins + h4 { + margin: 1.5em 0 .3em; } - img { - width: 45%; + h1 { + margin: .75em 0 .3em; } -} -.cards-container { - text-align: center; + p { + margin: .25em 0 1em; + } - .flex-row { - div { - padding: .5em; + .cards-intro { + display: flex; + margin: 1em 0; + align-items: center; + justify-content: center; - a { - display: block; + .intro-content { + float: left; + width: 45%; + } - .pdf-icon { - margin-right: .2em; - width: 1em; + img { + width: 45%; + } + } + + .cards-container { + text-align: center; + + .flex-row { + div { + padding: .5em; + + a { + display: block; + + .pdf-icon { + margin-right: .2em; + width: 1em; + } } } - } - @media only screen and (max-width: $desktop - 1) { - flex-direction: column; - justify-content: center; + @media only screen and (max-width: $desktop - 1) { + flex-direction: column; + justify-content: center; + } } - } +} } diff --git a/src/views/components/components.jsx b/src/views/components/components.jsx index 7c0e5b55e..145c01353 100644 --- a/src/views/components/components.jsx +++ b/src/views/components/components.jsx @@ -15,7 +15,7 @@ var Components = React.createClass({ type: 'Components', render: function () { return ( -
+

Button

Form

diff --git a/src/views/components/components.scss b/src/views/components/components.scss index 2c7ba06b5..1a2ecc7f9 100644 --- a/src/views/components/components.scss +++ b/src/views/components/components.scss @@ -1,3 +1,5 @@ -h1 { - margin: 0 0 10px 0; +.components { + h1 { + margin: 0 0 10px 0; + } } diff --git a/src/views/credits/credits.jsx b/src/views/credits/credits.jsx index 64c42389f..5aedf338e 100644 --- a/src/views/credits/credits.jsx +++ b/src/views/credits/credits.jsx @@ -9,7 +9,7 @@ var Credits = React.createClass({ type: 'Credits', render: function () { return ( -
+

Scratch Credits and Contributors

MIT Scratch Team

Scratch is designed and developed by the Lifelong Kindergarten Group at MIT Media Lab:

diff --git a/src/views/credits/credits.scss b/src/views/credits/credits.scss index c32d26844..2f0c33c98 100644 --- a/src/views/credits/credits.scss +++ b/src/views/credits/credits.scss @@ -1,36 +1,38 @@ @import "../../colors"; -p { - line-height: 1.5rem; +.credits { + p { + line-height: 1.5rem; - a { - word-wrap: break-word; /* Overrides: https://github.com/LLK/scratch-www/blob/develop/src/main.scss#L43-L47 */ - } -} - -ul { - display: flex; - margin: 0; - padding: 0; - list-style: none; - flex-wrap: wrap; -} - -li { - display: inline-block; - margin: 10px 0; - width: 188px; - text-align: center; - - img { - margin: 10px 23px; - border: 2px; - border-style: solid; - border-radius: 50%; - border-color: $ui-dark-gray; - background-color: $ui-white; - padding: 20px; - width: 85px; - height: 85px; + a { + word-wrap: break-word; /* Overrides: https://github.com/LLK/scratch-www/blob/develop/src/main.scss#L43-L47 */ + } + } + + ul { + display: flex; + margin: 0; + padding: 0; + list-style: none; + flex-wrap: wrap; + } + + li { + display: inline-block; + margin: 10px 0; + width: 188px; + text-align: center; + + img { + margin: 10px 23px; + border: 2px; + border-style: solid; + border-radius: 50%; + border-color: $ui-dark-gray; + background-color: $ui-white; + padding: 20px; + width: 85px; + height: 85px; + } } } diff --git a/src/views/dmca/dmca.jsx b/src/views/dmca/dmca.jsx index fcd7d9a1b..a9e156b20 100644 --- a/src/views/dmca/dmca.jsx +++ b/src/views/dmca/dmca.jsx @@ -8,7 +8,7 @@ var Dmca = React.createClass({ type: 'Dmca', render: function () { return ( -
+

diff --git a/src/views/guidelines/guidelines.jsx b/src/views/guidelines/guidelines.jsx index 7b581e233..5470148a7 100644 --- a/src/views/guidelines/guidelines.jsx +++ b/src/views/guidelines/guidelines.jsx @@ -11,7 +11,7 @@ var Guidelines = React.createClass({ type: 'Guidelines', render: function () { return ( -

+
}>

diff --git a/src/views/guidelines/guidelines.scss b/src/views/guidelines/guidelines.scss index 4beb65a03..57ef59b7d 100644 --- a/src/views/guidelines/guidelines.scss +++ b/src/views/guidelines/guidelines.scss @@ -1,12 +1,14 @@ @import "../../colors"; -.guidelines-footer { - margin-top: 1.5rem; - text-align: center; -} - -dl { - dt { +.guidelines { + .guidelines-footer { margin-top: 1.5rem; + text-align: center; + } + + dl { + dt { + margin-top: 1.5rem; + } } } diff --git a/src/views/hoc/hoc.jsx b/src/views/hoc/hoc.jsx index 5bea889e3..420e4c672 100644 --- a/src/views/hoc/hoc.jsx +++ b/src/views/hoc/hoc.jsx @@ -27,7 +27,7 @@ var Hoc = React.createClass({ }, render: function () { return ( -
+

- ); } }); diff --git a/src/views/hoc/hoc.scss b/src/views/hoc/hoc.scss index 7581c2d19..7ebd33be9 100644 --- a/src/views/hoc/hoc.scss +++ b/src/views/hoc/hoc.scss @@ -7,222 +7,224 @@ $base-bg: $ui-white; padding: 0; } -.title-banner { - &.wbb-bg { - background-image: url("/images/hoc2015/hide-bg.jpg"); +.hoc { + .title-banner { + &.wbb-bg { + background-image: url("/images/hoc2015/hide-bg.jpg"); + } + + &.dance-bg { + background-image: url("/images/hoc2015/dance-bg.jpg"); + } + + &.name-bg { + background-image: url("/images/hoc2015/name-bg.jpg"); + } + + 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; + } + } } - &.dance-bg { - background-image: url("/images/hoc2015/dance-bg.jpg"); - } + .flex-row { + .card { + margin: 10px; + border-radius: 7px; + background-color: $active-gray; + padding: 2px; + + width: 30%; + min-width: 200px; + max-width: 230px; - &.name-bg { - background-image: url("/images/hoc2015/name-bg.jpg"); + .card-info { + 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; + } + } + + //8 columns + @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { + margin: 2px; + min-width: 175px; + + button { + font-size: .7em; + } + } + + } } section { - border: 0; - padding: 10px 0; - max-width: $desktop; + display: flex; + margin: 0 auto; + border-bottom: 1px solid $ui-border; + padding: 50px 0; + width: 95%; - .card-deck { - padding: 0 20px; + justify-content: center; + flex-wrap: wrap; + align-items: center; + + p { + margin: 10px auto 20px; + max-width: 600px; } - //6 columns - @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { - max-width: $mobile; + &:last-child { + border-bottom: 0; + } + + &.one-up { + text-align: center; + + .column { + width: 100%; + } + } + + &.two-up { + .column { + min-width: 200px; + max-width: 40%; + text-align: left; + + img { + border-radius: 5px; + width: 100%; + } + } } } -} -.flex-row { - .card { - margin: 10px; - border-radius: 7px; - background-color: $active-gray; - padding: 2px; - - width: 30%; + .resource, + .studio { + display: flex; + margin: 10px 0; min-width: 200px; - max-width: 230px; - .card-info { - border-radius: 5px; - background-color: $base-bg; - width: 100%; - height: 100%; - + text-align: left; + justify-content: center; + align-items: center; - button, - img { - width: calc(100% - 20px); - } + img { + margin-right: 15px; + } - img { - margin: 10px 10px 5px 10px; - border-radius: 5px; - } + a { + h5 { + margin: 8px 0; + color: $ui-blue; + font-weight: 500; - button { - margin: 0 10px 10px 10px; + &:hover { + color: darken($ui-blue, 15); + } } } //8 columns @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { - margin: 2px; - min-width: 175px; - - button { - font-size: .7em; - } - } - - } -} - -section { - display: flex; - margin: 0 auto; - border-bottom: 1px solid $ui-border; - 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; - } - - &.one-up { - text-align: center; - - .column { - width: 100%; - } - } - - &.two-up { - .column { - min-width: 200px; - max-width: 40%; - text-align: left; + display: block; + width: 30%; + min-width: 180px; + text-align: center; img { - border-radius: 5px; + margin: 0 auto; + } + } + } + + .resource { + width: 33%; + + a { + display: block; + margin: 5px 0; + font-size: .8em; + } + + .resource-info { + h5 { + margin: .85rem 0; + line-height: 0; + } + } + } + + .studio { + width: 50%; + + 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%; } - } - } -} -.resource, -.studio { - display: flex; - margin: 10px 0; - min-width: 200px; - - text-align: left; - justify-content: center; - align-items: center; - - img { - margin-right: 15px; - } - - a { - h5 { - margin: 8px 0; - color: $ui-blue; - font-weight: 500; - - &:hover { - color: darken($ui-blue, 15); + img { + float: none; } } } - //8 columns - @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { - display: block; - width: 30%; - min-width: 180px; - text-align: center; + .logos { + margin: 20px 0; + width: 100%; img { - margin: 0 auto; + margin: 20px; + max-width: 150px; + max-height: 55px; + vertical-align: middle; } } -} -.resource { - width: 33%; - - a { - display: block; - margin: 5px 0; - font-size: .8em; - } - - .resource-info { - h5 { - margin: .85rem 0; - line-height: 0; - } + .trademark { + margin-top: 20px; } } - -.studio { - width: 50%; - - 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%; - - img { - margin: 20px; - max-width: 150px; - max-height: 55px; - vertical-align: middle; - } -} - -.trademark { - margin-top: 20px; -} diff --git a/src/views/jobs/jobs.jsx b/src/views/jobs/jobs.jsx index 779e8afe1..acbde8828 100644 --- a/src/views/jobs/jobs.jsx +++ b/src/views/jobs/jobs.jsx @@ -10,7 +10,7 @@ var Jobs = React.createClass({ type: 'Jobs', render: function () { return ( -
+
diff --git a/src/views/jobs/jobs.scss b/src/views/jobs/jobs.scss index 64abc4437..252b9a939 100644 --- a/src/views/jobs/jobs.scss +++ b/src/views/jobs/jobs.scss @@ -1,53 +1,55 @@ @import "../../colors"; -h1 { - line-height: 2.6rem; - font-size: 2.3rem; - font-weight: 300; -} - -h2 { - font-size: 1.8rem; - font-weight: 300; -} - -.top { - img { - margin-bottom: 10px; - } -} - -.middle { - margin: 20px 0; - background-color: $ui-gray; - padding: 40px 0; - width: 100%; -} - -.bottom { - width: 100%; - line-height: 200%; - - .thin-heading { - padding: 20px 0; +.jobs { + h1 { + line-height: 2.6rem; + font-size: 2.3rem; + font-weight: 300; } - p { - margin: auto; - width: 70%; + h2 { + font-size: 1.8rem; + font-weight: 300; } - ul { - padding: 0; + .top { + img { + margin-bottom: 10px; + } + } - list-style: none; + .middle { + margin: 20px 0; + background-color: $ui-gray; + padding: 40px 0; + width: 100%; + } - li { - margin: 0; + .bottom { + width: 100%; + line-height: 200%; + + .thin-heading { + padding: 20px 0; + } + + p { + margin: auto; + width: 70%; + } + + ul { padding: 0; - span { - margin-left: 10px; + list-style: none; + + li { + margin: 0; + padding: 0; + + span { + margin-left: 10px; + } } } } diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index d05979cb4..389d8f029 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -4,7 +4,7 @@ var omit = require('lodash.omit'); var React = require('react'); var render = require('../../lib/render.jsx'); -var actions = require('../../redux/actions.js'); +var authActions = require('../../redux/auth.js'); var Api = require('../../mixins/api.jsx'); @@ -167,7 +167,7 @@ var Splash = injectIntl(React.createClass({ useCsrf: true, json: {cue: cue, value: false} }, function (err) { - if (!err) this.props.dispatch(actions.refreshSession()); + if (!err) this.props.dispatch(authActions.refreshSession()); }); }, shouldShowWelcome: function () { diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss index cccd3e346..b68965257 100644 --- a/src/views/splash/splash.scss +++ b/src/views/splash/splash.scss @@ -1,31 +1,33 @@ -.splash-header { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - - .ie9 & { - display: table; - margin: 0 -20px 20px -20px; - min-width: 100%; - border-spacing: 20px 0; - } - - .box { - display: inline-block; - width: calc(60% - 20px); +.splash { + .splash-header { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; .ie9 & { - display: table-cell; - vertical-align: top; + display: table; + margin: 0 -20px 20px -20px; + min-width: 100%; + border-spacing: 20px 0; + } + + .box { + display: inline-block; + width: calc(60% - 20px); + + .ie9 & { + display: table-cell; + vertical-align: top; + } + } + + .news { + width: 40%; } } - .news { - width: 40%; + .box { + margin-bottom: 20px; } -} - -.box { - margin-bottom: 20px; } diff --git a/src/views/wedo2/wedo2.jsx b/src/views/wedo2/wedo2.jsx index 9a63cdad4..78c84c33e 100644 --- a/src/views/wedo2/wedo2.jsx +++ b/src/views/wedo2/wedo2.jsx @@ -11,7 +11,7 @@ var Wedo2 = React.createClass({ type: 'wedo2', render: function () { return ( -
+
diff --git a/src/views/wedo2/wedo2.scss b/src/views/wedo2/wedo2.scss index 0616ae35f..1fbcbdeaa 100644 --- a/src/views/wedo2/wedo2.scss +++ b/src/views/wedo2/wedo2.scss @@ -5,201 +5,207 @@ padding: 0; } -h3, -h4 { - margin: 1.5em 0 .3em; -} - -h2 { - margin: .75em 0 .3em; -} - -p { - margin: .25em 0 1em; - - &.intro { - margin-bottom: 1em; +.wedo { + h3, + h4 { + margin: 1.5em 0 .3em; } - &.callout { - padding: .75em 1em; - text-align: center; - } -} - -.top-banner { - margin-bottom: 50px; - background-color: $ui-blue; - padding: 50px 0; - width: 100%; - h2 { - color: $ui-white; + margin: .75em 0 .3em; } p { - color: $ui-white; + margin: .25em 0 1em; + + &.intro { + margin-bottom: 1em; + } + + &.callout { + padding: .75em 1em; + text-align: center; + } } - .columns2 { + .top-banner { + margin-bottom: 50px; + background-color: $ui-blue; + padding: 50px 0; + width: 100%; + + h2 { + color: $ui-white; + } + + p { + color: $ui-white; + } + + .columns2 { + display: flex; + justify-content: space-between; + align-items: center; + } + + .banner-text { + max-width: $cols7; + } + + .banner-photo { + max-width: $cols4; + + img { + width: 100%; + } + } + } + + section { + margin-bottom: 50px; + text-align: center; + } + + // Getting Started Section + + .columns3 { display: flex; justify-content: space-between; - align-items: center; + + .column { + margin: 15px; + max-width: $cols4; + + img { + margin: 0 auto; + width: 80%; + } + } } - .banner-text { - max-width: $cols7; + // Project Highlight Section + + #starter-projects { + h3, + p { + text-align: center; + } } - .banner-photo { - max-width: $cols4; + .banner { + background-color: $ui-gray; + padding: 10px 0 50px; + + h3 { + margin-top: 30px; + } + } + + .project-list { + display: flex; + margin: 0 auto; + max-width: $cols9; + justify-content: space-between; + } + + .project-card { + transition: transform .25s ease; + margin: 10px; + border-radius: 7px; + background-color: $ui-white; + max-width: $cols3; + overflow: hidden; + + + img { + border-bottom: 2px solid $ui-white; + width: 100%; + } + + p { + display: block; + margin: 15px 15px 20px; + color: $ui-blue; + font-weight: 500; + } + + &:hover { + transform: scale(1.1, 1.1); + transition: transform .25s ease; + cursor: pointer; + + p { + color: darken($ui-blue, 15); + } + } + } + + // Device Cards + + .device-card { + display: inline-block; + margin: 0 10px; + max-width: $cols3; img { width: 100%; } } -} - -section { - margin-bottom: 50px; - text-align: center; -} - -// Getting Started Section - -.columns3 { - display: flex; - justify-content: space-between; - - .column { - margin: 15px; - max-width: $cols4; - - img { - margin: 0 auto; - width: 80%; - } - } -} - -// Project Highlight Section - -#starter-projects { - h3, - p { - text-align: center; - } -} - -.banner { - background-color: $ui-gray; - padding: 10px 0 50px; - - h3 { - margin-top: 30px; - } -} - -.project-list { - display: flex; - margin: 0 auto; - max-width: $cols9; - justify-content: space-between; -} - -.project-card { - transition: transform .25s ease; - margin: 10px; - border-radius: 7px; - background-color: $ui-white; - max-width: $cols3; - overflow: hidden; - - - img { - border-bottom: 2px solid $ui-white; - width: 100%; - } - - p { - display: block; - margin: 15px 15px 20px; - color: $ui-blue; - font-weight: 500; - } - - &:hover { - transform: scale(1.1, 1.1); - transition: transform .25s ease; - cursor: pointer; - - p { - color: darken($ui-blue, 15); - } - } -} - -// Device Cards - -.device-card { - display: inline-block; - margin: 0 10px; - max-width: $cols3; - - img { - width: 100%; - } } // Responsive Behavior //4 columns @media only screen and (max-width: $mobile - 1) { - .inner { - margin: 0 auto; - width: calc(100% - 40px); - } - - .top-banner { - text-align: center; - - .banner-photo { - display: none; + .wedo { + .inner { + margin: 0 auto; + width: calc(100% - 40px); } - } + + .top-banner { + text-align: center; - .project-list, - .columns3 { - display: block; - } + .banner-photo { + display: none; + } + } - .project-card, - .columns3 .column { - display: block; - margin: 20px auto; - width: $cols6; + .project-list, + .columns3 { + display: block; + } + + .project-card, + .columns3 .column { + display: block; + margin: 20px auto; + width: $cols6; + } } } //6 columns @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { - .project-list, - .columns3 { - display: inline-block; - } - - .top-banner { - text-align: center; - - .banner-photo { - display: none; + .wedo { + .project-list, + .columns3 { + display: inline-block; } - } - .project-card, - .columns3 .column { - display: inline-block; - width: $cols6; + .top-banner { + text-align: center; + + .banner-photo { + display: none; + } + } + + .project-card, + .columns3 .column { + display: inline-block; + width: $cols6; + } } } @@ -209,16 +215,18 @@ section { text-align: center; } - .top-banner { - text-align: left; + .wedo { + .top-banner { + text-align: left; - .banner-photo { - max-width: $cols3; + .banner-photo { + max-width: $cols3; + } + } + + .inner { + margin: 0 auto; + width: $tablet; } } - - .inner { - margin: 0 auto; - width: $tablet; - } }