diff --git a/src/_colors.scss b/src/_colors.scss index 2133cba32..6e5d66e26 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -1,6 +1,7 @@ /* UI Primary Colors */ $ui-blue: hsla(200, 90, 55, 1); // #25AFF4 $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-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3 diff --git a/src/components/container/footer/conference/footer.jsx b/src/components/container/footer/conference/footer.jsx new file mode 100644 index 000000000..ee97a6dc5 --- /dev/null +++ b/src/components/container/footer/conference/footer.jsx @@ -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 ( + +
+

Collaborators

+ +
  • + + MIT Office of Digital Learning + +
    • +
  • + + Scratch Foundation + +
    • +
  • + + LEGO Foundation + +
    • +
  • + + Google + +
    • +
  • + + Siegel Family Endowment + +
    • +     +
    + +
    +

    Scratch Family

    + + +
  • + Scratch +
    • +
  • + ScratchJr +
    • +     + +
  • + Scratch Foundation +
    • +
  • + ScratchEd +
    • +     + +
  • + Scratch Day +
    • +     +     +

    + Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab. +

    +
    +
    +
    +

    Contact

    +

    + + Email Us + +

    +
    +
    + +
  • + + scratch twitter + +
    • +
  • + + scratch facebook + +
    • +
  • + + scratch foundation blog + +
    • +     +
    +
    +     +     + ); + } +}); + +module.exports = ConferenceFooter; diff --git a/src/components/container/footer/conference/footer.scss b/src/components/container/footer/conference/footer.scss new file mode 100644 index 000000000..7c5d4932d --- /dev/null +++ b/src/components/container/footer/conference/footer.scss @@ -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; + } + } + } + } +} diff --git a/src/components/container/navigation/conference/navigation.jsx b/src/components/container/navigation/conference/navigation.jsx new file mode 100644 index 000000000..754e4f338 --- /dev/null +++ b/src/components/container/navigation/conference/navigation.jsx @@ -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 ( + + + + ); + } +}); + +module.exports = Navigation; diff --git a/src/components/container/navigation/conference/navigation.scss b/src/components/container/navigation/conference/navigation.scss new file mode 100644 index 000000000..0e1325fb3 --- /dev/null +++ b/src/components/container/navigation/conference/navigation.scss @@ -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; + } + } + } +} diff --git a/src/components/container/page/conference/page.jsx b/src/components/container/page/conference/page.jsx new file mode 100644 index 000000000..aee9b3ff7 --- /dev/null +++ b/src/components/container/page/conference/page.jsx @@ -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 ( +
    + +
    + {this.props.children} +
    + +
    + ); + } +}); + +module.exports = Page; diff --git a/src/components/container/page/conference/page.scss b/src/components/container/page/conference/page.scss new file mode 100644 index 000000000..d44ca06ae --- /dev/null +++ b/src/components/container/page/conference/page.scss @@ -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%; + } + } + } + } +} diff --git a/src/components/presentation/accordion/accordion.jsx b/src/components/presentation/accordion/accordion.jsx new file mode 100644 index 000000000..e6e921a7b --- /dev/null +++ b/src/components/presentation/accordion/accordion.jsx @@ -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 ( +
    + + {this.props.title} + + + {this.props.content} + +
    + ); + } +}); + +module.exports = Accordion; diff --git a/src/components/presentation/accordion/accordion.scss b/src/components/presentation/accordion/accordion.scss new file mode 100644 index 000000000..6d5c734e5 --- /dev/null +++ b/src/components/presentation/accordion/accordion.scss @@ -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; + } + } +} diff --git a/src/components/presentation/navigation/navigation.scss b/src/components/presentation/navigation/navigation.scss index f8449bbcd..da0233cd6 100644 --- a/src/components/presentation/navigation/navigation.scss +++ b/src/components/presentation/navigation/navigation.scss @@ -44,6 +44,22 @@ height: 100%; align-self: flex-start; + &.right { + float: right; + margin-left: auto; + align-self: flex-end; + + .ie9 & { + float: none; + } + + a { + &:hover { + background-color: $active-gray; + } + } + } + .ie9 & { display: table-cell; 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; - } - } - } } diff --git a/src/components/presentation/title-banner/title-banner.scss b/src/components/presentation/title-banner/title-banner.scss index a368a71df..03c15c4a8 100644 --- a/src/components/presentation/title-banner/title-banner.scss +++ b/src/components/presentation/title-banner/title-banner.scss @@ -14,8 +14,11 @@ p { margin: 0 auto; padding: 5px 0; - max-width: 500px; text-align: center; color: $type-white; } + + p { + max-width: 500px; + } } diff --git a/src/routes.json b/src/routes.json index 2e63ea616..3416549e1 100644 --- a/src/routes.json +++ b/src/routes.json @@ -53,6 +53,24 @@ "view": "wedo2/wedo2", "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", "pattern": "^/info/donate", diff --git a/src/views/conference/expect/expect.jsx b/src/views/conference/expect/expect.jsx new file mode 100644 index 000000000..7b1119617 --- /dev/null +++ b/src/views/conference/expect/expect.jsx @@ -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 ( +
    + +

    + What to Expect +

    +
    + expect-image +
    +     +
    + +
    + +

    Mitchel Resnick

    +

    + Professor of Learning Research at the MIT Media Lab +

    +
    +
    +

    Welcome to Scratch@MIT 2016!

    +

    + 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. +

    +

    + But what excites us most is not the number of projects{' '} + but the diversity of projects. Take a look at the Scratch{' '} + website, and you’ll find an incredible variety of projects:{' '} + musical animations, virtual tours, science simulations,{' '} + interactive tutorials, and much more. +

    +

    + 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. +

    +

    + At this year’s Scratch@MIT conference, we’ll celebrate the many{' '} + paths and many styles of Scratch, exploring the multiple ways{' '} + that people can create, share, and learn with Scratch. +

    +

    + We are planning a very participatory conference, with lots of{' '} + hands-on workshops and opportunities for collaboration and sharing.{' '} + We hope you’ll join us. Let’s learn together! +

    +
    +     +
    +
    +
    +
    +

    Keynotes

    +
    + +
    +
    + Thursday +
    +

    Scratch Conversations

    + Scratch Team Photo +

    + MIT Scratch Team +
    + Mitchel Resnick (moderator) +

    +

    + 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. +

    +
    +
    +
    + Friday +
    +

    Pathways to Participation

    + Mimi and Nicole +

    + Mimi Ito & Nicole Pinkard +
    + Ricarose Roque (moderator) +

    +

    + How can we ensure that young people of all backgrounds and all{' '} + interests have opportunities to learn, grow, and thrive in today’s{' '} + rapidly-changing digital society? +

    +
    +
    +
    + Caturday +
    +

    Paws for Effect

    + Mimi and Nicole +

    + Karen Brennan +

    +

    + 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? +

    +
    +     +
    +
    +
    +
    +
    +

    Daily Schedules

    + + + +
    +

    + August 3rd Icon + Wednesday at 6:00p – Early check-in and opening reception +

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + August 4th Icon +

    Thursday

    +
    + 8:30a +

    Breakfast (provided)

    +
    + 9:30a +

    Keynote Presentation

    +
    + 11:00a +

    Morning Workshops

    +
    + 12:30p +

    Lunch (provided)

    +
    + 2:00p +

    Afternoon workshops

    +
    + 4:00p +

    Poster Sessions

    +
    + 7:00p +

    Self-organized dinner excursions

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + August 5th Icon +

    Friday

    +
    + 8:30a +

    Breakfast (provided)

    +
    + 9:30a +

    Keynote Presentation

    +
    + 11:00a +

    Morning Workshops, Panels, and Ignite Talks

    +
    + 12:00p +

    Lunch (provided)

    +
    + 1:30p +

    Early afternoon Workshops Panels and Ignite Talks

    +
    + 3:00p +

    Late afternoon Workshops, Panels and Ignite Talks

    +
    + 4:30p +

    Poster Session

    +
    + 6:30p +

    Conference Dinner

    +
    + + + + + + + + + + + + + + + + + + +
    + August 6th Icon +

    Saturday

    +
    + 8:30a +

    Breakfast (provided)

    +
    + 9:30a +

    Keynote Presentation

    +
    + 11:00a +

    Morning Workshops, Panels and Ignite Talks

    +
    + 12:00p +

    Lunch (provided)

    +
    +     +
    +
    + ); + } +}); + +ReactDOM.render(, document.getElementById('app')); diff --git a/src/views/conference/expect/expect.scss b/src/views/conference/expect/expect.scss new file mode 100644 index 000000000..2020be8d6 --- /dev/null +++ b/src/views/conference/expect/expect.scss @@ -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; + } + } + } + } + } +} diff --git a/src/views/conference/index/index.jsx b/src/views/conference/index/index.jsx new file mode 100644 index 000000000..7763ca3db --- /dev/null +++ b/src/views/conference/index/index.jsx @@ -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 ( +
    + +

    + Many Paths, Many Styles +

    +

    + Scratch Conference 2016 | Cambridge, MA, USA +

    +

    + + + +

    +     +
    + +
    +

    + + expect-image + What to Expect + +

    +

    + Learn more about participating in Scratch@MIT +

    +
    +
    +

    + + plan-image + Plan Your Visit + +

    +

    + Information on traveling, staying, and exploring around the Media Lab +

    +
    +     +
    +
    + ); + } +}); + +ReactDOM.render(, document.getElementById('app')); diff --git a/src/views/conference/index/index.scss b/src/views/conference/index/index.scss new file mode 100644 index 000000000..b81cfcbea --- /dev/null +++ b/src/views/conference/index/index.scss @@ -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%; + } + } + } +} diff --git a/src/views/conference/plan/plan.jsx b/src/views/conference/plan/plan.jsx new file mode 100644 index 000000000..3bb12c740 --- /dev/null +++ b/src/views/conference/plan/plan.jsx @@ -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 ( +
    + +

    + Plan Your Visit +

    +
    + plan-image +
    +     +
    +
    + +
    +

    Lodging

    +

    + MIT partners with several hotels in the area: +

    + + +

    + + Boston Marriott Cambridge + +
    + (Kendall Square) +

    +

    + + Holiday Inn Express and Suites + +
    + (Lechmere Station) +

    +     + +

    + + Residence Inn + +
    + (Kendall Square) +

    +

    + + Le Meridien + +
    + (between Central and Kendall Squares) +

    +     +     +

    + To reserve a room, call the hotel and request the{' '} + "MIT discount" (subject to availability). +

    +

    + We also suggest the{' '} + + Best Western Hotel Tria + {' '} + 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{' '} + + here + . +

    +

    + For those seeking a lower-cost option, there are limited single and double{' '} + dorms available at{' '} + + Northeastern University + in downtown Boston off of the Orange Line. To request a dorm room,{' '} + please email{' '} + + conference@scratch.mit.edu + with the subject line “Conference dorm room” before June 1. Please{' '} + note that the dorms are a half-hour commute from MIT via{' '} + + public transportation + . +

    +
    +
    + Lodging Illustration +
    +     +
    +
    + +
    +

    Transportation

    +

    + The MIT Media Lab 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{' '} + + public transportation + is encouraged. The MBTA provides free services from Boston Logan Airport{' '} + to the South Station subway stop as well. +

    +

    + + Public parking facilities + are available near campus for a fee. +

    +

    + Learn about additional{' '} + + transportation options in Cambridge and Boston + . +

    +
    +
    + Transportation Illustration +
    +     +
    +
    +

    Exploring Cambridge

    +
    +

    + Boston is a city full of history and diverse neighborhoods. Check some{' '} + of these attractions to experience the city’s rich cultural offerings: +

    + +
    +
    +

    + Try some Scratch Team favorites for snacking and dining around the Lab: +

    +
      +
    • + A4 Pizza +
      • +
    • + Abigail’s +
      • +
    • + Bailey and Sage +
      • +
    • + Clover +
      • +
    • + Commonwealth +
      • +
    • + Legal Seafood +
      • +
    • + Meadhall +
      • +
    • + Sebastian’s +
      • +
    • + Tatte +
      • +
    • + Za +
      • +
    +
    +
    +
    + +
    +

    FAQ

    +
    +
    + Who is this conference for? +
    +
    + The Scratch Conference is a gathering of adult educators, developers,{' '} + researchers, and others who focus on helping young people create and{' '} + learn with Scratch. +
    + +
    + I missed the submission deadline. Can I still submit a proposal for{' '} + the conference? +
    +
    + Proposal submissions are now closed. +
    + +
    + I can only attend one day of the conference. Do you offer single-day{' '} + registration? +
    +
    + We are not offering single-day tickets. +
    + +
    + Can I receive a visa letter? +
    +
    + Yes. Contact us at conference@scratch.mit.edu and we can email you a letter. +
    + +
    + What should I bring? +
    +
    + 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. +
    + +
    + How can I cancel my registration? +
    +
    + Contact us at a conference@scratch.mit.edu with your registration number,{' '} + and we'll take care of it for you. +
    +
    +
    +
    +

    Have Additional Questions?

    + + + +
    +     +
    +
    +
    + ); + } +}); + +ReactDOM.render(, document.getElementById('app')); diff --git a/src/views/conference/plan/plan.scss b/src/views/conference/plan/plan.scss new file mode 100644 index 000000000..0c4423596 --- /dev/null +++ b/src/views/conference/plan/plan.scss @@ -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; + } + } + } +} diff --git a/static/images/conference/expect/karen.jpg b/static/images/conference/expect/karen.jpg new file mode 100755 index 000000000..34a7edeca Binary files /dev/null and b/static/images/conference/expect/karen.jpg differ diff --git a/static/images/conference/expect/mimi-nichole.jpg b/static/images/conference/expect/mimi-nichole.jpg new file mode 100755 index 000000000..81f06bd09 Binary files /dev/null and b/static/images/conference/expect/mimi-nichole.jpg differ diff --git a/static/images/conference/expect/mitch.jpg b/static/images/conference/expect/mitch.jpg new file mode 100755 index 000000000..1b6a59694 Binary files /dev/null and b/static/images/conference/expect/mitch.jpg differ diff --git a/static/images/conference/expect/scratch-team.jpg b/static/images/conference/expect/scratch-team.jpg new file mode 100755 index 000000000..3ca42c9a9 Binary files /dev/null and b/static/images/conference/expect/scratch-team.jpg differ diff --git a/static/images/conference/expect/what-to-expect.png b/static/images/conference/expect/what-to-expect.png new file mode 100644 index 000000000..81716b3b3 Binary files /dev/null and b/static/images/conference/expect/what-to-expect.png differ diff --git a/static/images/conference/footer/facebook.png b/static/images/conference/footer/facebook.png new file mode 100755 index 000000000..24c563cb6 Binary files /dev/null and b/static/images/conference/footer/facebook.png differ diff --git a/static/images/conference/footer/google.png b/static/images/conference/footer/google.png new file mode 100755 index 000000000..6aee6bf09 Binary files /dev/null and b/static/images/conference/footer/google.png differ diff --git a/static/images/conference/footer/lego-foundation.png b/static/images/conference/footer/lego-foundation.png new file mode 100755 index 000000000..0bb0c3358 Binary files /dev/null and b/static/images/conference/footer/lego-foundation.png differ diff --git a/static/images/conference/footer/medium.png b/static/images/conference/footer/medium.png new file mode 100755 index 000000000..dc2b6026e Binary files /dev/null and b/static/images/conference/footer/medium.png differ diff --git a/static/images/conference/footer/mit-odl.png b/static/images/conference/footer/mit-odl.png new file mode 100755 index 000000000..6ef276d05 Binary files /dev/null and b/static/images/conference/footer/mit-odl.png differ diff --git a/static/images/conference/footer/scratch-foundation.png b/static/images/conference/footer/scratch-foundation.png new file mode 100755 index 000000000..931de921c Binary files /dev/null and b/static/images/conference/footer/scratch-foundation.png differ diff --git a/static/images/conference/footer/siegel-endowment.png b/static/images/conference/footer/siegel-endowment.png new file mode 100644 index 000000000..980c69569 Binary files /dev/null and b/static/images/conference/footer/siegel-endowment.png differ diff --git a/static/images/conference/footer/twitter.png b/static/images/conference/footer/twitter.png new file mode 100755 index 000000000..e1d04ef2a Binary files /dev/null and b/static/images/conference/footer/twitter.png differ diff --git a/static/images/conference/index/schedule.png b/static/images/conference/index/schedule.png new file mode 100755 index 000000000..8a9f676e6 Binary files /dev/null and b/static/images/conference/index/schedule.png differ diff --git a/static/images/conference/plan/lodging.png b/static/images/conference/plan/lodging.png new file mode 100644 index 000000000..0590fcf56 Binary files /dev/null and b/static/images/conference/plan/lodging.png differ diff --git a/static/images/conference/plan/plan-your-visit.png b/static/images/conference/plan/plan-your-visit.png new file mode 100644 index 000000000..c69954567 Binary files /dev/null and b/static/images/conference/plan/plan-your-visit.png differ diff --git a/static/images/conference/plan/transportation.png b/static/images/conference/plan/transportation.png new file mode 100644 index 000000000..4cb93617a Binary files /dev/null and b/static/images/conference/plan/transportation.png differ diff --git a/static/images/conference/schedule/schedule.png b/static/images/conference/schedule/schedule.png new file mode 100644 index 000000000..4e25c7ccc Binary files /dev/null and b/static/images/conference/schedule/schedule.png differ diff --git a/static/svgs/conference/expect/aug3-icon.svg b/static/svgs/conference/expect/aug3-icon.svg new file mode 100755 index 000000000..f0b0d40a7 --- /dev/null +++ b/static/svgs/conference/expect/aug3-icon.svg @@ -0,0 +1 @@ +aug3-icon \ No newline at end of file diff --git a/static/svgs/conference/expect/aug4-icon.svg b/static/svgs/conference/expect/aug4-icon.svg new file mode 100755 index 000000000..7766e2ddb --- /dev/null +++ b/static/svgs/conference/expect/aug4-icon.svg @@ -0,0 +1 @@ +aug4-icon \ No newline at end of file diff --git a/static/svgs/conference/expect/aug5-icon.svg b/static/svgs/conference/expect/aug5-icon.svg new file mode 100755 index 000000000..b4aaafc54 --- /dev/null +++ b/static/svgs/conference/expect/aug5-icon.svg @@ -0,0 +1 @@ +aug5-icon \ No newline at end of file diff --git a/static/svgs/conference/expect/aug6-icon.svg b/static/svgs/conference/expect/aug6-icon.svg new file mode 100755 index 000000000..1a6b824a4 --- /dev/null +++ b/static/svgs/conference/expect/aug6-icon.svg @@ -0,0 +1 @@ +aug6-icon \ No newline at end of file diff --git a/static/svgs/conference/footer/scratch-logo.svg b/static/svgs/conference/footer/scratch-logo.svg new file mode 100755 index 000000000..735fd4a02 --- /dev/null +++ b/static/svgs/conference/footer/scratch-logo.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + +