mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-14 15:09:59 -04:00
Merge pull request #475 from mewtaylor/issue/gh-441-typography
Fix GH-[441, 440]: Get rid of typography file, use `render` in conference
This commit is contained in:
Matthew Taylor
commit
27af75e7fe
40 changed files with 308 additions and 327 deletions
|
|
@ -1,129 +0,0 @@
|
|||
@import "./colors";
|
||||
@import "./frameless";
|
||||
|
||||
#view {
|
||||
|
||||
// Global Typography
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p {
|
||||
line-height: 1.7em;
|
||||
color: $type-gray;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: lighten($ui-blue, 30);
|
||||
}
|
||||
|
||||
// Headers
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h5 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: .85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// Link Typography
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: $ui-blue;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken($ui-blue, 15);
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraph Typography
|
||||
|
||||
p {
|
||||
//max-width: 700px;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
|
||||
&.intro {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
&.callout {
|
||||
// margin: 1.5em 0;
|
||||
// border-top: 1px solid $ui-border;
|
||||
// border-bottom: 1px solid $ui-border;
|
||||
// padding: 1em 0;
|
||||
|
||||
margin: 1.5em 0;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
background-color: lighten($ui-blue, 40);
|
||||
padding: 1.25em;
|
||||
|
||||
&.orange {
|
||||
background-color: lighten($ui-orange, 30);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// List Typography
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
|
||||
line-height: 1.5em;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
|
||||
li {
|
||||
margin: .75em 0;
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
line-height: 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,6 +14,7 @@ $base-bg: $ui-white;
|
|||
|
||||
.box-header {
|
||||
h4 {
|
||||
line-height: .9rem;
|
||||
font-size: .9rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -25,6 +26,7 @@ $base-bg: $ui-white;
|
|||
|
||||
.box-header {
|
||||
h4 {
|
||||
line-height: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -36,6 +38,7 @@ $base-bg: $ui-white;
|
|||
|
||||
.box-header {
|
||||
h4 {
|
||||
line-height: 1.1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -47,6 +50,7 @@ $base-bg: $ui-white;
|
|||
|
||||
.box-header {
|
||||
h4 {
|
||||
line-height: 1.1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../frameless";
|
||||
@import "../../../typography";
|
||||
|
||||
#footer {
|
||||
.inner {
|
||||
|
|
|
|||
|
|
@ -18,12 +18,16 @@
|
|||
dt {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
line-height: 1.2rem;
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,15 +9,17 @@
|
|||
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);
|
||||
vertical-align: top;
|
||||
|
||||
h1 {
|
||||
color: $ui-orange;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.sprites {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -6,25 +6,9 @@ $base-bg: $ui-white;
|
|||
#view {
|
||||
background-color: $base-bg;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// To be integrated into the Global Typography standards
|
||||
h3,
|
||||
p {
|
||||
font-weight: 300;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 auto;
|
||||
padding: 5px 10%;
|
||||
text-align: center;
|
||||
color: $type-gray;
|
||||
}
|
||||
|
||||
.microworld {
|
||||
.top-banner,
|
||||
.videos-section,
|
||||
.section {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
list-style-type: none;
|
||||
|
||||
li {
|
||||
margin-top: 0;
|
||||
margin-right: 10px;
|
||||
color: $type-white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
align-self: flex-start;
|
||||
|
||||
|
|
@ -72,7 +73,7 @@
|
|||
.link {
|
||||
> a {
|
||||
display: block;
|
||||
padding: 17px 15px 0 15px;
|
||||
padding: 15px 15px 2px 15px;
|
||||
height: 33px;
|
||||
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -24,63 +24,65 @@
|
|||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0 20px;
|
||||
border-right: 0;
|
||||
color: $type-white;
|
||||
flex-grow: 3;
|
||||
.inner > ul > li {
|
||||
&.search {
|
||||
margin: 0 20px;
|
||||
border-right: 0;
|
||||
color: $type-white;
|
||||
flex-grow: 3;
|
||||
|
||||
.ie9 & {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
outline: none;
|
||||
border: 0;
|
||||
background-color: $active-gray;
|
||||
height: 14px;
|
||||
|
||||
&[type=submit] {
|
||||
position: absolute;
|
||||
|
||||
background-color: transparent;
|
||||
background-image: url("/images/nav-search-glass.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 14px 14px;
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
.ie9 & {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&[type=text] {
|
||||
transition: .15s ease background-color;
|
||||
padding: 0;
|
||||
padding-right: 10px;
|
||||
padding-left: 40px;
|
||||
width: calc(100% - 50px);
|
||||
height: 40px;
|
||||
color: $type-white;
|
||||
font-size: .85em;
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
$placeholder-transparent: rgba(255, 255, 255, .75);
|
||||
color: $placeholder-transparent;
|
||||
input {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
outline: none;
|
||||
border: 0;
|
||||
background-color: $active-gray;
|
||||
height: 14px;
|
||||
|
||||
&[type=submit] {
|
||||
position: absolute;
|
||||
|
||||
background-color: transparent;
|
||||
background-image: url("/images/nav-search-glass.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 14px 14px;
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
transition: .15s ease background-color;
|
||||
background-color: $active-dark-gray;
|
||||
}
|
||||
&[type=text] {
|
||||
transition: .15s ease background-color;
|
||||
padding: 0;
|
||||
padding-right: 10px;
|
||||
padding-left: 40px;
|
||||
width: calc(100% - 50px);
|
||||
height: 40px;
|
||||
color: $type-white;
|
||||
font-size: .85em;
|
||||
|
||||
.ie9 & {
|
||||
width: 70px;
|
||||
&::placeholder {
|
||||
$placeholder-transparent: rgba(255, 255, 255, .75);
|
||||
color: $placeholder-transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
transition: .15s ease background-color;
|
||||
background-color: $active-dark-gray;
|
||||
}
|
||||
|
||||
.ie9 & {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../main";
|
||||
@import "../../../frameless";
|
||||
|
||||
#navigation {
|
||||
h1 {
|
||||
|
|
@ -26,6 +26,13 @@
|
|||
}
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.index,
|
||||
.plan,
|
||||
.expect,
|
||||
.schedule {
|
||||
padding: 0 0 20px 0;
|
||||
|
||||
p {
|
||||
|
|
@ -46,10 +53,11 @@
|
|||
}
|
||||
|
||||
@media only screen and (max-width: $tablet - 1) {
|
||||
margin-top: 100px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.title-banner {
|
||||
margin-bottom: 0;
|
||||
background-color: $ui-blue;
|
||||
padding: 2rem 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
width: 100%;
|
||||
color: $type-white;
|
||||
font-size: .8rem;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
|
|
|||
|
|
@ -17,15 +17,18 @@ var store = redux.createStore(
|
|||
var render = function (jsx, element) {
|
||||
// Get locale and messages from global namespace (see "init.js")
|
||||
var locale = window._locale || 'en';
|
||||
if (typeof window._messages[locale] === 'undefined') {
|
||||
// Fall back on the split
|
||||
locale = locale.split('-')[0];
|
||||
var messages = {};
|
||||
if (typeof window._messages !== 'undefined') {
|
||||
if (typeof window._messages[locale] === 'undefined') {
|
||||
// Fall back on the split
|
||||
locale = locale.split('-')[0];
|
||||
}
|
||||
if (typeof window._messages[locale] === 'undefined') {
|
||||
// Language appears to not be supported – fall back to 'en'
|
||||
locale = 'en';
|
||||
}
|
||||
messages = window._messages[locale];
|
||||
}
|
||||
if (typeof window._messages[locale] === 'undefined') {
|
||||
// Language appears to not be supported – fall back to 'en'
|
||||
locale = 'en';
|
||||
}
|
||||
var messages = window._messages[locale];
|
||||
|
||||
// Render view component
|
||||
ReactDOM.render(
|
||||
|
|
|
|||
101
src/main.scss
101
src/main.scss
|
|
@ -26,13 +26,30 @@ h4 {
|
|||
}
|
||||
|
||||
h1 {
|
||||
line-height: 2.125rem;
|
||||
font-size: 1.625rem;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h5 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: .85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -40,13 +57,42 @@ p {
|
|||
font-size: .8rem;
|
||||
}
|
||||
|
||||
&.intro {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
&.callout {
|
||||
// margin: 1.5em 0;
|
||||
// border-top: 1px solid $ui-border;
|
||||
// border-bottom: 1px solid $ui-border;
|
||||
// padding: 1em 0;
|
||||
|
||||
margin: 1.5em 0;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
background-color: lighten($ui-blue, 40);
|
||||
padding: 1.25em;
|
||||
|
||||
&.orange {
|
||||
background-color: lighten($ui-orange, 30);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: $ui-blue;
|
||||
font-weight: 500;
|
||||
|
||||
&:link,
|
||||
&:visited,
|
||||
&:active {
|
||||
|
|
@ -55,7 +101,8 @@ a {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
color: darken($ui-blue, 15);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -76,6 +123,52 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p {
|
||||
line-height: 1.7em;
|
||||
color: $type-gray;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: lighten($ui-blue, 30);
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
|
||||
line-height: 1.5em;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
|
||||
li {
|
||||
margin: .75em 0;
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
line-height: 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#view {
|
||||
display: inline-block;
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
@ -40,13 +40,13 @@ var About = React.createClass({
|
|||
<div className="body">
|
||||
<ul>
|
||||
<li>
|
||||
<h2><FormattedMessage id='about.whoUsesScratch' /></h2>
|
||||
<h3><FormattedMessage id='about.whoUsesScratch' /></h3>
|
||||
<img src="/images/about/who-uses-scratch.jpg" alt="" />
|
||||
<p><FormattedHTMLMessage id='about.whoUsesScratchDescription' /></p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h2><FormattedMessage id='about.literacy' /></h2>
|
||||
<h3><FormattedMessage id='about.literacy' /></h3>
|
||||
<iframe
|
||||
src="https://embed-ssl.ted.com/talks/mitch_resnick_let_s_teach_kids_to_code.html"
|
||||
scrolling="no"
|
||||
|
|
@ -57,31 +57,31 @@ var About = React.createClass({
|
|||
</li>
|
||||
|
||||
<li>
|
||||
<h2><FormattedMessage id='about.aroundTheWorld' /></h2>
|
||||
<h3><FormattedMessage id='about.aroundTheWorld' /></h3>
|
||||
<img src="/images/about/around-the-world.png" alt="" />
|
||||
<p><FormattedHTMLMessage id='about.aroundTheWorldDescription' /></p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h2><FormattedMessage id='about.schools' /></h2>
|
||||
<h3><FormattedMessage id='about.schools' /></h3>
|
||||
<img src="/images/about/scratch-in-schools.jpg" alt="" />
|
||||
<p><FormattedHTMLMessage id='about.schoolsDescription' /></p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h2><FormattedMessage id='about.quotes' /></h2>
|
||||
<h3><FormattedMessage id='about.quotes' /></h3>
|
||||
<img src="/images/about/quotes.gif" alt="Quotes about Scratch" />
|
||||
<p><FormattedHTMLMessage id='about.quotesDescription' /></p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h2><FormattedMessage id='about.research' /></h2>
|
||||
<h3><FormattedMessage id='about.research' /></h3>
|
||||
<img src="/images/about/research-remix.png" alt="" />
|
||||
<p><FormattedHTMLMessage id='about.researchDescription' /></p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h2><FormattedMessage id='about.learnMore' /></h2>
|
||||
<h3><FormattedMessage id='about.learnMore' /></h3>
|
||||
<p>
|
||||
<ul className="list">
|
||||
<li>
|
||||
|
|
@ -101,7 +101,7 @@ var About = React.createClass({
|
|||
</li>
|
||||
|
||||
<li>
|
||||
<h2><FormattedMessage id='about.support' /></h2>
|
||||
<h3><FormattedMessage id='about.support' /></h3>
|
||||
<p><FormattedHTMLMessage id='about.supportDescription' /></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "../../colors";
|
||||
|
||||
#view {
|
||||
.about {
|
||||
.masthead {
|
||||
display: flex;
|
||||
flex-wrap: no-wrap;
|
||||
|
|
|
|||
|
|
@ -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,8 +1,8 @@
|
|||
@import "../../colors";
|
||||
@import "../../typography";
|
||||
@import "../../frameless";
|
||||
|
||||
// type-specific margins
|
||||
#view {
|
||||
.cards {
|
||||
// type-specific margins
|
||||
h4 {
|
||||
margin: 1.5em 0 .3em;
|
||||
}
|
||||
|
|
@ -14,44 +14,44 @@
|
|||
p {
|
||||
margin: .25em 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
margin: 1em 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.cards-intro {
|
||||
display: flex;
|
||||
margin: 1em 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.intro-content {
|
||||
float: left;
|
||||
width: 45%;
|
||||
.intro-content {
|
||||
float: left;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
.cards-container {
|
||||
text-align: center;
|
||||
|
||||
.cards-container {
|
||||
text-align: center;
|
||||
.flex-row {
|
||||
div {
|
||||
padding: .5em;
|
||||
|
||||
.flex-row {
|
||||
div {
|
||||
padding: .5em;
|
||||
a {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
.pdf-icon {
|
||||
margin-right: .2em;
|
||||
width: 1em;
|
||||
.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,4 +1,4 @@
|
|||
#view {
|
||||
.components {
|
||||
h1 {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var render = require('../../../lib/render.jsx');
|
||||
|
||||
var FlexRow = require('../../../components/flex-row/flex-row.jsx');
|
||||
var Page = require('../../../components/page/conference/page.jsx');
|
||||
|
|
@ -283,4 +283,4 @@ var ConferenceExpectations = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<Page><ConferenceExpectations /></Page>, document.getElementById('app'));
|
||||
render(<Page><ConferenceExpectations /></Page>, document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../frameless";
|
||||
@import "../../../typography";
|
||||
|
||||
#view {
|
||||
.expect {
|
||||
.flex-row {
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
|
@ -173,5 +172,5 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var render = require('../../../lib/render.jsx');
|
||||
|
||||
var Button = require('../../../components/forms/button.jsx');
|
||||
var FlexRow = require('../../../components/flex-row/flex-row.jsx');
|
||||
|
|
@ -69,4 +69,4 @@ var ConferenceSplash = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));
|
||||
render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../typography";
|
||||
@import "../../../frameless";
|
||||
|
||||
#view {
|
||||
background-color: $ui-light-gray;
|
||||
min-height: initial;
|
||||
}
|
||||
|
||||
.index {
|
||||
.title-banner {
|
||||
margin-bottom: 0;
|
||||
background-image: url("/images/conference/index/title-banner.jpg");
|
||||
|
|
@ -54,8 +56,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
align-items: flex-start;
|
||||
|
||||
div {
|
||||
width: 28%;
|
||||
text-align: center;
|
||||
|
|
@ -63,12 +66,12 @@
|
|||
img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 65%;
|
||||
max-width: 125px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $tablet - 1) {
|
||||
margin: .5rem;
|
||||
width: 60%;
|
||||
width: 125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var render = require('../../../lib/render.jsx');
|
||||
|
||||
var Button = require('../../../components/forms/button.jsx');
|
||||
var FlexRow = require('../../../components/flex-row/flex-row.jsx');
|
||||
|
|
@ -339,4 +339,4 @@ var ConferencePlan = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<Page><ConferencePlan /></Page>, document.getElementById('app'));
|
||||
render(<Page><ConferencePlan /></Page>, document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../frameless";
|
||||
|
||||
#view {
|
||||
.plan {
|
||||
section {
|
||||
border-bottom: 2px solid $ui-border;
|
||||
|
||||
|
|
|
|||
|
|
@ -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,6 +1,6 @@
|
|||
@import "../../colors";
|
||||
|
||||
#view {
|
||||
.credits {
|
||||
p {
|
||||
line-height: 1.5rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,13 +4,11 @@ var render = require('../../lib/render.jsx');
|
|||
var Page = require('../../components/page/www/page.jsx');
|
||||
var Box = require('../../components/box/box.jsx');
|
||||
|
||||
require('./dmca.scss');
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
@import "../../colors";
|
||||
@import "../../typography";
|
||||
|
|
@ -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,11 @@
|
|||
@import "../../colors";
|
||||
@import "../../typography";
|
||||
|
||||
#view {
|
||||
.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>
|
||||
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,17 +5,9 @@ $base-bg: $ui-white;
|
|||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// To be integrated into the Global Typography standards
|
||||
h3,
|
||||
p {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.hoc {
|
||||
.title-banner {
|
||||
&.wbb-bg {
|
||||
background-image: url("/images/hoc2015/hide-bg.jpg");
|
||||
|
|
@ -147,9 +139,16 @@ $base-bg: $ui-white;
|
|||
margin-right: 15px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 8px 0;
|
||||
font-weight: 500;
|
||||
a {
|
||||
h5 {
|
||||
margin: 8px 0;
|
||||
color: $ui-blue;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: darken($ui-blue, 15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//8 columns
|
||||
|
|
@ -173,6 +172,13 @@ $base-bg: $ui-white;
|
|||
margin: 5px 0;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.resource-info {
|
||||
h5 {
|
||||
margin: .85rem 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.studio {
|
||||
|
|
|
|||
|
|
@ -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,6 +1,6 @@
|
|||
@import "../../colors";
|
||||
|
||||
#view {
|
||||
.jobs {
|
||||
h1 {
|
||||
line-height: 2.6rem;
|
||||
font-size: 2.3rem;
|
||||
|
|
|
|||
|
|
@ -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/actions.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,4 +1,4 @@
|
|||
#view {
|
||||
.splash {
|
||||
.splash-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -29,5 +29,5 @@
|
|||
|
||||
.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">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
@import "../../typography";
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wedo {
|
||||
h3,
|
||||
h4 {
|
||||
margin: 1.5em 0 .3em;
|
||||
|
|
@ -150,16 +151,18 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Behavior
|
||||
// Responsive Behavior
|
||||
|
||||
//4 columns
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
//4 columns
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.wedo {
|
||||
.inner {
|
||||
margin: 0 auto;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
|
||||
.top-banner {
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -180,9 +183,11 @@
|
|||
width: $cols6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
.wedo {
|
||||
.project-list,
|
||||
.columns3 {
|
||||
display: inline-block;
|
||||
|
|
@ -202,13 +207,15 @@
|
|||
width: $cols6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//8 columns
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
#view {
|
||||
text-align: center;
|
||||
}
|
||||
//8 columns
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
#view {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wedo {
|
||||
.top-banner {
|
||||
text-align: left;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue