Add conference sub-site

This commit is contained in:
Matthew Taylor 2016-04-21 16:22:39 -04:00
parent 017d58fb1b
commit 66113e1c58
41 changed files with 1714 additions and 17 deletions

View file

@ -1,6 +1,7 @@
/* UI Primary Colors */ /* UI Primary Colors */
$ui-blue: hsla(200, 90, 55, 1); // #25AFF4 $ui-blue: hsla(200, 90, 55, 1); // #25AFF4
$ui-orange: hsla(35, 90, 55, 1); // #F49D25 $ui-orange: hsla(35, 90, 55, 1); // #F49D25
$ui-light-gray: hsla(0, 0, 98, 1);
$ui-gray: hsla(0, 0, 95, 1); //#F2F2F2 $ui-gray: hsla(0, 0, 95, 1); //#F2F2F2
$ui-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3 $ui-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3

View file

@ -0,0 +1,113 @@
var React = require('react');
var FlexRow = require('../../../presentation/flex-row/flex-row.jsx');
var FooterBox = require('../../../presentation/footer/footer.jsx');
require('./footer.scss');
var ConferenceFooter = React.createClass({
type: 'ConferenceFooter',
render: function () {
return (
<FooterBox>
<div className="collaborators">
<h4>Collaborators</h4>
<FlexRow as="ul">
<li>
<a href="https://odl.mit.edu/">
<img src="/images/conference/footer/mit-odl.png"
alt="MIT Office of Digital Learning" />
</a>
</li>
<li>
<a href="http://www.scratchfoundation.org/">
<img src="/images/conference/footer/scratch-foundation.png"
alt="Scratch Foundation" />
</a>
</li>
<li>
<a href="http://www.legofoundation.com/">
<img src="/images/conference/footer/lego-foundation.png"
alt="LEGO Foundation" />
</a>
</li>
<li>
<a href="http://www.google.com/">
<img src="/images/conference/footer/google.png"
alt="Google" />
</a>
</li>
<li>
<a href="http://www.siegelendowment.org/">
<img src="/images/conference/footer/siegel-endowment.png"
alt="Siegel Family Endowment" />
</a>
</li>
</FlexRow>
</div>
<FlexRow className="scratch-links">
<div className="family">
<h4>Scratch Family</h4>
<FlexRow>
<FlexRow as="ul" className="column">
<li>
<a href="https://scratch.mit.edu">Scratch</a>
</li>
<li>
<a href="http://www.scratchjr.org/">ScratchJr</a>
</li>
</FlexRow>
<FlexRow as="ul" className="column">
<li>
<a href="http://www.scratchfoundation.org/">Scratch Foundation</a>
</li>
<li>
<a href="http://scratched.gse.harvard.edu/">ScratchEd</a>
</li>
</FlexRow>
<FlexRow as="ul" className="column">
<li>
<a href="http://day.scratch.mit.edu">Scratch Day</a>
</li>
</FlexRow>
</FlexRow>
<p>
Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab.
</p>
</div>
<div className="media">
<div className="contact-us">
<h4>Contact</h4>
<p>
<a href="emailto:help@scratch.mit.edu">
Email Us
</a>
</p>
</div>
<div className="social">
<FlexRow as="ul">
<li>
<a href="//www.twitter.com/scratch">
<img src="/images/conference/footer/twitter.png" alt="scratch twitter" />
</a>
</li>
<li>
<a href="//www.facebook.com/scratchteam">
<img src="/images/conference/footer/facebook.png" alt="scratch facebook" />
</a>
</li>
<li>
<a href="http://medium.com/scratchfoundation-blog">
<img src="/images/conference/footer/medium.png" alt="scratch foundation blog" />
</a>
</li>
</FlexRow>
</div>
</div>
</FlexRow>
</FooterBox>
);
}
});
module.exports = ConferenceFooter;

View file

@ -0,0 +1,141 @@
@import "../../../../colors";
@import "../../../../frameless";
@import "../../../../typography";
#footer {
.inner {
ul {
padding-left: 0;
li {
list-style-type: none;
}
}
.collaborators {
margin-top: 20px;
border-bottom: 2px solid $ui-border;
width: 100%;
ul {
justify-content: space-between;
align-items: center;
img {
margin: 20px 0;
max-width: 180px;
max-height: 30px;
}
}
}
.scratch-links {
margin-top: 25px;
justify-content: space-between;
}
.family {
width: $cols8;
.flex-row {
justify-content: space-between;
align-items: flex-start;
ul {
align-items: flex-start;
}
}
}
.media {
width: $cols3;
text-align: center;
.contact-us {
text-align: left;
}
ul {
justify-content: flex-start;
}
li {
margin-right: 10px;
border-radius: 20px;
background-color: $ui-blue;
padding: 5px;
width: 20px;
height: 20px;
&:hover {
background-color: $ui-orange;
}
img {
width: 20px;
}
}
}
@media only screen and (max-width: $tablet - 1) {
text-align: center;
.family {
display: none;
}
.media {
.contact-us {
text-align: center;
}
.flex-row {
flex-direction: row;
justify-content: center;
}
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
ul {
li {
margin-left: 0;
}
}
.collaborators {
h4 {
text-align: center;
}
ul {
justify-content: center;
li {
margin: 0 15px;
}
img {
margin: 20px 0;
max-width: 180px;
max-height: 30px;
}
}
}
.scratch-links {
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-between;
.family {
width: $cols6;
}
.media {
width: 10em;
}
}
}
}
}

View file

@ -0,0 +1,35 @@
var React = require('react');
var NavigationBox = require('../../../presentation/navigation/navigation.jsx');
require('./navigation.scss');
var Navigation = React.createClass({
type: 'Navigation',
render: function () {
return (
<NavigationBox>
<ul>
<li className="left logo">
<a href="/conference">
<img src="/images/logo_sm.png" alt="Scratch Logo" />
<p>Conference</p>
</a>
</li>
<li className="right">
<ul>
<li className="link expect">
<a href="/conference/expect">What to Expect</a>
</li>
<li className="link plan">
<a href="/conference/plan">Plan Your Visit</a>
</li>
</ul>
</li>
</ul>
</NavigationBox>
);
}
});
module.exports = Navigation;

View file

@ -0,0 +1,72 @@
@import "../../../../colors";
@import "../../../../frameless";
#navigation {
.inner {
ul {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
align-items: center;
list-style-type: none;
li {
margin-right: 10px;
color: $type-white;
}
.logo {
> a {
display: flex;
height: 100%;
align-items: center;
}
img {
margin-right: 10px;
border-right: 2px solid $active-gray;
padding-right: 10px;
width: 80px;
}
p {
text-decoration: none;
white-space: nowrap;
color: $type-white;
font-size: .85rem;
font-weight: bold;
}
}
}
}
@media only screen and (max-width: $tablet - 1) {
height: 100px;
.inner {
> ul {
justify-content: space-between;
flex-flow: column nowrap;
li {
align-self: center;
&.right {
margin-left: 0;
align-self: center;
}
}
.logo {
> a {
padding-top: 6px;
}
}
}
img {
padding-left: 15px;
}
}
}
}

View file

@ -0,0 +1,27 @@
var React = require('react');
var Navigation = require('../../navigation/conference/navigation.jsx');
var Footer = require('../../footer/conference/footer.jsx');
require('./page.scss');
var Page = React.createClass({
type: 'Page',
render: function () {
return (
<div className="page">
<div id="navigation">
<Navigation />
</div>
<div id="view">
{this.props.children}
</div>
<div id="footer">
<Footer />
</div>
</div>
);
}
});
module.exports = Page;

View file

@ -0,0 +1,119 @@
@import "../../../../colors";
@import "../../../../main";
#navigation {
h1 {
font-size: 4.5rem;
}
@media only screen and (max-width: $mobile - 1) {
h1 {
font-size: 2.5rem;
}
}
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
h1 {
font-size: 3rem;
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
h1 {
font-size: 3.5rem;
}
}
}
#view {
padding: 0 0 20px 0;
p {
margin: .25em 0 1em;
&.intro {
margin-bottom: 1em;
}
}
ol,
ul {
margin: .25em 0 1em;
li {
margin: .75em 0;
}
}
@media only screen and (max-width: $tablet - 1) {
margin-top: 100px;
}
.title-banner {
background-color: $ui-blue;
padding: 2rem 0;
h1,
h4,
p {
margin: 0 auto;
padding: 5px 0;
text-align: center;
color: $type-white;
}
h1 {
font-size: 4.5rem;
}
@media only screen and (max-width: $tablet - 1) {
h1 {
font-size: 2.5rem;
}
}
}
.title-icon {
position: absolute;
width: 100%;
text-align: center;
img {
width: 125px;
}
@media only screen and (max-width: $tablet - 1) {
img {
transform: translate(0, 5px);
width: 85px;
}
}
}
section {
padding: 64px 0;
}
.flex-row {
&.uneven {
align-items: flex-start;
.short {
width: $cols3;
}
.long {
width: $cols8;
text-align: left;
}
@media only screen and (max-width: $tablet - 1) {
.short,
.long {
margin: auto;
width: 90%;
}
}
}
}
}

