mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 23:57:55 -05:00
Merge pull request #6206 from bocoup/annual-report-2020
Annual report 2020
This commit is contained in:
Karishma Chadha
GitHub
commit
2916d7e4cf
4 changed files with 154 additions and 46 deletions
|
|
@ -13,8 +13,8 @@ const TextAndMediaSnippet = props => (
|
|||
<VideoPreview
|
||||
buttonMessage=""
|
||||
thumbnail={props.largeImage}
|
||||
thumbnailWidth="300"
|
||||
videoHeight="216"
|
||||
thumbnailWidth="320"
|
||||
videoHeight="230"
|
||||
videoId={props.videoId}
|
||||
videoWidth="380"
|
||||
alt={props.alt}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,20 @@
|
|||
}
|
||||
}
|
||||
.half{
|
||||
max-width: 330px;
|
||||
max-width: 360px;
|
||||
width: 100%;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
max-width: 430px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
img.large{
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
max-width: 430px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
p{
|
||||
|
|
|
|||
|
|
@ -918,7 +918,7 @@ class AnnualReport extends React.Component {
|
|||
<div className="inner">
|
||||
<div className="content">
|
||||
<div className="text">
|
||||
<div className="spotlight bubble connectivity">
|
||||
<div className="spotlight bubble connectivity india">
|
||||
<FormattedMessage id="annualReport.2020.spotlightStory" />
|
||||
</div>
|
||||
<h2>
|
||||
|
|
@ -1302,7 +1302,7 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
<div className="community-quotes">
|
||||
<div className="community-quote">
|
||||
<div className="community-quote single">
|
||||
<div className="quote-person">
|
||||
<Avatar
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBenedict'})}
|
||||
|
|
@ -1327,11 +1327,11 @@ class AnnualReport extends React.Component {
|
|||
<div className="initiatives-subsection-content">
|
||||
{/* eslint-disable max-len */}
|
||||
<div className="inner">
|
||||
<div className="content flex-content">
|
||||
<div className="spotlight bubble adaptation">
|
||||
<FormattedMessage id="annualReport.2020.spotlightStory" />
|
||||
</div>
|
||||
<div className="content flex-content aaron">
|
||||
<div className="text">
|
||||
<div className="spotlight bubble adaptation">
|
||||
<FormattedMessage id="annualReport.2020.spotlightStory" />
|
||||
</div>
|
||||
<h2>
|
||||
<FormattedMessage id="annualReport.2020.adaptationHighlightName" />
|
||||
</h2>
|
||||
|
|
@ -1354,15 +1354,44 @@ class AnnualReport extends React.Component {
|
|||
<div className="flex-content">
|
||||
<div className="text-and-media-snippet regular between">
|
||||
<div className="half">
|
||||
<iframe
|
||||
src="https://scratch.mit.edu/projects/389148460/embed"
|
||||
allowTransparency="true"
|
||||
width="375"
|
||||
height="310"
|
||||
frameBorder="0"
|
||||
scrolling="no"
|
||||
allowFullScreen
|
||||
/>
|
||||
<MediaQuery
|
||||
minWidth={frameless.desktop}
|
||||
>
|
||||
<iframe
|
||||
src="https://scratch.mit.edu/projects/389148460/embed"
|
||||
allowTransparency="true"
|
||||
width="360"
|
||||
height={((360 * .76) + 45)}
|
||||
frameBorder="0"
|
||||
scrolling="no"
|
||||
allowFullScreen
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.desktop - 1}
|
||||
minWidth={frameless.mobile}
|
||||
>
|
||||
<iframe
|
||||
src="https://scratch.mit.edu/projects/389148460/embed"
|
||||
allowTransparency="true"
|
||||
width="430"
|
||||
height={((430 * .76) + 45)}
|
||||
frameBorder="0"
|
||||
scrolling="no"
|
||||
allowFullScreen
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
||||
<iframe
|
||||
src="https://scratch.mit.edu/projects/389148460/embed"
|
||||
allowTransparency="true"
|
||||
width="300"
|
||||
height={((300 * .76) + 45)}
|
||||
frameBorder="0"
|
||||
scrolling="no"
|
||||
allowFullScreen
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
<div className="half">
|
||||
<p>
|
||||
|
|
@ -1594,15 +1623,30 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
</div>
|
||||
<div className="iframe-holder">
|
||||
<iframe
|
||||
src="https://scratch.mit.edu/projects/412126066/embed"
|
||||
allowTransparency="true"
|
||||
width="485"
|
||||
height="402"
|
||||
frameBorder="0"
|
||||
scrolling="no"
|
||||
allowFullScreen
|
||||
/>
|
||||
<MediaQuery
|
||||
minWidth={frameless.mobile}
|
||||
>
|
||||
<iframe
|
||||
src="https://scratch.mit.edu/projects/412126066/embed"
|
||||
allowTransparency="true"
|
||||
width="480"
|
||||
height={((480 * .76) + 45)}
|
||||
frameBorder="0"
|
||||
scrolling="no"
|
||||
allowFullScreen
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
||||
<iframe
|
||||
src="https://scratch.mit.edu/projects/412126066/embed"
|
||||
allowTransparency="true"
|
||||
width="300"
|
||||
height={((300 * .76) + 45)}
|
||||
frameBorder="0"
|
||||
scrolling="no"
|
||||
allowFullScreen
|
||||
/>
|
||||
</MediaQuery>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.2020.projectBy" /> u/STORMPRIMEX
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -643,10 +643,10 @@ a, a:link, a:visited, a:active{
|
|||
|
||||
.reach-translation-intro {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
max-width: 280px;
|
||||
}
|
||||
img {
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
.inline{
|
||||
|
|
@ -655,13 +655,12 @@ a, a:link, a:visited, a:active{
|
|||
margin-top: 10px;
|
||||
img{
|
||||
margin-right: 6px;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
max-width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
|
@ -671,21 +670,18 @@ a, a:link, a:visited, a:active{
|
|||
.inner {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.reach-translation {
|
||||
text-align: left;
|
||||
.inline{
|
||||
justify-content: center;
|
||||
}
|
||||
.reach-translation, .reach-translation-intro {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
.reach-translation {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
|
|
@ -760,6 +756,7 @@ a, a:link, a:visited, a:active{
|
|||
}
|
||||
&.adaptation{
|
||||
background-color: $annual-report-aqua;
|
||||
padding: 10px 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1165,6 +1162,15 @@ img.comment-viz{
|
|||
@media #{$intermediate} {
|
||||
margin-left: auto;
|
||||
}
|
||||
&.spotlight{
|
||||
margin-left: 50px;
|
||||
@media #{$intermediate-and-smaller}{
|
||||
margin: auto;
|
||||
}
|
||||
&.india{
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
}
|
||||
&.inverted{
|
||||
border: 2.5px solid $ui-purple-dark;
|
||||
background-color: $ui-white;
|
||||
|
|
@ -1237,6 +1243,13 @@ img.comment-viz{
|
|||
max-width: 480px;
|
||||
width: 100%;
|
||||
}
|
||||
.images{
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-content{
|
||||
|
|
@ -1246,14 +1259,24 @@ img.comment-viz{
|
|||
text-align: left;
|
||||
@media #{$medium-and-smaller} {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.aaron{
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
&.split{
|
||||
&.content{
|
||||
.text{
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
}
|
||||
img{
|
||||
.images{
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1261,6 +1284,14 @@ img.comment-viz{
|
|||
justify-content: space-between;
|
||||
.text{
|
||||
max-width: 370px;
|
||||
width: 100%;
|
||||
}
|
||||
.images{
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.lg{
|
||||
|
|
@ -1370,12 +1401,22 @@ img.comment-viz{
|
|||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.world{
|
||||
h2{
|
||||
line-height: 1.5;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.initiatives-adaptation, .initiatives-community {
|
||||
.world{
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
width: calc(100% - 30px);
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
.left-align{
|
||||
max-width: 700px;
|
||||
|
|
@ -1726,6 +1767,9 @@ img.comment-viz{
|
|||
margin-top: 0px;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media #{$small}{
|
||||
background-size: auto;
|
||||
}
|
||||
.tweets{
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
|
|
@ -1735,6 +1779,8 @@ img.comment-viz{
|
|||
align-items:flex-start;
|
||||
@media #{$small} {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.twitter-tweet{
|
||||
width: 100%;
|
||||
|
|
@ -1747,6 +1793,9 @@ img.comment-viz{
|
|||
.inner {
|
||||
max-width: 940px;
|
||||
padding: 80px 0;
|
||||
@media #{$intermediate}{
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: $header-gray;
|
||||
|
|
@ -2340,3 +2389,9 @@ img.comment-viz{
|
|||
position: relative;
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
.regular.between{
|
||||
@media #{$medium-and-smaller}{
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue