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 2016-05-13 09:09:40 -04:00
commit 27af75e7fe
40 changed files with 308 additions and 327 deletions

View file

@ -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;
}
}
}

View file

@ -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;
}
}

View file

@ -1,6 +1,5 @@
@import "../../../colors";
@import "../../../frameless";
@import "../../../typography";
#footer {
.inner {

View file

@ -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;
}
}
}

View file

@ -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 {

View file

@ -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>

View file

@ -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 {

View file

@ -11,6 +11,7 @@
list-style-type: none;
li {
margin-top: 0;
margin-right: 10px;
color: $type-white;
}

View file

@ -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;

View file

@ -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;
}
}
}
}

View file

@ -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;

View file

@ -7,7 +7,7 @@
width: 100%;
color: $type-white;
font-size: .8rem;
font-weight: bold;
font-weight: 500;
justify-content: center;
flex-wrap: wrap;

View file

@ -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(

View file

@ -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;

View file

@ -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>

View file

@ -1,6 +1,6 @@
@import "../../colors";
#view {
.about {
.masthead {
display: flex;
flex-wrap: no-wrap;

View file

@ -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>

View file

@ -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;
}
}
}
}
}

View file

@ -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>

View file

@ -1,4 +1,4 @@
#view {
.components {
h1 {
margin: 0 0 10px 0;
}

View file

@ -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'));

View file

@ -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 @@
}
}
}
}
}
}

View file

@ -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'));

View file

@ -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;
}
}
}

View file

@ -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'));

View file

@ -1,7 +1,7 @@
@import "../../../colors";
@import "../../../frameless";
#view {
.plan {
section {
border-bottom: 2px solid $ui-border;

View file

@ -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>

View file

@ -1,6 +1,6 @@
@import "../../colors";
#view {
.credits {
p {
line-height: 1.5rem;

View file

@ -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>

View file

@ -1,2 +0,0 @@
@import "../../colors";
@import "../../typography";

View file

@ -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>

View file

@ -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;

View file

@ -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>
);
}
});

View file

@ -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 {

View file

@ -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" />

View file

@ -1,6 +1,6 @@
@import "../../colors";
#view {
.jobs {
h1 {
line-height: 2.6rem;
font-size: 2.3rem;

View file

@ -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 () {

View file

@ -1,4 +1,4 @@
#view {
.splash {
.splash-header {
display: flex;
flex-direction: row;
@ -29,5 +29,5 @@
.box {
margin-bottom: 20px;
}
}
}
}

View file

@ -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">

View file

@ -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;