View file

@ -0,0 +1,41 @@
var classNames = require('classnames');
var React = require('react');
require('./accordion.scss');
var Accordion = React.createClass({
type: 'Accordion',
getDefaultProps: function () {
return {
titleAs: 'div',
contentAs: 'div'
};
},
getInitialState: function () {
return {
isOpen: false
};
},
toggleContent: function () {
this.setState({isOpen: !this.state.isOpen});
},
render: function () {
var classes = classNames({
'content': true,
'open': this.state.isOpen
});
return (
<div className="accordion">
<this.props.titleAs className="title"
onClick={this.toggleContent}>
{this.props.title}
</this.props.titleAs>
<this.props.contentAs className={classes}>
{this.props.content}
</this.props.contentAs>
</div>
);
}
});
module.exports = Accordion;

View file

@ -0,0 +1,17 @@
.accordion {
.title {
cursor: pointer;
}
.content {
transition: all .3s ease-in-out;
margin: .5rem 0;
max-height: 0;
overflow: hidden;
&.open {
margin: 1rem 0;
max-height: 100px;
}
}
}

View file

@ -44,6 +44,22 @@
height: 100%; height: 100%;
align-self: flex-start; align-self: flex-start;
&.right {
float: right;
margin-left: auto;
align-self: flex-end;
.ie9 & {
float: none;
}
a {
&:hover {
background-color: $active-gray;
}
}
}
.ie9 & { .ie9 & {
display: table-cell; display: table-cell;
float: none; float: none;
@ -70,20 +86,4 @@
} }
} }
} }
.right {
float: right;
margin-left: auto;
align-self: flex-end;
.ie9 & {
float: none;
}
a {
&:hover {
background-color: $active-gray;
}
}
}
} }

View file

@ -14,8 +14,11 @@
p { p {
margin: 0 auto; margin: 0 auto;
padding: 5px 0; padding: 5px 0;
max-width: 500px;
text-align: center; text-align: center;
color: $type-white; color: $type-white;
} }
p {
max-width: 500px;
}
} }

View file

@ -53,6 +53,24 @@
"view": "wedo2/wedo2", "view": "wedo2/wedo2",
"title": "LEGO WeDo 2.0" "title": "LEGO WeDo 2.0"
}, },
{
"name": "conference-index",
"pattern": "^/conference$",
"view": "conference/index/index",
"title": "Scratch Conference"
},
{
"name": "conference-plan",
"pattern": "^/conference/plan$",
"view": "conference/plan/plan",
"title": "Plan Your Visit"
},
{
"name": "conference-expectations",
"pattern": "^/conference/expect$",
"view": "conference/expect/expect",
"title": "What to Expect"
},
{ {
"name": "donate", "name": "donate",
"pattern": "^/info/donate", "pattern": "^/info/donate",

View file

@ -0,0 +1,293 @@
var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('../../../components/presentation/forms/button.jsx');
var FlexRow = require('../../../components/presentation/flex-row/flex-row.jsx');
var Page = require('../../../components/container/page/conference/page.jsx');
var TitleBanner = require('../../../components/presentation/title-banner/title-banner.jsx');
require('./expect.scss');
var ConferenceExpectations = React.createClass({
render: function () {
return (
<div className="expect">
<TitleBanner>
<h1>
What to Expect
</h1>
<div className="title-icon">
<img src="/images/conference/expect/what-to-expect.png" alt="expect-image" />
</div>
</TitleBanner>
<section className="inner profile">
<FlexRow className="uneven">
<div className="short">
<img src="/images/conference/expect/mitch.jpg" />
<h4>Mitchel Resnick</h4>
<p>
Professor of Learning Research at the MIT Media Lab
</p>
</div>
<div className="long">
<h2>Welcome to Scratch@MIT 2016!</h2>
<p className="intro">
The Scratch community keeps growing and growing.{' '}
Young people around the world have shared more than{' '}
13 million projects in the Scratch online community{' '}
with 20,000 new projects every day.
</p>
<p className="intro">
But what excites us most is not the number of projects{' '}
but the diversity of projects. Take a look at the Scratch{' '}
website, and youll find an incredible variety of projects:{' '}
musical animations, virtual tours, science simulations,{' '}
interactive tutorials, and much more.
</p>
<p className="intro">
For us, this diversity of projects is an indication that{' '}
members of the Scratch community are developing their own{' '}
voices and identities through Scratch. They are learning{' '}
to express themselves creatively, to build on their interests,{' '}
and to share their ideas with others.
</p>
<p className="intro">
At this years Scratch@MIT conference, well celebrate the many{' '}
paths and many styles of Scratch, exploring the multiple ways{' '}
that people can create, share, and learn with Scratch.
</p>
<p className="intro">
We are planning a very participatory conference, with lots of{' '}
hands-on workshops and opportunities for collaboration and sharing.{' '}
We hope youll join us. Lets learn together!
</p>
</div>
</FlexRow>
</section>
<section className="keynote">
<div className="inner">
<div className="section-header">
<h2>Keynotes</h2>
</div>
<FlexRow>
<div className="card">
<div className="date">
<b>Thursday</b>
</div>
<h3>Scratch Conversations</h3>
<img src="/images/conference/expect/scratch-team.jpg" alt="Scratch Team Photo" />
<p>
<b>MIT Scratch Team</b>
<br />
<b>Mitchel Resnick (moderator)</b>
</p>
<p>
The MIT Scratch Team opens the conference with a series of{' '}
conversations, exploring new ideas, new directions, and new{' '}
strategies for supporting creative learning with Scratch.
</p>
</div>
<div className="card">
<div className="date">
<b>Friday</b>
</div>
<h3>Pathways to Participation</h3>
<img src="/images/conference/expect/mimi-nichole.jpg" alt="Mimi and Nicole" />
<p>
<b>Mimi Ito &amp; Nicole Pinkard</b>
<br />
<b>Ricarose Roque (moderator)</b>
</p>
<p>
How can we ensure that young people of all backgrounds and all{' '}
interests have opportunities to learn, grow, and thrive in todays{' '}
rapidly-changing digital society?
</p>
</div>
<div className="card">
<div className="date">
<b>Caturday</b>
</div>
<h3>Paws for Effect</h3>
<img src="/images/conference/expect/karen.jpg" alt="Mimi and Nicole" />
<p>
<b>Karen Brennan</b>
</p>
<p>
It's a dog chase cat kind of world out there. With the rapidly{' '}
changing landscape of the neighborhood, how can we ensure safe,{' '}
productive chipmunk hunting without fear of Ruffles McBarkston{' '}
down the street?
</p>
</div>
</FlexRow>
</div>
</section>
<section className="inner schedule">
<div className="section-header">
<div className="title">
<h2>Daily Schedules</h2>
<a href="/conference/schedule">
<Button>
<b>View Full Schedule</b>
</Button>
</a>
</div>
<p className="callout">
<img src="/svgs/conference/expect/aug3-icon.svg" alt="August 3rd Icon" />
<b>Wednesday at 6:00p</b>&nbsp;&nbsp;Early check-in and opening reception
</p>
</div>
<FlexRow>
<table>
<tbody>
<tr>
<th>
<img src="/svgs/conference/expect/aug4-icon.svg" alt="August 4th Icon" />
<h3>Thursday</h3>
</th>
</tr>
<tr>
<td>
<b>8:30a</b>
<p>Breakfast (provided)</p>
</td>
</tr>
<tr>
<td>
<b>9:30a</b>
<p>Keynote Presentation</p>
</td>
</tr>
<tr>
<td>
<b>11:00a</b>
<p>Morning Workshops</p>
</td>
</tr>
<tr>
<td>
<b>12:30p</b>
<p>Lunch (provided)</p>
</td>
</tr>
<tr>
<td>
<b>2:00p</b>
<p>Afternoon workshops</p>
</td>
</tr>
<tr>
<td>
<b>4:00p</b>
<p>Poster Sessions</p>
</td>
</tr>
<tr>
<td>
<b>7:00p</b>
<p>Self-organized dinner excursions</p>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>
<img src="/svgs/conference/expect/aug5-icon.svg" alt="August 5th Icon" />
<h3>Friday</h3>
</th>
</tr>
<tr>
<td>
<b>8:30a</b>
<p>Breakfast (provided)</p>
</td>
</tr>
<tr>
<td>
<b>9:30a</b>
<p>Keynote Presentation</p>
</td>
</tr>
<tr>
<td>
<b>11:00a</b>
<p>Morning Workshops, Panels, and Ignite Talks</p>
</td>
</tr>
<tr>
<td>
<b>12:00p</b>
<p>Lunch (provided)</p>
</td>
</tr>
<tr>
<td>
<b>1:30p</b>
<p>Early afternoon Workshops Panels and Ignite Talks</p>
</td>
</tr>
<tr>
<td>
<b>3:00p</b>
<p>Late afternoon Workshops, Panels and Ignite Talks</p>
</td>
</tr>
<tr>
<td>
<b>4:30p</b>
<p>Poster Session</p>
</td>
</tr>
<tr>
<td>
<b>6:30p</b>
<p>Conference Dinner</p>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>
<img src="/svgs/conference/expect/aug6-icon.svg" alt="August 6th Icon" />
<h3>Saturday</h3>
</th>
</tr>
<tr>
<td>
<b>8:30a</b>
<p>Breakfast (provided)</p>
</td>
</tr>
<tr>
<td>
<b>9:30a</b>
<p>Keynote Presentation</p>
</td>
</tr>
<tr>
<td>
<b>11:00a</b>
<p>Morning Workshops, Panels and Ignite Talks</p>
</td>
</tr>
<tr>
<td>
<b>12:00p</b>
<p>Lunch (provided)</p>
</td>
</tr>
</tbody>
</table>
</FlexRow>
</section>
</div>
);
}
});
ReactDOM.render(<Page><ConferenceExpectations /></Page>, document.getElementById('app'));

View file

@ -0,0 +1,173 @@
@import "../../../colors";
@import "../../../frameless";
@import "../../../typography";
#view {
.flex-row {
align-items: flex-start;
justify-content: space-between;
.card {
width: $cols4;
p {
text-align: left;
}
}
}
.profile {
img {
border-radius: 8em;
width: 80%;
}
@media only screen and (max-width: $tablet - 1) {
img {
width: 50%;
}
h2 {
margin: 20px 0;
text-align: center;
font-size: 1.7rem;
}
}
@media only screen and (max-width: $desktop - 1) {
.uneven {
flex-direction: column;
align-items: center;
}
}
}
.keynote {
background-color: $ui-purple;
padding: 48px 0 64px 0;
width: 100%;
h2,
h3,
b,
p {
color: $ui-white;
}
h2 {
margin-bottom: 32px;
}
h3 {
margin: 15px 0;
}
img {
width: 100%;
}
.date {
b {
border-radius: 20px;
background-color: $ui-orange;
padding: 5px 15px;
font-size: .85rem;
}
margin: 15px 0;
}
@media only screen and (max-width: $desktop - 1) {
.flex-row {
flex-direction: column;
align-items: center;
.card {
margin-top: 25px;
text-align: left;
}
}
}
}
.schedule {
.title {
display: flex;
justify-content: space-between;
align-items: center;
h2 {
margin: 0;
}
}
img {
width: 30px;
}
.callout {
display: flex;
padding: .85rem;
align-items: center;
img {
margin-right: 30px;
}
}
table {
width: $cols4;
th {
display: flex;
border-bottom: thin solid $ui-border;
padding: 2.5%;
align-items: center;
justify-content: flex-start;
h3 {
margin: 0;
}
img {
margin-right: 30px;
}
}
td {
display: flex;
border-bottom: thin solid $ui-border;
padding: 2.5%;
height: 60px;
align-items: center;
b {
width: 30%;
line-height: 1.7em;
}
p {
margin: 0;
width: 70%;
}
}
}
@media only screen and (max-width: $desktop - 1) {
.flex-row {
flex-direction: column;
align-items: center;
table {
margin-top: 50px;
width: $cols6;
text-align: left;
th {
justify-content: center;
}
}
}
}
}
}

View file

@ -0,0 +1,63 @@
var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('../../../components/presentation/forms/button.jsx');
var FlexRow = require('../../../components/presentation/flex-row/flex-row.jsx');
var Page = require('../../../components/container/page/conference/page.jsx');
var TitleBanner = require('../../../components/presentation/title-banner/title-banner.jsx');
require('./index.scss');
var ConferenceSplash = React.createClass({
type: 'ConferenceSplash',
render: function () {
return (
<div className="index">
<TitleBanner>
<h1>
Many Paths, Many Styles
</h1>
<h3>
Scratch Conference 2016 | Cambridge, MA, USA
</h3>
<p>
<a href="//scratchconference2016.eventbrite.com">
<Button>
Register Now
</Button>
</a>
</p>
</TitleBanner>
<section className="inner">
<FlexRow>
<div>
<h3>
<a href="/conference/expect">
<img src="/images/conference/expect/what-to-expect.png" alt="expect-image" />
What to Expect
</a>
</h3>
<p>
Learn more about participating in Scratch@MIT
</p>
</div>
<div>
<h3>
<a href="/conference/plan">
<img src="/images/conference/plan/plan-your-visit.png" alt="plan-image" />
Plan Your Visit
</a>
</h3>
<p>
Information on traveling, staying, and exploring around the Media Lab
</p>
</div>
</FlexRow>
</section>
</div>
);
}
});
ReactDOM.render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));

