mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 09:35:56 -05:00
Constrain view styles to within view name classes
So that they don't affect styles declared outside the scope of the view. Thanks @rschamp!
This commit is contained in:
Matthew Taylor
parent
e1cebe46db
commit
82dbfabcec
23 changed files with 727 additions and 718 deletions
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -223,7 +223,7 @@ var Microworld = React.createClass({
|
|||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className="inner">
|
||||
<div className="inner microworld">
|
||||
<div className="top-banner section">
|
||||
<h1>{this.props.microworldData.title}</h1>
|
||||
<p>{this.props.microworldData.description.join(' ')}</p>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ var About = React.createClass({
|
|||
type: 'About',
|
||||
render: function () {
|
||||
return (
|
||||
<div className="inner">
|
||||
<div className="inner about">
|
||||
<h1><FormattedMessage id='general.aboutScratch' /></h1>
|
||||
|
||||
<div className="masthead">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@ var Cards = injectIntl(React.createClass({
|
|||
'cards.hideLink': formatMessage({id: 'cards.hideLink'})
|
||||
};
|
||||
return (
|
||||
<div className="inner">
|
||||
<div className="intro cards">
|
||||
<div className="inner cards">
|
||||
<div className="intro cards-intro">
|
||||
<div className="intro-content">
|
||||
<h1><FormattedMessage id='cards.introHeader' /></h1>
|
||||
<p><FormattedMessage id='cards.introContent' /></p>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ var Components = React.createClass({
|
|||
type: 'Components',
|
||||
render: function () {
|
||||
return (
|
||||
<div className="inner">
|
||||
<div className="inner components">
|
||||
<h1>Button</h1>
|
||||
<Button>I love button</Button>
|
||||
<h1>Form</h1>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
h1 {
|
||||
margin: 0 0 10px 0;
|
||||
.components {
|
||||
h1 {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ var Credits = React.createClass({
|
|||
type: 'Credits',
|
||||
render: function () {
|
||||
return (
|
||||
<div className="inner">
|
||||
<div className="inner credits">
|
||||
<h1>Scratch Credits and Contributors</h1>
|
||||
<h2>MIT Scratch Team</h2>
|
||||
<p>Scratch is designed and developed by the Lifelong Kindergarten Group at MIT Media Lab:</p>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ var Dmca = React.createClass({
|
|||
type: 'Dmca',
|
||||
render: function () {
|
||||
return (
|
||||
<div className="inner">
|
||||
<div className="inner dmca">
|
||||
<Box title={'DMCA'}>
|
||||
<p><FormattedMessage id='dmca.intro' /></p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ var Guidelines = React.createClass({
|
|||
type: 'Guidelines',
|
||||
render: function () {
|
||||
return (
|
||||
<div className="inner">
|
||||
<div className="inner guidelines">
|
||||
<Box title={<FormattedMessage id='guidelines.title' />}>
|
||||
<p><FormattedMessage id='guidelines.header' className="intro" /></p>
|
||||
<dl>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ var Hoc = React.createClass({
|
|||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div>
|
||||
<div className="hoc">
|
||||
<TitleBanner className={this.state.bgClass}>
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
|
|
@ -403,7 +403,6 @@ var Hoc = React.createClass({
|
|||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ var Jobs = React.createClass({
|
|||
type: 'Jobs',
|
||||
render: function () {
|
||||
return (
|
||||
<div>
|
||||
<div className="jobs">
|
||||
<div className="top">
|
||||
<div className="inner">
|
||||
<img src="/images/jobs.png" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ var Wedo2 = React.createClass({
|
|||
type: 'wedo2',
|
||||
render: function () {
|
||||
return (
|
||||
<div>
|
||||
<div className="wedo">
|
||||
<div className="top-banner">
|
||||
<div className="inner">
|
||||
<div className="columns2">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue