mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
revised conference layout and css per feedback
This commit is contained in:
Ben Wheeler
parent
3179f7e59d
commit
1483f6d86c
5 changed files with 109 additions and 58 deletions
|
|
@ -13,28 +13,28 @@ require('./index.scss');
|
|||
const ConferenceSplash = () => (
|
||||
<div className="index mod-2019">
|
||||
<TitleBanner className="mod-conference mod-2019">
|
||||
<div className="title-banner-image mod-2019" />
|
||||
<h1 className="title-banner-h1 mod-2019">
|
||||
<FormattedMessage id="conference-2019.title" />
|
||||
</h1>
|
||||
<h3 className="title-banner-h3 mod-2019 conf2019-description">
|
||||
<FormattedMessage id="conference-2019.desc" />
|
||||
</h3>
|
||||
<div>
|
||||
<h1 className="title-banner-h1 mod-2019">
|
||||
<FormattedMessage id="conference-2019.title" />
|
||||
</h1>
|
||||
<div className="title-banner-image mod-2019" />
|
||||
</div>
|
||||
</TitleBanner>
|
||||
<div className="conf2019-description conf2019-band">
|
||||
<h3 className="conf2019-description title-banner-h3 mod-2019">
|
||||
<FormattedMessage id="conference-2019.descA" />
|
||||
</h3>
|
||||
<h3 className="conf2019-description title-banner-h3 mod-2019">
|
||||
<FormattedMessage id="conference-2019.descB" />
|
||||
</h3>
|
||||
<h3 className="conf2019-description title-banner-h3 mod-2019 conf2019-bold">
|
||||
<FormattedMessage id="conference-2019.nextMITConference" />
|
||||
</h3>
|
||||
</div>
|
||||
<h3 className="conf2019-title-band">
|
||||
<FormattedMessage id="conference-2019.nextMITConference" />
|
||||
<br />
|
||||
<FormattedMessage id="conference-2019.seeBelow" />
|
||||
</h3>
|
||||
<div className="inner">
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="conference-2019.joinMailingList"
|
||||
values={{joinMailingListLink: (
|
||||
<a href="/?????????????"><FormattedMessage id="conference-2019.joinMailingListLinkText" /></a>
|
||||
)}}
|
||||
/>
|
||||
</p>
|
||||
<section className="conf2019-panel mod-chile">
|
||||
<FlexRow className="conf2019-panel-title">
|
||||
<img
|
||||
|
|
@ -64,14 +64,14 @@ const ConferenceSplash = () => (
|
|||
<FormattedDate
|
||||
day="2-digit"
|
||||
month="long"
|
||||
value={new Date(2019, 5, 30)}
|
||||
value={new Date(2019, 4, 30)}
|
||||
year="numeric"
|
||||
/>
|
||||
{' - '}
|
||||
<FormattedDate
|
||||
day="2-digit"
|
||||
month="long"
|
||||
value={new Date(2019, 5, 31)}
|
||||
value={new Date(2019, 4, 31)}
|
||||
year="numeric"
|
||||
/>
|
||||
</td>
|
||||
|
|
@ -123,7 +123,7 @@ const ConferenceSplash = () => (
|
|||
</tbody>
|
||||
</table>
|
||||
<a
|
||||
className="button mod-2019-panel"
|
||||
className="button mod-2019-conf mod-2019-conf-website-button"
|
||||
href="http://www.scratchalsur.org"
|
||||
>
|
||||
<FormattedMessage id="conference-2019.website" />
|
||||
|
|
@ -159,14 +159,14 @@ const ConferenceSplash = () => (
|
|||
<FormattedDate
|
||||
day="2-digit"
|
||||
month="long"
|
||||
value={new Date(2019, 7, 8)}
|
||||
value={new Date(2019, 6, 8)}
|
||||
year="numeric"
|
||||
/>
|
||||
{' - '}
|
||||
<FormattedDate
|
||||
day="2-digit"
|
||||
month="long"
|
||||
value={new Date(2019, 7, 13)}
|
||||
value={new Date(2019, 6, 13)}
|
||||
year="numeric"
|
||||
/>
|
||||
</td>
|
||||
|
|
@ -218,7 +218,7 @@ const ConferenceSplash = () => (
|
|||
</tbody>
|
||||
</table>
|
||||
<a
|
||||
className="button mod-2019-panel"
|
||||
className="button mod-2019-conf mod-2019-conf-website-button"
|
||||
href="https://www.scratchafrica.com"
|
||||
>
|
||||
<FormattedMessage id="conference-2019.website" />
|
||||
|
|
@ -229,7 +229,7 @@ const ConferenceSplash = () => (
|
|||
<img
|
||||
alt="EU Flag"
|
||||
className="conf2019-panel-flag"
|
||||
src="/svgs/conference/flags/fr.svg"
|
||||
src="/svgs/conference/flags/eu.svg"
|
||||
/>
|
||||
<div className="conf2019-panel-title-text">
|
||||
<h3><FormattedMessage id="conference-2019.ukTitle" /></h3>
|
||||
|
|
@ -253,14 +253,14 @@ const ConferenceSplash = () => (
|
|||
<FormattedDate
|
||||
day="2-digit"
|
||||
month="long"
|
||||
value={new Date(2019, 6, 18)}
|
||||
value={new Date(2019, 7, 23)}
|
||||
year="numeric"
|
||||
/>
|
||||
{' - '}
|
||||
<FormattedDate
|
||||
day="2-digit"
|
||||
month="long"
|
||||
value={new Date(2019, 6, 21)}
|
||||
value={new Date(2019, 7, 25)}
|
||||
year="numeric"
|
||||
/>
|
||||
</td>
|
||||
|
|
@ -307,18 +307,29 @@ const ConferenceSplash = () => (
|
|||
/>
|
||||
</td>
|
||||
<td><FormattedMessage id="conference-2019.hashtag" /></td>
|
||||
<td>{'#scratchconference'}</td>
|
||||
<td>{'#ScratchEurope'}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<a
|
||||
className="button mod-2019-panel"
|
||||
href="https://www.scratchafrica.com"
|
||||
className="button mod-2019-conf mod-2019-conf-website-button"
|
||||
href="https://www.raspberrypi.org/blog/announcing-scratch-conference-europe-2019/"
|
||||
>
|
||||
<FormattedMessage id="conference-2019.website" />
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
<div className="conf2019-title-band conf2019-mailing-list">
|
||||
<h3 className="conf2019-mailing-list">
|
||||
<FormattedMessage id="conference-2019.joinMailingList" />
|
||||
</h3>
|
||||
<a
|
||||
className="button mod-2019-conf mod-2019-conf-maillist-button"
|
||||
href="https://docs.google.com/document/d/1M_LJqOjAxxYFm3j-D8WbvFtWhZJgPCbZ5aNGSA2KZyc/edit?ts=5c65f2c4#"
|
||||
>
|
||||
<FormattedMessage id="conference-2019.joinMailingListButtonText" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,44 +1,67 @@
|
|||
@import "../../../../colors";
|
||||
@import "../../../../frameless";
|
||||
|
||||
h1.title-banner-h1.mod-2019 {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-top: 5rem;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.title-banner.mod-conference.mod-2019 {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.title-banner-image.mod-2019 {
|
||||
opacity: .75;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
margin-bottom: 1.75rem;
|
||||
width: 100%;
|
||||
height: 30rem;
|
||||
background-image: url("/images/conference/index/2019/title-banner.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 20rem;
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.conf2019-panel,
|
||||
.title-banner-h3.mod-2019 {
|
||||
margin: auto;
|
||||
width: 48.75rem;
|
||||
}
|
||||
|
||||
.title-banner-h3.mod-2019 {
|
||||
text-align: left;
|
||||
color: $type-white;
|
||||
}
|
||||
|
||||
.conf2019-title-band {
|
||||
background-color: $ui-blue-dark;
|
||||
background-color: $ui-blue;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
color: $type-white;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.conf2019-title-band.conf2019-mailing-list {
|
||||
padding: 3rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.conf2019-description.conf2019-band {
|
||||
margin-bottom: 2.5rem;
|
||||
width: 48.75rem;
|
||||
}
|
||||
|
||||
.conf2019-description {
|
||||
line-height: 1.9rem;
|
||||
font-style: italic;
|
||||
width: 60%;
|
||||
// width: 60%;
|
||||
font-weight: normal;
|
||||
font-size: 1.15rem;
|
||||
font-size: 1rem;
|
||||
color: $type-gray;
|
||||
margin: 0 auto 1.6rem;
|
||||
}
|
||||
|
||||
.conf2019-panel {
|
||||
|
|
@ -66,6 +89,22 @@
|
|||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.conf2019-mailing-list {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h3.conf2019-mailing-list {
|
||||
width: 48.75rem;
|
||||
font-weight: normal;
|
||||
color: $type-white;
|
||||
font-size: 1.15rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.conf2019-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: .75rem 1.25rem;
|
||||
vertical-align: top;
|
||||
|
|
@ -77,16 +116,25 @@ td {
|
|||
height: 1rem;
|
||||
}
|
||||
|
||||
.button.mod-2019-panel {
|
||||
.button.mod-2019-conf {
|
||||
display: block;
|
||||
margin: 2rem auto 0;
|
||||
background-color: $ui-orange;
|
||||
padding: 1rem 0;
|
||||
width: 13.75rem;
|
||||
text-align: center;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.button.mod-2019-conf-website-button {
|
||||
background-color: $ui-orange;
|
||||
color: $type-white;
|
||||
}
|
||||
|
||||
.button.mod-2019-conf-maillist-button {
|
||||
background-color: $ui-white;
|
||||
color: $ui-blue-dark;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
.index.mod-2019 {
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
{
|
||||
"conference-2019.title": "Scratch Conferences 2019",
|
||||
"conference-2019.desc": "Scratch conferences are playful gatherings of educators, researchers, developers, and other members of the worldwide Scratch community. These events, held in various locations around the world, provide opportunities for people of diverse backgrounds and practices to discuss and share the ways they use Scratch, to connect and collaborate with one another, and to bring creative learning back to their own communities.",
|
||||
"conference-2019.descA": "Scratch conferences are playful gatherings of educators, researchers, developers, and other members of the worldwide Scratch community.",
|
||||
"conference-2019.descB": "These events, held in various locations around the world, provide opportunities for people of diverse backgrounds and practices to discuss and share the ways they use Scratch, to connect and collaborate with one another, and to bring creative learning back to their own communities.",
|
||||
"conference-2019.nextMITConference": "The next Scratch@MIT conference will be held in Cambridge, Massachusetts, in 2020.",
|
||||
"conference-2019.seeBelow": "Learn more about 2019 conference dates and locations below.",
|
||||
"conference-2019.joinMailingListLinkText": "join our mailing list",
|
||||
"conference-2019.joinMailingList": "To learn more about 2020’s Scratch@MIT conference in Cambridge, Massachusetts, and to receive updates about regional conferences around the world, {joinMailingListLink}.",
|
||||
"conference-2019.joinMailingListButtonText": "Join Mailing List",
|
||||
"conference-2019.joinMailingList": "To learn more about 2020’s Scratch@MIT conference in Cambridge, Massachusetts, and to receive updates about regional conferences around the world, join our mailing list.",
|
||||
|
||||
"conference-2019.date": "Date",
|
||||
"conference-2019.location": "Location",
|
||||
|
|
@ -17,10 +18,6 @@
|
|||
"conference-2019.ukDesc": "The 2019 Scratch Conference Europe will take place in Cambridge, UK, from Friday 23 August to Sunday 25 August. We are putting together a full and exciting schedule of participatory activities led by members of the Scratch community, so you can look forward to workshops, talks and keynotes across a range of topics, including the new Scratch 3, as well as plenty of informal opportunities to chat and connect!",
|
||||
"conference-2019.ukAudience": "All education professionals and volunteers",
|
||||
|
||||
"conference-2019.brasilTitle": "Conferência Scratch Brasil 2019",
|
||||
"conference-2019.brasilDesc": "The Scratch Brazil Conference 2019 will be a meeting point for Brazilian educators, researchers, developers and makers who are interested in creating, sharing and learning with Scratch. The conference will foster discussions about the use of Scratch in and out of the classroom, creative computing, Scratch extensions, and other important themes related to Scratch's adoption in Brazil. We are planning something very participatory, with lots of hands-on workshops, poster sessions and opportunities for collaboration.",
|
||||
"conference-2019.brasilAudience": "Educators, researchers, developers, and makers",
|
||||
|
||||
"conference-2019.kenyaTitle": "Scratch2019NBO",
|
||||
"conference-2019.kenyaSubTitle": "Waves of Innovation",
|
||||
"conference-2019.kenyaDesc": "In recognition of Africa's technological contributions and the potential of the youth of Africa, Scratch2019NBO will be in Nairobi, Kenya. Join educators from around the world to share lessons, empower young people, and celebrate accomplishments in creative coding.",
|
||||
|
|
@ -28,14 +25,5 @@
|
|||
|
||||
"conference-2019.chileTitle": "Conferencia Scratch al Sur",
|
||||
"conference-2019.chileDesc": "Scratch al Sur is an opportunity to learn about the importance of introducing programming languages in schools. All lectures and workshops will provide an opportunity to share different experiences, from higher levels to those who are beginning to participate in Scratch's global community.",
|
||||
"conference-2019.chileAudience": "Teachers and Policy Makers",
|
||||
|
||||
"conference-2019.chinaTitle": "Scratch Conference: China*Love",
|
||||
"conference-2019.chinaDesc": "Join us for a gathering to support creative expression with Scratch in China. Share ways to promote learning with passion for programming, animation, community, and life.",
|
||||
"conference-2019.chinaAudience": "Educators, parents, developers, makers",
|
||||
|
||||
"conference-2019.costaricaTitle": "Scratch Conference Costa Rica",
|
||||
"conference-2019.costaricaSubTitle": "People, Projects, and Places",
|
||||
"conference-2019.costaricaDesc": "Scratch Conference Costa Rica is a global event taking place at a community level that unites teachers, students, businesses, and leaders, so that coding and design is part of every child's education, starting with Scratch.",
|
||||
"conference-2019.costaricaAudience": "Scratch users, teachers, college professors, potential Scratchers, university students (future teachers and software developers) in Costa Rica and Spanish-speaking Latin America"
|
||||
"conference-2019.chileAudience": "Teachers and Policy Makers"
|
||||
}
|
||||
|
|
|
|||
4
static/svgs/conference/flags/eu.svg
Normal file
4
static/svgs/conference/flags/eu.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="810" height="540"><desc>European flag</desc>
|
||||
<defs><g id="s"><g id="c"><path id="t" d="M0,0v1h0.5z" transform="translate(0,-1)rotate(18)"/><use xlink:href="#t" transform="scale(-1,1)"/></g><g id="a"><use xlink:href="#c" transform="rotate(72)"/><use xlink:href="#c" transform="rotate(144)"/></g><use xlink:href="#a" transform="scale(-1,1)"/></g></defs>
|
||||
<rect fill="#039" width="810" height="540"/><g fill="#fc0" transform="scale(30)translate(13.5,9)"><use xlink:href="#s" y="-6"/><use xlink:href="#s" y="6"/><g id="l"><use xlink:href="#s" x="-6"/><use xlink:href="#s" transform="rotate(150)translate(0,6)rotate(66)"/><use xlink:href="#s" transform="rotate(120)translate(0,6)rotate(24)"/><use xlink:href="#s" transform="rotate(60)translate(0,6)rotate(12)"/><use xlink:href="#s" transform="rotate(30)translate(0,6)rotate(42)"/></g><use xlink:href="#l" transform="scale(-1,1)"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in a new issue