View file

@ -0,0 +1,54 @@
@import "../../../colors";
@import "../../../typography";
#view {
background-color: $ui-light-gray;
min-height: initial;
.title-banner {
margin-bottom: 0;
background-color: $ui-blue;
padding: 48px 0;
h1,
h3,
h4,
p {
margin: 0 auto;
padding: 5px 0;
text-align: center;
color: $type-white;
}
p {
margin-top: 3rem;
a {
button {
background-color: $ui-white;
color: $ui-blue;
font-size: 1rem;
}
}
}
}
.flex-row {
div {
width: 28%;
text-align: center;
img {
display: block;
margin: auto;
max-width: 65%;
}
@media only screen and (max-width: $tablet - 1) {
margin: .5rem;
width: 60%;
}
}
}
}

View file

@ -0,0 +1,330 @@
var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('../../../components/presentation/forms/button.jsx');
var FlexRow = require('../../../components/presentation/flex-row/flex-row.jsx');
var Page = require('../../../components/container/page/conference/page.jsx');
var TitleBanner = require('../../../components/presentation/title-banner/title-banner.jsx');
require('./plan.scss');
var ConferencePlan = React.createClass({
type: 'ConferencePlan',
getInitialState: function () {
return {
dorm: false
};
},
toggleQuestion: function (element) {
this.setState({element: !this.state[element]});
},
render: function () {
return (
<div className="plan">
<TitleBanner>
<h1>
Plan Your Visit
</h1>
<div className="title-icon">
<img src="/images/conference/plan/plan-your-visit.png" alt="plan-image" />
</div>
</TitleBanner>
<div className="inner">
<section className="lodging">
<FlexRow className="uneven">
<div className="long">
<h2>Lodging</h2>
<p>
MIT partners with several hotels in the area:
</p>
<FlexRow>
<FlexRow className="column">
<p>
<a href="http://bit.ly/P0kTKy">
Boston Marriott Cambridge
</a>
<br />
<span>(Kendall Square)</span>
</p>
<p>
<a href="http://bit.ly/2459rhL">
Holiday Inn Express and Suites
</a>
<br />
<span>(Lechmere Station)</span>
</p>
</FlexRow>
<FlexRow className="column">
<p>
<a href="http://bit.ly/1qbQNmO">
Residence Inn
</a>
<br />
<span>(Kendall Square)</span>
</p>
<p>
<a href="http://lemerid.ie/1Kt3TDF">
Le Meridien
</a>
<br />
<span>(between Central and Kendall Squares)</span>
</p>
</FlexRow>
</FlexRow>
<p>
To reserve a room, <b>call the hotel and request the{' '}
"MIT discount"</b> (subject to availability).
</p>
<p>
We also suggest the{' '}
<a href="http://bit.ly/1Ss6jKP">
Best Western Hotel Tria
</a>{' '}
located near Alewife Station on the Red Line subway line{' '}
(note: no MIT discount available), and home-share options such as Airbnb.{' '}
Find an extended list of accommodations{' '}
<a href="http://www.media.mit.edu/contact/accommodations">
here
</a>.
</p>
<p>
For those seeking a lower-cost option, there are limited single and double{' '}
dorms available at{' '}
<a href="http://www.northeastern.edu/">
Northeastern University
</a> in downtown Boston off of the Orange Line. To request a dorm room,{' '}
please email{' '}
<a href="mailto:conference@scratch.mit.edu">
conference@scratch.mit.edu
</a> with the subject line Conference dorm room before June 1. Please{' '}
note that the dorms are a half-hour commute from MIT via{' '}
<a href="http://www.mbta.com/schedules_and_maps/subway/">
public transportation
</a>.
</p>
</div>
<div className="short">
<img src="/images/conference/plan/lodging.png" alt="Lodging Illustration" />
</div>
</FlexRow>
</section>
<section className="transportation">
<FlexRow className="uneven">
<div className="long">
<h2>Transportation</h2>
<p>
The <a href="https://whereis.mit.edu/?go=E14">MIT Media Lab</a> is located{' '}
in Kendall Square, Cambridge, MA, a 5-minute walk from the Kendall/MIT stop of{' '}
MBTA Red Line subway. Cambridge is a bike-friendly, walkable city, and{' '}
<a href="http://www.media.mit.edu/contact/directions/public-transportation">
public transportation
</a> is encouraged. The MBTA provides free services from Boston Logan Airport{' '}
to the South Station subway stop as well.
</p>
<p>
<a href="http://www.media.mit.edu/contact/directions/parking">
Public parking facilities
</a> are available near campus for a fee.
</p>
<p>
Learn about additional{' '}
<a href="http://www.cityofboston.gov/transportation/modes.asp">
transportation options in Cambridge and Boston
</a>.
</p>
</div>
<div className="short">
<img src="/images/conference/plan/transportation.png"
alt="Transportation Illustration" />
</div>
</FlexRow>
</section>
<section className="explore">
<h2>Exploring Cambridge</h2>
<div>
<p>
Boston is a city full of history and diverse neighborhoods. Check some{' '}
of these attractions to experience the citys rich cultural offerings:
</p>
<ul>
<li>
<a href="http://www.trolleytours.com/boston/">
Beantown Trolley Tour
</a>
</li>
<li>
<a href="http://www.bostonducktours.com/">
Boston Duck Tours
</a>
</li>
<li>
<a href="http://www.bostonteapartyship.com/">
Boston Tea Party Ship & Museum
</a>
</li>
<li>
<a href="http://www.faneuilhallmarketplace.com/">
Faneuil Hall Marketplace
</a>
</li>
<li>
<a href="http://www.thefreedomtrail.org/">
Freedom Trail Walking Tours
</a>
</li>
<li>
<a href="http://www.hmnh.harvard.edu/">
Harvard Museum of Natural History
</a>
</li>
<li>
<a href="https://www.icaboston.org/">
Institute of Contemporary Art
</a>
</li>
<li>
<a href="http://www.gardnermuseum.org/home">
Isabella Stewart Gardner Museum
</a>
</li>
<li>
<a href="http://www.jfklibrary.org/">
John F. Kennedy Library & Museum
</a>
</li>
<li>
<a href="http://web.mit.edu/museum/">
MIT Museum
</a>
</li>
<li>
<a href="http://www.mfa.org/">
Museum of Fine Arts
</a>
</li>
<li>
<a href="http://www.mos.org/">
Museum Of Science
</a>
</li>
<li>
<a href="http://www.neaq.org/index.php">
New England Aquarium
</a>
</li>
<li>
<a href="https://ussconstitutionmuseum.org/">
USS Constitution
</a>
</li>
</ul>
</div>
<div>
<p>
Try some Scratch Team favorites for snacking and dining around the Lab:
</p>
<ul>
<li>
A4 Pizza
</li>
<li>
Abigails
</li>
<li>
Bailey and Sage
</li>
<li>
Clover
</li>
<li>
Commonwealth
</li>
<li>
Legal Seafood
</li>
<li>
Meadhall
</li>
<li>
Sebastians
</li>
<li>
Tatte
</li>
<li>
Za
</li>
</ul>
</div>
</section>
<section className="faq last">
<FlexRow className="uneven">
<div className="long">
<h2>FAQ</h2>
<dl>
<dt>
Who is this conference for?
</dt>
<dd>
The Scratch Conference is a gathering of adult educators, developers,{' '}
researchers, and others who focus on helping young people create and{' '}
learn with Scratch.
</dd>
<dt>
I missed the submission deadline. Can I still submit a proposal for{' '}
the conference?
</dt>
<dd>
Proposal submissions are now closed.
</dd>
<dt>
I can only attend one day of the conference. Do you offer single-day{' '}
registration?
</dt>
<dd>
We are not offering single-day tickets.
</dd>
<dt>
Can I receive a visa letter?
</dt>
<dd>
Yes. Contact us at conference@scratch.mit.edu and we can email you a letter.
</dd>
<dt>
What should I bring?
</dt>
<dd>
Plan to bring your personal device (laptops are preferred) and power cord.{' '}
Presenters should plan to bring all additional presentation materials (we{' '}
will provide projectors and screens). Breakfast and lunch will be served;{' '}
snacks and beverages will be available throughout the day.
</dd>
<dt>
How can I cancel my registration?
</dt>
<dd>
Contact us at a conference@scratch.mit.edu with your registration number,{' '}
and we'll take care of it for you.
</dd>
</dl>
</div>
<div className="short">
<h3>Have Additional Questions?</h3>
<a href="mailto:conference@scratch.mit.edu">
<Button>Email Us</Button>
</a>
</div>
</FlexRow>
</section>
</div>
</div>
);
}
});
ReactDOM.render(<Page><ConferencePlan /></Page>, document.getElementById('app'));

View file

@ -0,0 +1,113 @@
@import "../../../colors";
@import "../../../frameless";
#view {
section {
border-bottom: 2px solid $ui-border;
&.last {
border-bottom: 0;
}
}
.flex-row {
align-items: flex-start;
justify-content: space-between;
&.uneven {
img {
width: 100%;
}
@media only screen and (max-width: $tablet - 1) {
img {
width: 30%;
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
img {
width: 70%;
}
}
}
}
.lodging {
text-align: left;
@media only screen and (max-width: $desktop - 1) {
.uneven {
.short {
display: none;
}
}
}
}
.transportation {
.uneven {
align-items: center;
}
@media only screen and (max-width: $desktop - 1) {
.flex-row {
flex-direction: column-reverse;
}
}
}
.explore {
div {
margin-top: 30px;
}
ul {
display: flex;
max-height: 23rem;
flex-flow: column wrap;
justify-content: flex-start;
}
@media only screen and (max-width: $tablet - 1) {
ul {
max-height: 100%;
}
}
@media only screen and (max-width: $desktop - 1) {
div {
text-align: left;
}
}
}
.faq {
dl {
dt {
font-weight: bold;
}
dd {
margin: 8px 0 32px 0;
}
}
.short {
margin-top: 64px;
border: 2px solid $ui-border;
border-radius: 4px;
background-color: $ui-white;
padding: 16px;
text-align: center;
h3 {
margin: 0;
}
@media only screen and (max-width: $tablet - 1) {
margin-top: 0;
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

View file

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="46.53" height="49.15" viewBox="0 0 46.53 49.15"><title>aug3-icon</title><rect x="8.69" y="10" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(54.51 58.45) rotate(180)" fill="#231f20" stroke="#231f20" stroke-miterlimit="10" stroke-width="1.4" opacity="0.1"/><rect x="8.69" y="7.37" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(54.51 53.2) rotate(180)" fill="#fff" stroke="#22a0d1" stroke-miterlimit="10" stroke-width="1.4"/><path d="M8.69,7.37H53.81a0,0,0,0,1,0,0v8.36A6.77,6.77,0,0,1,47,22.5H15.46a6.77,6.77,0,0,1-6.77-6.77V7.37a0,0,0,0,1,0,0Z" transform="translate(54.51 23.2) rotate(180)" fill="#25aff4" stroke="#22a0d1" stroke-miterlimit="10" stroke-width="1.4"/><path d="M31.23,34.79a3.49,3.49,0,0,0,1.1-.26,2.11,2.11,0,0,0,.84-0.62,1.69,1.69,0,0,0,.33-1.09,1.89,1.89,0,0,0-.68-1.57,2.44,2.44,0,0,0-1.57-.55,2.2,2.2,0,0,0-1.85.81,3.12,3.12,0,0,0-.6,2H25.72a6.75,6.75,0,0,1,.44-2.24,5.11,5.11,0,0,1,1.11-1.74A5,5,0,0,1,29,28.44a6,6,0,0,1,2.23-.4,6.67,6.67,0,0,1,1.91.28,5.46,5.46,0,0,1,1.72.85,4.61,4.61,0,0,1,1.24,1.39,3.68,3.68,0,0,1,.48,1.89,3.77,3.77,0,0,1-.56,2,2.8,2.8,0,0,1-1.67,1.21v0A3.47,3.47,0,0,1,36.41,37a3.74,3.74,0,0,1,.75,2.34,4.92,4.92,0,0,1-.49,2.23,4.86,4.86,0,0,1-1.31,1.64,5.76,5.76,0,0,1-1.89,1,7.68,7.68,0,0,1-4.67,0,5.12,5.12,0,0,1-1.88-1.13,5,5,0,0,1-1.19-1.81,6.35,6.35,0,0,1-.4-2.46h3.07a4.58,4.58,0,0,0,.2,1.22,3,3,0,0,0,.52,1,2.48,2.48,0,0,0,.85.67,2.74,2.74,0,0,0,1.22.25A2.66,2.66,0,0,0,33,41.26a2.72,2.72,0,0,0,.4-3.22,2,2,0,0,0-.9-0.69,3.75,3.75,0,0,0-1.19-.25q-0.65,0-1.24,0V34.79A6.84,6.84,0,0,0,31.23,34.79Z" transform="translate(-7.99 -6.67)" fill="#6b6b6b"/><path d="M23.58,11.31l2.67,7.14H24.62l-0.54-1.59H21.41l-0.56,1.59H19.27L22,11.31h1.61Zm0.09,4.38-0.9-2.62h0l-0.93,2.62h1.85Z" transform="translate(-7.99 -6.67)" fill="#fff"/><path d="M33.12,17.9a3.3,3.3,0,0,1-2.24.71,3.29,3.29,0,0,1-2.25-.7,2.73,2.73,0,0,1-.79-2.16V11.31h1.57v4.44a3.16,3.16,0,0,0,0,.57,1.11,1.11,0,0,0,.65.84,1.81,1.81,0,0,0,.77.13A1.47,1.47,0,0,0,32,16.92a1.79,1.79,0,0,0,.32-1.17V11.31h1.57v4.44A2.71,2.71,0,0,1,33.12,17.9Z" transform="translate(-7.99 -6.67)" fill="#fff"/><path d="M40.5,18.39a2.64,2.64,0,0,1-1,.21A3.65,3.65,0,0,1,38,18.32a3.17,3.17,0,0,1-1.11-.79,3.47,3.47,0,0,1-.69-1.17A4.31,4.31,0,0,1,36,14.91a4.46,4.46,0,0,1,.24-1.49,3.57,3.57,0,0,1,.69-1.19,3.17,3.17,0,0,1,1.11-.8,3.61,3.61,0,0,1,1.47-.29,3.46,3.46,0,0,1,1.07.17,3,3,0,0,1,.93.48,2.62,2.62,0,0,1,1,1.87H41a1.51,1.51,0,0,0-.54-0.9,1.58,1.58,0,0,0-1-.3,1.83,1.83,0,0,0-.9.21,1.7,1.7,0,0,0-.6.55,2.43,2.43,0,0,0-.33.79,4,4,0,0,0-.1.91,3.67,3.67,0,0,0,.1.88,2.37,2.37,0,0,0,.33.76,1.7,1.7,0,0,0,.6.54,1.83,1.83,0,0,0,.9.21,1.7,1.7,0,0,0,1.21-.39,1.72,1.72,0,0,0,.5-1.15H39.59V14.59h3v3.86h-1l-0.16-.81A2.36,2.36,0,0,1,40.5,18.39Z" transform="translate(-7.99 -6.67)" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View file

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="46.53" height="49.15" viewBox="0 0 46.53 49.15"><defs><style>.cls-1{fill:#231f20;stroke:#231f20;opacity:0.1;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;stroke-width:1.4px;}.cls-2,.cls-5{fill:#fff;}.cls-2,.cls-3{stroke:#22a0d1;}.cls-3{fill:#25aff4;}.cls-4{fill:#6b6b6b;}</style></defs><title>aug4-icon</title><rect class="cls-1" x="3.94" y="5.25" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 53.7) rotate(180)"/><rect class="cls-2" x="3.94" y="2.62" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 48.45) rotate(180)"/><path class="cls-3" d="M3.94,2.62H49.06a0,0,0,0,1,0,0V11a6.77,6.77,0,0,1-6.77,6.77H10.71A6.77,6.77,0,0,1,3.94,11V2.62a0,0,0,0,1,0,0Z" transform="translate(49.76 18.45) rotate(180)"/><path class="cls-4" d="M20.54,35.84v-3l6.91-9.28h2.89v9.57h2.11v2.66H30.34v3.68H27.27V35.84H20.54Zm6.66-8.19-4.12,5.53h4.18V27.65H27.21Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M18.83,6.56L21.5,13.7H19.87l-0.54-1.59H16.66L16.09,13.7H14.52l2.7-7.14h1.61Zm0.09,4.38L18,8.32h0l-0.93,2.62h1.85Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M28.37,13.15a3.3,3.3,0,0,1-2.24.71,3.29,3.29,0,0,1-2.25-.7A2.73,2.73,0,0,1,23.08,11V6.56h1.57V11a3.16,3.16,0,0,0,0,.57,1.11,1.11,0,0,0,.65.84,1.81,1.81,0,0,0,.77.13,1.47,1.47,0,0,0,1.16-.37A1.79,1.79,0,0,0,27.6,11V6.56h1.57V11A2.71,2.71,0,0,1,28.37,13.15Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M35.75,13.64a2.64,2.64,0,0,1-1,.21,3.65,3.65,0,0,1-1.47-.29,3.17,3.17,0,0,1-1.11-.79,3.47,3.47,0,0,1-.69-1.17,4.31,4.31,0,0,1-.24-1.46,4.46,4.46,0,0,1,.24-1.49,3.57,3.57,0,0,1,.69-1.19,3.17,3.17,0,0,1,1.11-.8,3.61,3.61,0,0,1,1.47-.29,3.46,3.46,0,0,1,1.07.17,3,3,0,0,1,.93.48,2.62,2.62,0,0,1,1,1.87h-1.5A1.51,1.51,0,0,0,35.7,8a1.58,1.58,0,0,0-1-.3,1.83,1.83,0,0,0-.9.21,1.7,1.7,0,0,0-.6.55,2.43,2.43,0,0,0-.33.79,4,4,0,0,0-.1.91,3.67,3.67,0,0,0,.1.88,2.37,2.37,0,0,0,.33.76,1.7,1.7,0,0,0,.6.54,1.83,1.83,0,0,0,.9.21,1.7,1.7,0,0,0,1.21-.39,1.72,1.72,0,0,0,.5-1.15H34.84V9.84h3V13.7h-1l-0.16-.81A2.36,2.36,0,0,1,35.75,13.64Z" transform="translate(-3.24 -1.92)"/></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="46.53" height="49.15" viewBox="0 0 46.53 49.15"><defs><style>.cls-1{fill:#231f20;stroke:#231f20;opacity:0.1;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;stroke-width:1.4px;}.cls-2,.cls-5{fill:#fff;}.cls-2,.cls-3{stroke:#22a0d1;}.cls-3{fill:#25aff4;}.cls-4{fill:#6b6b6b;}</style></defs><title>aug5-icon</title><rect class="cls-1" x="3.94" y="5.25" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 53.7) rotate(180)"/><rect class="cls-2" x="3.94" y="2.62" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 48.45) rotate(180)"/><path class="cls-3" d="M3.94,2.62H49.06a0,0,0,0,1,0,0V11a6.77,6.77,0,0,1-6.77,6.77H10.71A6.77,6.77,0,0,1,3.94,11V2.62a0,0,0,0,1,0,0Z" transform="translate(49.76 18.45) rotate(180)"/><path class="cls-4" d="M25,26.27l-0.64,3.62,0,0A4,4,0,0,1,25.79,29a5.27,5.27,0,0,1,3.8.15,4.6,4.6,0,0,1,1.54,1.16,5.05,5.05,0,0,1,1,1.72,6.62,6.62,0,0,1,.33,2.1,5.49,5.49,0,0,1-.48,2.29,5.83,5.83,0,0,1-1.28,1.83,5.7,5.7,0,0,1-1.88,1.19,5.86,5.86,0,0,1-2.27.4,7.9,7.9,0,0,1-2.22-.31,5.52,5.52,0,0,1-1.88-.94A4.73,4.73,0,0,1,21.1,37a4.89,4.89,0,0,1-.51-2.19h3.23a2.64,2.64,0,0,0,.82,1.74,2.55,2.55,0,0,0,1.8.65,2.49,2.49,0,0,0,1.15-.26,2.72,2.72,0,0,0,.86-0.68,3.06,3.06,0,0,0,.55-1,3.48,3.48,0,0,0,.19-1.15A3.64,3.64,0,0,0,29,33a2.72,2.72,0,0,0-.55-1,2.56,2.56,0,0,0-.86-0.64,2.78,2.78,0,0,0-1.16-.23,2.86,2.86,0,0,0-1.41.31,3.3,3.3,0,0,0-1,1H21.09l1.57-8.8h8.89v2.66H25Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M18.83,6.56L21.5,13.7H19.87l-0.54-1.59H16.66L16.09,13.7H14.52l2.7-7.14h1.61Zm0.09,4.38L18,8.32h0l-0.93,2.62h1.85Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M28.37,13.15a3.3,3.3,0,0,1-2.24.71,3.29,3.29,0,0,1-2.25-.7A2.73,2.73,0,0,1,23.08,11V6.56h1.57V11a3.16,3.16,0,0,0,0,.57,1.11,1.11,0,0,0,.65.84,1.81,1.81,0,0,0,.77.13,1.47,1.47,0,0,0,1.16-.37A1.79,1.79,0,0,0,27.6,11V6.56h1.57V11A2.71,2.71,0,0,1,28.37,13.15Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M35.75,13.64a2.64,2.64,0,0,1-1,.21,3.65,3.65,0,0,1-1.47-.29,3.17,3.17,0,0,1-1.11-.79,3.47,3.47,0,0,1-.69-1.17,4.31,4.31,0,0,1-.24-1.46,4.46,4.46,0,0,1,.24-1.49,3.57,3.57,0,0,1,.69-1.19,3.17,3.17,0,0,1,1.11-.8,3.61,3.61,0,0,1,1.47-.29,3.46,3.46,0,0,1,1.07.17,3,3,0,0,1,.93.48,2.62,2.62,0,0,1,1,1.87h-1.5A1.51,1.51,0,0,0,35.7,8a1.58,1.58,0,0,0-1-.3,1.83,1.83,0,0,0-.9.21,1.7,1.7,0,0,0-.6.55,2.43,2.43,0,0,0-.33.79,4,4,0,0,0-.1.91,3.67,3.67,0,0,0,.1.88,2.37,2.37,0,0,0,.33.76,1.7,1.7,0,0,0,.6.54,1.83,1.83,0,0,0,.9.21,1.7,1.7,0,0,0,1.21-.39,1.72,1.72,0,0,0,.5-1.15H34.84V9.84h3V13.7h-1l-0.16-.81A2.36,2.36,0,0,1,35.75,13.64Z" transform="translate(-3.24 -1.92)"/></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="46.53" height="49.15" viewBox="0 0 46.53 49.15"><defs><style>.cls-1{fill:#231f20;stroke:#231f20;opacity:0.1;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;stroke-width:1.4px;}.cls-2,.cls-5{fill:#fff;}.cls-2,.cls-3{stroke:#22a0d1;}.cls-3{fill:#25aff4;}.cls-4{fill:#6b6b6b;}</style></defs><title>aug6-icon</title><rect class="cls-1" x="3.94" y="5.25" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 53.7) rotate(180)"/><rect class="cls-2" x="3.94" y="2.62" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 48.45) rotate(180)"/><path class="cls-3" d="M3.94,2.62H49.06a0,0,0,0,1,0,0V11a6.77,6.77,0,0,1-6.77,6.77H10.71A6.77,6.77,0,0,1,3.94,11V2.62a0,0,0,0,1,0,0Z" transform="translate(49.76 18.45) rotate(180)"/><path class="cls-4" d="M28.27,26.31a1.88,1.88,0,0,0-1.41-.59,2.1,2.1,0,0,0-1.44.51,3.73,3.73,0,0,0-.92,1.25,6.73,6.73,0,0,0-.5,1.58,9.92,9.92,0,0,0-.18,1.5l0,0a3.85,3.85,0,0,1,1.55-1.36,4.84,4.84,0,0,1,2-.41,4.79,4.79,0,0,1,2,.44,5,5,0,0,1,1.66,1.19A4.61,4.61,0,0,1,32,32.13a6.24,6.24,0,0,1,.3,1.89,6.43,6.43,0,0,1-.4,2.29,5.46,5.46,0,0,1-1.14,1.84A5.27,5.27,0,0,1,29,39.38a5.67,5.67,0,0,1-2.27.44,5.67,5.67,0,0,1-3-.72,5.51,5.51,0,0,1-1.89-1.88,7.73,7.73,0,0,1-1-2.63,16.34,16.34,0,0,1-.27-3,13.1,13.1,0,0,1,.34-3A8.63,8.63,0,0,1,22.09,26,6.14,6.14,0,0,1,24,24a5.28,5.28,0,0,1,2.89-.75,6,6,0,0,1,1.91.3,4.92,4.92,0,0,1,1.57.85,4.41,4.41,0,0,1,1.11,1.38,5.5,5.5,0,0,1,.57,1.89H29A2.75,2.75,0,0,0,28.27,26.31Zm-2.72,5.2a2.26,2.26,0,0,0-.81.65,2.85,2.85,0,0,0-.48.94,4,4,0,0,0-.16,1.13,3.55,3.55,0,0,0,.17,1.08,3,3,0,0,0,.5,1,2.46,2.46,0,0,0,.81.67,2.31,2.31,0,0,0,1.09.25,2.07,2.07,0,0,0,1-.25,2.51,2.51,0,0,0,.76-0.66A2.86,2.86,0,0,0,29,35.34a3.64,3.64,0,0,0,.16-1.07,4.11,4.11,0,0,0-.15-1.1,3.08,3.08,0,0,0-.44-1,2.29,2.29,0,0,0-.76-0.68,2.18,2.18,0,0,0-1.08-.26A2.54,2.54,0,0,0,25.56,31.51Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M18.83,6.56L21.5,13.7H19.87l-0.54-1.59H16.66L16.09,13.7H14.52l2.7-7.14h1.61Zm0.09,4.38L18,8.32h0l-0.93,2.62h1.85Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M28.37,13.15a3.3,3.3,0,0,1-2.24.71,3.29,3.29,0,0,1-2.25-.7A2.73,2.73,0,0,1,23.08,11V6.56h1.57V11a3.16,3.16,0,0,0,0,.57,1.11,1.11,0,0,0,.65.84,1.81,1.81,0,0,0,.77.13,1.47,1.47,0,0,0,1.16-.37A1.79,1.79,0,0,0,27.6,11V6.56h1.57V11A2.71,2.71,0,0,1,28.37,13.15Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M35.75,13.64a2.64,2.64,0,0,1-1,.21,3.65,3.65,0,0,1-1.47-.29,3.17,3.17,0,0,1-1.11-.79,3.47,3.47,0,0,1-.69-1.17,4.31,4.31,0,0,1-.24-1.46,4.46,4.46,0,0,1,.24-1.49,3.57,3.57,0,0,1,.69-1.19,3.17,3.17,0,0,1,1.11-.8,3.61,3.61,0,0,1,1.47-.29,3.46,3.46,0,0,1,1.07.17,3,3,0,0,1,.93.48,2.62,2.62,0,0,1,1,1.87h-1.5A1.51,1.51,0,0,0,35.7,8a1.58,1.58,0,0,0-1-.3,1.83,1.83,0,0,0-.9.21,1.7,1.7,0,0,0-.6.55,2.43,2.43,0,0,0-.33.79,4,4,0,0,0-.1.91,3.67,3.67,0,0,0,.1.88,2.37,2.37,0,0,0,.33.76,1.7,1.7,0,0,0,.6.54,1.83,1.83,0,0,0,.9.21,1.7,1.7,0,0,0,1.21-.39,1.72,1.72,0,0,0,.5-1.15H34.84V9.84h3V13.7h-1l-0.16-.81A2.36,2.36,0,0,1,35.75,13.64Z" transform="translate(-3.24 -1.92)"/></svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="256.2px" height="95.6px" viewBox="0 0 256.2 95.6" style="enable-background:new 0 0 256.2 95.6;" xml:space="preserve">
<g>
<g>
<path style="fill:#FFFFFF;" d="M233.4,93.3c-3.1,0.2-5,0.5-5.9,0.6c-1.6,0.6-4.9,1.7-9.1,1.7c-5.3,0-10.5-1.8-14.6-5.1l-3.1,0
c-1.1,0-2.1-0.1-3.1-0.3c-4.4,1.5-8.2,1.5-10.4,1.6l-0.9,0c-5.5,0.3-10.8-0.9-15.5-3c-2.2,0.6-4.4,1-6.8,1l-14.4,0.2
c-6.5,0.1-12.5-2.5-17-6.7c-1.9,0-3.7-0.2-5.5-0.7c-2.5,2.8-5.6,5.1-9.2,6.9c-7.3,3.5-15.6,3.7-23.4,0.6c-0.9-0.4-1.8-0.8-2.7-1.2
l-8.8,1.3c-0.2,0-0.3,0.1-0.5,0.1c-0.8,0.1-1.6,0.1-2.3,0.2c-1,0.6-1.9,1-2.8,1.5c-6,2.8-11.2,2.8-13.7,2.9l-0.8,0
c-0.4,0-0.8,0-1.2,0c-6.7,0-13.1-1.9-18.4-5.3c-1.6,0.4-3.3,0.7-5,0.8c-3.6,2.4-7.8,3.9-12.2,4.2c-0.4,0-1,0-1.5,0
C11.8,94.5,1.1,84.7,0.2,72v-0.1c0-0.2,0-0.3,0-0.5c-0.1-2-0.3-6.1,0-10.7c0.1-2.2,0.2-5.9,0.2-6.4v-0.2c0.1-3.2,0.8-6.4,2-9.3
c-0.3-3-0.2-6.1,0.2-9.3l0.1-1c0.4-2.9,1.1-8.2,4-13.6c4.9-9.3,14.1-15,24.8-15.2c3.3-1.6,6.9-2.5,10.7-2.5c0.4,0,0.7,0,1.1,0
C51,3.6,57.9,7.6,62.1,13.7c3.5-3,7.7-5,12.4-5.7c9.1-1.3,17-1.4,23.7-0.4c3.5-3.1,8-5.3,12.8-5.9l10-1.4c1.4-0.2,2.6-0.2,3.4-0.2
c6,0,11.7,2.2,16.1,6.1c0.2,0,0.4,0,0.7,0l14.8-0.3c6.2-0.1,11.8-0.4,13-0.5c0.4,0,0.9-0.1,1.3-0.1c0.3,0,0.6,0,0.9,0
c5.6,0,11.1,2,15.4,5.5c4.1-3.1,9.2-4.8,14.6-4.8h5.1c3.8-2.4,8.2-3.8,12.7-3.9l12.5-0.2h0.2c13.2,0,24.1,10.7,24.4,23.9
c0.1,6.1-2.1,11.8-5.9,16.3l0.1,11.2c3.4,3.9,5.5,8.9,5.8,14.2C257,80.8,246.8,92.4,233.4,93.3z"/>
</g>
<path style="fill:#F9A83A;" d="M232.5,79.6c-4.9,0.3-8,0.9-8.8,1.1l-0.5,0.2c-1.1,0.4-2.7,1-4.8,1c-2.5,0-5-0.9-6.8-2.7
c-0.8-0.7-1.4-1.4-1.9-2.3l-8.8-0.1c-1.6,0-3-0.4-4.4-1c-0.5,0.3-1.1,0.5-1.6,0.8c-3.2,1.5-5.9,1.5-7.9,1.5l-1.2,0
c-0.2,0-0.5,0-0.7,0c-5.8,0-10.4-2.1-13.7-5.3l0,0c-2,2-4.7,3.2-7.6,3.2l-14.4,0.2c-5.2,0-9.5-3.7-10.5-8.7
c-1.8,1.2-3.9,1.9-6.1,1.9c-2.3,0-4.5-0.7-6.4-2.1c-0.4-0.3-0.8-0.6-1.1-1c-1.3,0.6-2.8,0.9-4.4,0.9h-0.6c-1.7,4.7-4.3,7.8-8.4,9.7
c-2,1-4.1,1.4-6.3,1.4c-2,0-4.1-0.4-6.2-1.3c-1.9-0.7-3.5-1.9-4.6-3.1c-0.8,0.3-1.6,0.6-2.5,0.7l-11.3,1.7
c-0.5,0.1-1.1,0.1-1.5,0.1c-1,0-2-0.1-3-0.4c-1.6,1.5-3.4,2.5-5,3.2c-3.2,1.5-5.9,1.5-7.9,1.5l-1.2,0c-0.3,0-0.5,0-0.7,0
c-7,0-12.3-3-15.6-7.4c-3.2,1.9-6.9,3-10.6,3c-0.8,0-1.6-0.1-2.4-0.2c-0.2,0.2-0.3,0.4-0.5,0.6c-1.9,2.1-4.5,3.4-7.4,3.6
c-0.2,0-0.4,0-0.7,0c-5.6,0-10.3-4.4-10.7-10l0-0.2c-0.1-1.8-0.2-5.3,0-9.2c0.2-2.6,0.2-6.9,0.2-7v0c0.1-2.7,1.1-5.1,2.7-6.9
c-0.8-2.8-1.1-6.2-0.6-10.2l0.1-0.6c0.3-2.3,0.7-5.9,2.5-9.2c2.7-5.1,7.6-8,13.5-8c0.4,0,0.7,0,1.1,0c0.5,0,1.1,0.1,1.7,0.2
c1.9-1.7,4.4-2.7,7.1-2.7l0.1,0c5.9,0.1,10.6,4.9,10.6,10.8v0.1c0,0-0.1,1.9-0.2,4.4c2-0.9,4.2-1.3,6.5-1.3c1.1,0,2.1,0.1,3,0.3
c1.6-1.8,3.7-3,6.1-3.5c0.3-0.7,0.7-1.3,1.1-1.9c1.7-2.3,4.2-3.8,7.1-4.2c2.3-0.3,7.1-0.9,12.2-0.9c6.3,0,11.4,0.9,15.2,2.8
c1-4.2,4.5-7.6,9-8.2l10.1-1.4c0.5-0.1,1-0.1,1.4-0.1c2.9,0,5.8,1.2,7.8,3.4c0.7,0.8,1.8,2.3,2.4,3.7l0.5,1.2
c1.8-1.3,4-2.1,6.3-2.1l15-0.3c7.3-0.1,13.8-0.6,14.1-0.6l0.2,0c0.2,0,0.5,0,0.7,0c2.8,0,5.6,1.2,7.6,3.2c1.6,1.6,2.6,3.6,2.9,5.9
c0.3,0,0.6,0,0.9,0c1.1,0,2.1,0.1,3,0.2c1.6-1.8,3.8-3.1,6.4-3.5c1.9-3.1,5.3-5.1,9.1-5.1h10.1c1.9-2.3,4.8-3.8,8.1-3.9l12.4-0.2
c5.8,0,10.6,4.7,10.7,10.5c0,4.3-2.4,8-5.9,9.7c0.1,11.6,0.1,18.9,0.1,23.8c3.3,1.7,5.6,5,5.8,8.8
C242.9,74.2,238.4,79.3,232.5,79.6z"/>
<polygon style="fill:#F9A83A;" points="125.2,33 122.3,47.1 130.4,45.8 "/>
<path style="fill:#FFFFFF;" d="M32.5,46.6c-2.7-0.4-4.1-2.2-3.4-7.8l0.1-0.7c0.6-4.8,1.1-5.9,3.4-5.8c0.7,0,1.5,0.5,2.3,1.1
c0.7,0.8,2.3,1.9,3.3,4.1c0.7,1.6,0.9,2.6,1,3.7l0.1,1.4v0c0.2,0.9,0.9,1.7,1.9,1.9c1.3,0.2,2.5-0.6,2.7-1.9
c0-0.2,0.6-14.8,0.6-15.1c0-1.3-1-2.3-2.3-2.4c-1.3,0-2.4,1-2.4,2.3c0,0,0,2.1,0,4.1c-1.9-2-4.2-3.8-6.9-4
c-7.1-0.4-7.9,6.1-8.3,9.9l-0.1,0.7c-1,7.4,1.5,12.1,7.3,13c6.3,1,10.6,2.4,10.6,6.3c0,1.5-0.8,3.1-2.2,4.3c-1.7,1.4-3.9,2.1-6,1.7
c-0.7-0.1-1.3-0.3-1.9-0.5c-0.8-0.5-2.9-1.7-4-3.2c-0.9-1.2-1.2-3.2-1.3-4.4c0-0.6,0-0.9,0-1c0-1.3-1-2.4-2.3-2.4
c-1.3,0-2.4,1-2.4,2.3c0,0-0.1,4.6-0.2,7.4c-0.2,4.5,0,8.2,0,8.4c0.1,1.3,1.2,2.3,2.5,2.2c1.3-0.1,2.3-1.2,2.2-2.5
c0,0-0.1-1.9-0.1-4.4c1.7,1.1,4,2.2,6.7,2.6c3.5,0.6,7.1-0.4,9.8-2.8c2.5-2.1,3.9-5,3.8-7.9C47,48.9,37.2,47.4,32.5,46.6"/>
<path style="fill:#FFFFFF;" d="M97.8,39.8c-0.2,0.3-0.8,0.9-1.4,1.3c-0.6,0.3-1.4,0.6-2.1,0.8L93,42.3c-1.7,0.6-3.9,1.2-6.2,1.6
l0-10.7c6.2-0.2,11.6,0.5,12.7,2.3c0.1,0.2,0.1,0.4,0.1,0.6C99.6,37,99,38.3,97.8,39.8 M111.1,60.8c-1.2-0.4-2.6,0.3-2.9,1.6
c-0.9,2.8-1.5,2.9-2,3.1c-0.5,0.2-1.1,0.2-2.1-0.2c-0.1-0.1-0.6-0.6-0.8-1.2c-0.4-0.8-0.8-4-0.9-5.9c-0.2-6.9-1.4-10.7-3.3-12.8
c1.3-0.9,2.3-2,2.4-2.1l0-0.1c2.9-3.7,3.6-6.9,2-9.6c-3.8-6.5-20.7-4.6-25.8-3.9c-1.3,0.2-2.2,1.4-2,2.7c0.2,1.3,1.4,2.2,2.7,2
c1.2-0.2,2.4-0.3,3.7-0.4l0,10.9c-0.4,0-0.8,0-1.2,0c-1.3,0-2.4,1-2.4,2.3c0,1.3,1,2.4,2.4,2.4c0.4,0,0.8,0,1.2,0l0.1,13.7L79,63.8
c-1.3,0.2-2.2,1.4-2,2.7c0.2,1.3,1.4,2.2,2.7,2L91,66.8c1.3-0.2,2.2-1.4,2-2.7c-0.2-1.3-1.4-2.2-2.7-2l-3.4,0.5l-0.1-13.5
c2.2-0.4,4.4-0.8,6.2-1.4c0,0,0.5-0.1,0.8,0c0.9,0.1,1.5,0.3,2,1.1c0.8,1.1,1.7,3.6,1.8,9.4c0,1.1,0.3,5.8,1.3,7.8
c0.3,0.6,1.4,2.8,3.4,3.6c1.4,0.6,3.6,1.2,5.9,0.1c2.1-1,3.4-2.5,4.5-6C113.1,62.5,112.4,61.2,111.1,60.8"/>
<path style="fill:#FFFFFF;" d="M195.6,53.4c-1.3,0-2.3,1.1-2.3,2.3l0.1,0.8c0,0.1-0.1,2-0.1,2.2c-0.1,1-0.5,2.5-0.8,3.1
c-0.3,0.6-0.7,1.1-1.4,1.8c-0.4,0.4-1.3,0.8-1.8,1.1c-0.6,0.3-1.2,0.3-2.5,0.3l-1.4,0c-6.1,0.2-6.9-4.8-7-5.9l-0.1-4l0.1-6.3
c0.3-4,1.2-6.8,2.7-7.6c1.1-0.7,2.9-0.5,5.4,0.6c3.1,1.3,5.2,4.7,5.3,4.7c0.6,0.9,1.6,1.3,2.6,1c1-0.3,1.7-1.2,1.7-2.2V35.2
c0-1.3-1.1-2.3-2.3-2.3c-1.3,0-2.4,1-2.4,2.3v4.2c-0.9-0.7-2-1.4-3.1-1.8c-1.5-0.6-6-2.5-9.7-0.2c-2.9,1.8-4.5,5.5-4.9,11.3
l-0.1,6.6l0.1,4.3c0.2,3.7,3,10.5,11.8,10.3l1.3,0c1.6,0,3,0,4.5-0.8c1.1-0.5,2.4-1.2,3.3-2.2c0.7-0.8,1.3-1.5,2-2.6
c0.9-1.6,1.3-4.3,1.4-4.8l0.1-2.7l-0.1-1C198,54.4,197,53.4,195.6,53.4"/>
<path style="fill:#FFFFFF;" d="M234.2,68.8c-0.1-1.3-1.2-2.3-2.5-2.2c-0.9,0.1-2,0.1-3.3,0.3c0-4,0-12.1-0.2-38.4l3.6-0.1
c1.3,0,2.3-1.1,2.3-2.4c0-1.3-1.1-2.3-2.4-2.3L219.5,24c-1.3,0-2.3,1.1-2.3,2.4c0,1.3,1.1,2.3,2.4,2.3l3.9-0.1
c0,5.1,0.1,10.7,0.1,16.3l-13.8,2.3l0-14.6h3.8c1.3,0,2.3-1,2.3-2.4c0-1.3-1-2.4-2.3-2.4h-12.3c-1.3,0-2.4,1.1-2.4,2.4
c0,1.3,1,2.4,2.4,2.4h3.9l0,31.3l-4-0.1c-1.3,0-2.4,1-2.4,2.3c0,1.3,1,2.4,2.3,2.4l12.7,0.2c1.3,0,2.4-1,2.4-2.3
c0-1.3-1-2.4-2.3-2.4l-4-0.1l0-12l13.9-2.3c0,8.9,0.1,14.8,0.1,17.9c-3.2,0.6-5.3,0.9-6.7,2.3c-0.8,1-0.7,2.4,0.2,3.3
c1,0.9,2,0.3,3.3-0.1l0,0c1.4-0.6,5.8-1.3,11.4-1.7C233.3,71.2,234.3,70.1,234.2,68.8"/>
<path style="fill:#FFFFFF;" d="M122.3,47.1l2.9-14.1l5.2,12.8L122.3,47.1z M142.9,50.9c-0.7,0.2-2,0.9-4.1,1.8l-3-7.4l-8.8-21.4
c-0.1-0.2-0.6-1-0.7-1.1c-0.5-0.6-1.3-0.8-2-0.7l-10.1,1.4c-1.3,0.2-2.2,1.4-2,2.7c0.2,1.3,1.4,2.2,2.6,2c0,0,3.8-0.5,6.8-1
c-0.9,4.3-4.3,21.8-5.4,27.1l-6.8-0.3c-1.3-0.1-2.4,1-2.5,2.2c-0.1,1.3,0.9,2.4,2.2,2.5l11.7,0.6c1.3,0.1,2.4-0.9,2.5-2.2
c0.1-1.3-0.7-2.5-2.4-2.5l0.5-3.6l10.9-1.8l2.3,5.7c-1.8,1-2.9,1.7-3.7,2.8c-0.8,1-0.6,2.5,0.5,3.3c1,0.8,2.5,0.6,3.3-0.5
c1-1.4,5.5-3.5,9.9-5.1c1.2-0.4,1.8-1.8,1.4-3C145.4,51.1,144.1,50.4,142.9,50.9"/>
<path style="fill:#FFFFFF;" d="M171.1,27.2c-0.1,0-7,0.5-14.7,0.7l-15,0.2c-0.7,0-1.3,0.3-1.8,0.8c-0.4,0.5-0.6,1.2-0.5,1.9
l1.8,11.6c0.2,1.3,1.4,2.2,2.7,2c1.2-0.2,2-1.2,2-2.3c0-0.1-0.9-6-1.4-9.2c0.6,0,9.9-0.2,9.9-0.2l0.1,30.7l-4.9,0.1
c-1.3,0-2.3,1.1-2.3,2.4c0,1.3,1.1,2.3,2.4,2.3l14.3-0.2c1.3,0,2.3-1.1,2.3-2.4c0-1.3-1.1-2.3-2.4-2.3l-4.7,0.1l0-30.7
c4-0.1,7.5-0.3,9.9-0.4c-0.1,1.9-0.2,3.4-0.2,4.5c0,2.5,0.3,3,0.5,3.3c0.6,1.1,1.9,1.4,3,0.8c0.9-0.4,1.3-1.4,1.3-2.3
c0,0,0-5.3,0.3-8.7c0-0.7-0.2-1.4-0.7-1.9C172.4,27.4,171.8,27.2,171.1,27.2"/>
<path style="fill:#FFFFFF;" d="M72.1,55.9c-1.3,0-2.3,1.1-2.3,2.3l0.1,1.3c0,0.1,0,1.9,0,2.2c-0.2,1-0.5,2.5-0.8,3.1
c-0.4,0.6-0.7,1.1-1.4,1.8c-0.4,0.4-1.3,0.9-1.8,1.1c-0.6,0.3-1.2,0.3-2.5,0.3l-1.4,0c-6.1,0.2-6.9-4.8-7-5.9l-0.1-4l0.1-6.3
c0.3-4,1.2-6.8,2.7-7.6c1.1-0.7,2.9-0.5,5.4,0.6c3.1,1.3,5.2,4.7,5.3,4.7c0.5,0.9,1.6,1.3,2.6,1c1-0.3,1.7-1.2,1.7-2.2V38.1
c0-1.3-1.1-2.3-2.4-2.3c-1.3,0-2.4,1-2.4,2.3v4.2c-0.9-0.7-2-1.4-3.1-1.8c-1.5-0.6-6-2.5-9.7-0.2c-2.9,1.8-4.5,5.5-4.9,11.3l0,0.1
l-0.1,6.4v0.1l0.1,4.2l0,0.1c0.2,3.7,3,10.5,11.8,10.3l1.3,0c1.6,0,2.9,0,4.5-0.8c1.1-0.5,2.4-1.2,3.3-2.2c0.7-0.8,1.3-1.6,1.9-2.6
c0.9-1.6,1.3-4.3,1.4-4.8l0.1-2.8l-0.1-1.3C74.5,56.9,73.4,55.9,72.1,55.9"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.3 KiB