mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Merge pull request #6301 from kchadha/annual-report-fixes
[Develop] Annual report fixes
This commit is contained in:
Karishma Chadha
GitHub
commit
78688203b1
15 changed files with 1133 additions and 900 deletions
|
|
@ -7,73 +7,90 @@ const frameless = require('../../lib/frameless');
|
|||
|
||||
require('./text-and-media-snippet.scss');
|
||||
|
||||
// For left and right mode:
|
||||
// Regular means text is on the left and media is on the right; reverse means these are swapped.
|
||||
|
||||
// For top and bottom mode:
|
||||
// Regular means text is on top and media is on the bottom; and reverse means these are swapped.
|
||||
|
||||
const TextAndMediaSnippet = props => (
|
||||
<div className={classNames('text-and-media-snippet', props.className)}>
|
||||
{props.className === 'regular' &&
|
||||
<div className="half">
|
||||
{props.type === 'video' &&
|
||||
<div>
|
||||
<MediaQuery
|
||||
minWidth={frameless.mobile}
|
||||
>
|
||||
<VideoPreview
|
||||
buttonMessage=""
|
||||
thumbnail={props.largeImage}
|
||||
thumbnailWidth="430"
|
||||
videoHeight={430 * .568}
|
||||
videoId={props.videoId}
|
||||
videoWidth="430"
|
||||
alt={props.alt}
|
||||
spinnerColor={props.spinnerColor}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
||||
<VideoPreview
|
||||
buttonMessage=""
|
||||
thumbnail={props.largeImage}
|
||||
thumbnailWidth="300"
|
||||
videoHeight={300 * .568}
|
||||
videoId={props.videoId}
|
||||
videoWidth="300"
|
||||
alt={props.alt}
|
||||
spinnerColor={props.spinnerColor}
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
}
|
||||
{props.type !== 'video' &&
|
||||
<img
|
||||
className="large"
|
||||
src={props.largeImage}
|
||||
alt={props.alt}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div className="half">
|
||||
<h5>{props.title}</h5>
|
||||
<h4>{props.title}</h4>
|
||||
<p>
|
||||
{props.children}
|
||||
</p>
|
||||
</div>
|
||||
{props.className === 'reverse' &&
|
||||
<div className="half">
|
||||
|
||||
<div className="half">
|
||||
{props.type === 'video' &&
|
||||
<div>
|
||||
<MediaQuery
|
||||
minWidth={frameless.desktop}
|
||||
>
|
||||
<VideoPreview
|
||||
buttonMessage=""
|
||||
thumbnail={props.largeImage}
|
||||
thumbnailWidth="420"
|
||||
videoHeight={420 * .568}
|
||||
videoId={props.videoId}
|
||||
videoWidth="420"
|
||||
alt={props.alt}
|
||||
spinnerColor={props.spinnerColor}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
minWidth={frameless.tabletPortrait}
|
||||
maxWidth={frameless.desktop - 1}
|
||||
>
|
||||
<VideoPreview
|
||||
buttonMessage=""
|
||||
thumbnail={props.largeImage}
|
||||
thumbnailWidth="620"
|
||||
videoHeight={620 * .568}
|
||||
videoId={props.videoId}
|
||||
videoWidth="620"
|
||||
alt={props.alt}
|
||||
spinnerColor={props.spinnerColor}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
minWidth={frameless.mobile}
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
>
|
||||
<VideoPreview
|
||||
buttonMessage=""
|
||||
thumbnail={props.largeImage}
|
||||
thumbnailWidth="460"
|
||||
videoHeight={460 * .568}
|
||||
videoId={props.videoId}
|
||||
videoWidth="460"
|
||||
alt={props.alt}
|
||||
spinnerColor={props.spinnerColor}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
||||
<VideoPreview
|
||||
buttonMessage=""
|
||||
thumbnail={props.largeImage}
|
||||
thumbnailWidth="300"
|
||||
videoHeight={300 * .568}
|
||||
videoId={props.videoId}
|
||||
videoWidth="300"
|
||||
alt={props.alt}
|
||||
spinnerColor={props.spinnerColor}
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
}
|
||||
{props.type !== 'video' &&
|
||||
<img
|
||||
className="large"
|
||||
src={props.largeImage}
|
||||
alt={props.alt}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
{props.className === 'full-width' &&
|
||||
<div className="half">
|
||||
<img
|
||||
className="large"
|
||||
src={props.largeImage}
|
||||
alt={props.alt}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,49 +3,121 @@
|
|||
.text-and-media-snippet{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin: 30px 0;
|
||||
&.between{
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
margin: 50px auto;
|
||||
|
||||
&.top {
|
||||
margin-top: 75px;
|
||||
}
|
||||
@media #{$intermediate-and-smaller} {
|
||||
|
||||
&.regular {
|
||||
flex-direction: row;
|
||||
}
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&.full-width{
|
||||
flex-direction: column;
|
||||
}
|
||||
&.reverse{
|
||||
@media #{$intermediate-and-smaller} {
|
||||
flex-direction: column-reverse;
|
||||
max-width: 780px;
|
||||
margin: auto;
|
||||
|
||||
@media #{$intermediate} {
|
||||
max-width: 620px;
|
||||
}
|
||||
}
|
||||
.half{
|
||||
max-width: 360px;
|
||||
width: 100%;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
max-width: 430px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
img.large{
|
||||
max-width: 350px;
|
||||
|
||||
@media #{$small} {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.half{
|
||||
width: 100%;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
max-width: 430px;
|
||||
img.large{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
text-align: center;
|
||||
|
||||
margin: 32px auto;
|
||||
|
||||
&.top {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
&.regular {
|
||||
flex-direction: column;
|
||||
}
|
||||
&.reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
&.full-width{
|
||||
flex-direction: column;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
.half{
|
||||
max-width: 100%;
|
||||
|
||||
&.regular, &.reverse {
|
||||
@media #{$intermediate} {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.half {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
|
||||
@media #{$intermediate} {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
img.large{
|
||||
max-width: 100%;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.big-title {
|
||||
h4 {
|
||||
font-size: 2.25rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
margin: 25px auto;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,47 +2,67 @@ const classNames = require('classnames');
|
|||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
const VideoPreview = require('../video-preview/video-preview.jsx');
|
||||
const frameless = require('../../lib/frameless.js');
|
||||
const MediaQuery = require('react-responsive').default;
|
||||
|
||||
|
||||
require('./timeline-card.scss');
|
||||
|
||||
const TimelineCard = props => (
|
||||
<div className={classNames('timeline-card', props.className)}>
|
||||
<a
|
||||
href={props.link}
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="../../images/annual-report/2020/Symbols-UI/Open Link.svg"
|
||||
alt="open link"
|
||||
/>
|
||||
</a>
|
||||
<h5>{props.date}</h5>
|
||||
<h4>{props.title}</h4>
|
||||
<p>{props.text}</p>
|
||||
{props.videoId &&
|
||||
<VideoPreview
|
||||
buttonMessage=""
|
||||
thumbnail={props.image}
|
||||
thumbnailWidth="100%"
|
||||
videoHeight="216"
|
||||
videoId={props.videoId}
|
||||
videoWidth="380"
|
||||
alt={props.alt}
|
||||
spinnerColor={props.spinnerColor}
|
||||
/>
|
||||
}
|
||||
{!props.videoId && props.image &&
|
||||
<img
|
||||
className="large"
|
||||
src={props.image}
|
||||
alt={props.alt}
|
||||
/>
|
||||
}
|
||||
{props.attribution &&
|
||||
<p>{props.projectBy} {props.attribution}</p>
|
||||
}
|
||||
<div className="timeline-content">
|
||||
<a
|
||||
href={props.link}
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="../../images/annual-report/2020/Symbols-UI/Open Link.svg"
|
||||
alt="open link"
|
||||
/>
|
||||
</a>
|
||||
<h5>{props.date}</h5>
|
||||
<h4>{props.title}</h4>
|
||||
<p>{props.text}</p>
|
||||
{props.videoId &&
|
||||
<div>
|
||||
<MediaQuery minWidth={frameless.mobile}>
|
||||
<VideoPreview
|
||||
buttonMessage=""
|
||||
thumbnail={props.image}
|
||||
thumbnailWidth="100%"
|
||||
videoHeight={430 * .565}
|
||||
videoId={props.videoId}
|
||||
videoWidth="430"
|
||||
alt={props.alt}
|
||||
spinnerColor={props.spinnerColor}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
||||
<VideoPreview
|
||||
buttonMessage=""
|
||||
thumbnail={props.image}
|
||||
thumbnailWidth="100%"
|
||||
videoHeight={270 * .565}
|
||||
videoId={props.videoId}
|
||||
videoWidth="270"
|
||||
alt={props.alt}
|
||||
spinnerColor={props.spinnerColor}
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
}
|
||||
{!props.videoId && props.image &&
|
||||
<img
|
||||
className="large"
|
||||
src={props.image}
|
||||
alt={props.alt}
|
||||
/>
|
||||
}
|
||||
{props.attribution &&
|
||||
<p>{props.projectBy} {props.attribution}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,22 +3,41 @@
|
|||
$timeline-breakpoint: "only screen and (max-width : 1030px)";
|
||||
|
||||
.timeline-card{
|
||||
max-width: 450px;
|
||||
width: calc(100% - 30px);
|
||||
max-width: 460px;
|
||||
|
||||
@media #{$small} {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
background-color: $ui-white;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 30px;
|
||||
p{
|
||||
margin: 10px 0 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
a{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
|
||||
.timeline-content {
|
||||
margin: 15px;
|
||||
text-align: left;
|
||||
p {
|
||||
margin: 10px 0 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
a{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
img{
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.video-preview{
|
||||
margin-top: 15px;
|
||||
img{
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.center{
|
||||
margin: 0 auto 30px;
|
||||
|
|
@ -35,14 +54,4 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
|
|||
margin: 0 auto 30px;
|
||||
}
|
||||
}
|
||||
img{
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.video-preview{
|
||||
margin-top: 15px;
|
||||
img{
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,8 @@
|
|||
*/
|
||||
const frameless = {
|
||||
desktop: 942,
|
||||
mobileIntermediate: 640,
|
||||
tabletPortrait: 768,
|
||||
mobileIntermediate: 640,
|
||||
mobile: 480
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
"name": "annual-report",
|
||||
"pattern": "^/annual-report/?(\\?.*)?$",
|
||||
"routeAlias": "/annual-report/?$",
|
||||
"view": "annual-report/2019/annual-report",
|
||||
"title": "Annual Report 2019",
|
||||
"view": "annual-report/2020/annual-report",
|
||||
"title": "Annual Report 2020",
|
||||
"viewportWidth": "device-width"
|
||||
},
|
||||
{
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -32,7 +32,7 @@ h1 {
|
|||
|
||||
h2 {
|
||||
font-size: 3.25rem;
|
||||
line-height: 4rem;
|
||||
line-height: 3.75rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -54,7 +54,7 @@ h5 {
|
|||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 2em;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
p a {
|
||||
|
|
@ -66,9 +66,13 @@ a, a:link, a:visited, a:active{
|
|||
color: $motion-blue-3;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.photo-credit {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
|
@ -83,13 +87,7 @@ a, a:link, a:visited, a:active{
|
|||
line-height: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.message-section {
|
||||
|
|
@ -112,7 +110,7 @@ a, a:link, a:visited, a:active{
|
|||
.masthead {
|
||||
padding-top: 50px;
|
||||
|
||||
p {
|
||||
p { // Text above the title of the AR -- "2020 Annual Report"
|
||||
font-size: 1.25rem;
|
||||
line-height: 2rem;
|
||||
font-weight: bold;
|
||||
|
|
@ -296,6 +294,7 @@ a, a:link, a:visited, a:active{
|
|||
width: 620px;
|
||||
h5{
|
||||
margin: 20px 0 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -503,6 +502,10 @@ a, a:link, a:visited, a:active{
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&.translation {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: $annual-report-teal;
|
||||
|
|
@ -636,11 +639,10 @@ a, a:link, a:visited, a:active{
|
|||
|
||||
.reach-translation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
max-width: 780px;
|
||||
margin-bottom: 100px;
|
||||
width: 100%;
|
||||
|
||||
.reach-translation-intro {
|
||||
max-width: 300px;
|
||||
|
|
@ -688,23 +690,23 @@ a, a:link, a:visited, a:active{
|
|||
.bubble {
|
||||
background-color: darken($annual-report-teal, 10%);
|
||||
border-radius: 50px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
padding: 8px 36px;
|
||||
font-size: 1rem;
|
||||
margin: 15px auto;
|
||||
max-width: 170px;
|
||||
width: max-content;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
margin: 0px 8px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
&.increase{
|
||||
padding: 5px 5px;
|
||||
&.dark{
|
||||
background-color: darken($annual-report-teal, 15%);
|
||||
padding: 5px 15px;
|
||||
.million{
|
||||
font-size: 14px;
|
||||
font-size: 1rem;
|
||||
margin: 0 3px;
|
||||
span:before{
|
||||
display: none;
|
||||
|
|
@ -727,11 +729,10 @@ a, a:link, a:visited, a:active{
|
|||
}
|
||||
}
|
||||
&.spotlight{
|
||||
padding: 10px 6px;
|
||||
&:before{
|
||||
content: '';
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url("/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg");
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
|
|
@ -741,23 +742,24 @@ a, a:link, a:visited, a:active{
|
|||
&.snapshot{
|
||||
&:before{
|
||||
content: '';
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url("/images/annual-report/2020/Symbols-UI/Camera_snapshots.svg");
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.connectivity{
|
||||
background-color: $ui-purple-dark;
|
||||
}
|
||||
|
||||
&.community{
|
||||
background-color: $motion-blue-3;
|
||||
}
|
||||
&.adaptation{
|
||||
background-color: $annual-report-aqua;
|
||||
padding: 10px 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -767,9 +769,6 @@ a, a:link, a:visited, a:active{
|
|||
width: 286px;
|
||||
text-align: center;
|
||||
margin: 32px 0;
|
||||
@media #{$medium-and-smaller} {
|
||||
width: 203px;
|
||||
}
|
||||
|
||||
.million {
|
||||
font-size: 2rem;
|
||||
|
|
@ -863,10 +862,9 @@ img.comment-viz{
|
|||
.increase-bubble {
|
||||
background-color: darken($annual-report-teal, 15%);
|
||||
border-radius: 50px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
padding: 8px 16px;
|
||||
font-size: 1rem;
|
||||
margin: 15px auto;
|
||||
max-width: 170px;
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
|
|
@ -1081,6 +1079,10 @@ img.comment-viz{
|
|||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
@media #{$intermediate} {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
|
@ -1096,6 +1098,12 @@ img.comment-viz{
|
|||
.bold{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -1105,9 +1113,15 @@ img.comment-viz{
|
|||
justify-content: space-around;
|
||||
&.around{
|
||||
justify-content: space-around;
|
||||
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.users{
|
||||
justify-content: center;
|
||||
@media #{$intermediate} {
|
||||
|
||||
margin: 20px 0px;
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
|
@ -1116,11 +1130,15 @@ img.comment-viz{
|
|||
flex-direction: column;
|
||||
}
|
||||
.text{
|
||||
width: 360px;
|
||||
max-width: 390px;
|
||||
.larger{
|
||||
font-size: 1.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
@media #{$intermediate} {
|
||||
max-width: 620px;
|
||||
}
|
||||
}
|
||||
.images{
|
||||
.flex-row{
|
||||
|
|
@ -1139,20 +1157,28 @@ img.comment-viz{
|
|||
}
|
||||
.users-text{
|
||||
max-width: 400px;
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
.stats{
|
||||
max-width: 300px;
|
||||
text-align: center;
|
||||
margin: 0 30px;
|
||||
|
||||
h2 {
|
||||
font-size: 3.75rem;
|
||||
line-height: 4.375rem;
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
margin: 0 0;
|
||||
}
|
||||
p{
|
||||
max-width: 233px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.bubble.inverted{
|
||||
max-width: 198px;
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1160,7 +1186,7 @@ img.comment-viz{
|
|||
margin-left: 0px;
|
||||
color: $ui-white;
|
||||
font-weight: bold;
|
||||
@media #{$intermediate} {
|
||||
@media #{$intermediate-and-smaller} {
|
||||
margin-left: auto;
|
||||
}
|
||||
&.spotlight{
|
||||
|
|
@ -1186,7 +1212,6 @@ img.comment-viz{
|
|||
}
|
||||
}
|
||||
&.snapshot{
|
||||
padding: 10px 0px;
|
||||
&.bump{
|
||||
margin-left: 45px;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
|
|
@ -1196,13 +1221,13 @@ img.comment-viz{
|
|||
}
|
||||
}
|
||||
.about-breaker{
|
||||
max-width: 90%;
|
||||
text-align: center;
|
||||
margin: 35px auto;
|
||||
}
|
||||
.world, .resources{
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 40px;
|
||||
.bubble{
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -1211,6 +1236,16 @@ img.comment-viz{
|
|||
max-width: 600px;
|
||||
width: 100%;
|
||||
margin: 80px auto 0;
|
||||
|
||||
h4{
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
h4 {
|
||||
margin-top: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inner {
|
||||
display: flex;
|
||||
|
|
@ -1219,9 +1254,14 @@ img.comment-viz{
|
|||
&.center{
|
||||
text-align: center;
|
||||
}
|
||||
&.community h5{
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
&.community{
|
||||
h5 { // Anna Lytical's name
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
h4 { // Improving our tools & New Scratch Tutorials on Youtube
|
||||
font-size: 2.25rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
@media #{$big} {
|
||||
max-width: 940px;
|
||||
|
|
@ -1232,6 +1272,10 @@ img.comment-viz{
|
|||
padding-top: 72px;
|
||||
}
|
||||
|
||||
@media #{$intermediate} {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
|
@ -1260,15 +1304,15 @@ img.comment-viz{
|
|||
}
|
||||
|
||||
.flex-content{
|
||||
max-width: 840px;
|
||||
max-width: 940px;
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
text-align: left;
|
||||
@media #{$medium-and-smaller} {
|
||||
@media #{$intermediate-and-smaller} {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.aaron{
|
||||
text-align: center;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
|
@ -1290,7 +1334,7 @@ img.comment-viz{
|
|||
&.content{
|
||||
justify-content: space-between;
|
||||
.text{
|
||||
max-width: 360px;
|
||||
max-width: 460px;
|
||||
width: 100%;
|
||||
}
|
||||
.images{
|
||||
|
|
@ -1300,11 +1344,9 @@ img.comment-viz{
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.lg{
|
||||
h5{
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
|
||||
@media #{$intermediate} {
|
||||
max-width: 620px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1340,8 +1382,7 @@ img.comment-viz{
|
|||
.upper-wave{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
z-index: 0;
|
||||
top: 600px;
|
||||
left: 0px;
|
||||
}
|
||||
.inner {
|
||||
|
|
@ -1404,15 +1445,13 @@ img.comment-viz{
|
|||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
z-index: 0;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.world{
|
||||
h2{
|
||||
line-height: 1.5;
|
||||
margin-top: 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1425,10 +1464,14 @@ img.comment-viz{
|
|||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
.left-align{
|
||||
.connecting-educators{
|
||||
max-width: 700px;
|
||||
text-align: left;
|
||||
margin: 50px 0 0;
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.bg-image-container{
|
||||
width: 100%;
|
||||
|
|
@ -1482,7 +1525,7 @@ img.comment-viz{
|
|||
}
|
||||
img{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
top: 30px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1604,8 +1647,7 @@ img.comment-viz{
|
|||
margin-top: 8px;
|
||||
|
||||
p {
|
||||
// color: $ui-white;
|
||||
line-height: 40px;
|
||||
line-height: 2.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1805,7 +1847,13 @@ img.comment-viz{
|
|||
max-width: 900px;
|
||||
padding: 80px 0;
|
||||
@media #{$intermediate}{
|
||||
max-width: 700px;
|
||||
max-width: 640px;
|
||||
}
|
||||
@media #{$medium}{
|
||||
max-width: 500px;
|
||||
}
|
||||
@media #{$small}{
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1823,8 +1871,8 @@ img.comment-viz{
|
|||
}
|
||||
|
||||
.pull-quote{
|
||||
font-size: 26px;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.5rem;
|
||||
@media #{$small}{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
|
@ -1846,10 +1894,9 @@ img.comment-viz{
|
|||
.flex-content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.header{
|
||||
width: 37%;
|
||||
h2{
|
||||
line-height: 1.4;
|
||||
@media #{$big}{
|
||||
.header{
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
|
|
@ -1884,7 +1931,6 @@ img.comment-viz{
|
|||
}
|
||||
p{
|
||||
margin-top: 0px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1897,15 +1943,23 @@ img.comment-viz{
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
@media #{$intermediate-and-smaller}{
|
||||
padding: 0 25px;
|
||||
width: calc(100% - 50px);
|
||||
|
||||
@media #{$intermediate} {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
img.illo{
|
||||
margin: 40px 0;
|
||||
width: 100%;
|
||||
max-width: 524px;
|
||||
// align-self: center;
|
||||
}
|
||||
ul{
|
||||
list-style-type: none;
|
||||
|
|
@ -1998,25 +2052,6 @@ img.comment-viz{
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
.david-siegel {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
margin: 32px 0px 52px 0px;
|
||||
|
||||
.ds-info {
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.ds-text {
|
||||
width: 144px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
background-color: $ui-white;
|
||||
|
|
@ -2282,10 +2317,10 @@ img.comment-viz{
|
|||
margin: 0px;
|
||||
border-radius: 6px;
|
||||
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0;
|
||||
line-height: 29px;
|
||||
line-height: 2rem;
|
||||
|
||||
a {
|
||||
color: $motion-blue-3;
|
||||
|
|
@ -2391,6 +2426,20 @@ img.comment-viz{
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
.flex-row {
|
||||
justify-content: center;
|
||||
|
||||
@media #{$medium} {
|
||||
flex-direction: row;
|
||||
|
||||
.thumbnail {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.annual-report-content, #footer {
|
||||
position: relative;
|
||||
top: 58px;
|
||||
|
|
|
|||
|
|
@ -13,15 +13,6 @@ require('./country-blurb.scss');
|
|||
|
||||
const CountryBlurb = props => (
|
||||
<div className={classNames('country-blurb', props.className)}>
|
||||
{props.className === 'regular' &&
|
||||
<div className="half">
|
||||
<img
|
||||
className="large"
|
||||
src={props.largeImage}
|
||||
alt={props.alt}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div className="half">
|
||||
<div className="country-info">
|
||||
<img
|
||||
|
|
@ -29,7 +20,7 @@ const CountryBlurb = props => (
|
|||
alt={props.iconAlt}
|
||||
/>
|
||||
<div className="country-text">
|
||||
<h5>{props.title}</h5>
|
||||
<h4>{props.title}</h4>
|
||||
<div className="location">
|
||||
<img
|
||||
src={props.listIcon}
|
||||
|
|
@ -43,15 +34,13 @@ const CountryBlurb = props => (
|
|||
{props.children}
|
||||
</p>
|
||||
</div>
|
||||
{props.className === 'reverse' &&
|
||||
<div className="half">
|
||||
<img
|
||||
className="large"
|
||||
src={props.largeImage}
|
||||
alt={props.alt}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div className="half">
|
||||
<img
|
||||
className="large"
|
||||
src={props.largeImage}
|
||||
alt={props.alt}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -2,31 +2,35 @@
|
|||
|
||||
.country-blurb{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
flex-direction: column;
|
||||
}
|
||||
.half img{
|
||||
float: left;
|
||||
}
|
||||
&.reverse{
|
||||
.half img{
|
||||
float: right;
|
||||
}
|
||||
justify-content: space-around;
|
||||
margin-bottom: 62px;
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
// If we want to support both image on top and image on bottom,
|
||||
// we can use the regular & reverse classNames
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.half{
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
|
||||
img.large{
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 14px;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
|
@ -40,12 +44,17 @@
|
|||
margin-right: 15px;
|
||||
}
|
||||
.country-text{
|
||||
h5{
|
||||
h4{
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
.location{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
img{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
"annualReport.2020.reachNewUsers": "New Users",
|
||||
"annualReport.2020.reachProjectsCreated": "Projects Created",
|
||||
"annualReport.2020.reachProjectCreators": "People Creating Projects",
|
||||
"annualReport.2020.reachComments": "increase in comments made since 2019",
|
||||
"annualReport.2020.reachComments": "increase in comments posted",
|
||||
"annualReport.2020.reachGlobalCommunity": "Our Global Community",
|
||||
"annualReport.2020.reachMapBlurb": "Total accounts registered in the Scratch Online Community from the launch of Scratch through December 2020",
|
||||
"annualReport.2020.reachMap24M": "24M",
|
||||
|
|
@ -108,18 +108,18 @@
|
|||
"annualReport.2020.connectivityCountryIndia": "India",
|
||||
"annualReport.2020.connectivityCountryIndiaParagraph": "Quest Alliance empowers millions of learners and educators with 21st century skills, including creative computing. In 2020, {QuestAllianceLink} shared Scratch with learners and educators across India.",
|
||||
|
||||
"annualReport.2020.connectivityCountryUSATitle": "Raspberry Pi",
|
||||
"annualReport.2020.connectivityCountryUSA": "USA",
|
||||
"annualReport.2020.connectivityCountryUSAParagraph": "Raspberry Pi works to put the power of computing and digital making into the hands of people all over the world. Through their Making at Home initiative, they lead livestream events that encouraged families and young people to learn and create together. Several of these livestreams featured Scratch tutorials—and sometimes, even {USALink}!",
|
||||
"annualReport.2020.connectivityCountryUSATitle": "Raspberry Pi Foundation",
|
||||
"annualReport.2020.connectivityCountryUSA": "UK",
|
||||
"annualReport.2020.connectivityCountryUSAParagraph": "The Raspberry Pi Foundation works to put the power of computing and digital making into the hands of people all over the world. Through their Making at Home initiative, they lead livestream events that encouraged families and young people to learn and create together. Several of these livestreams featured Scratch tutorials—and sometimes, even {USALink}!",
|
||||
|
||||
"annualReport.2020.connectivityResources": "Resources",
|
||||
"annualReport.2020.connectivityResourcesSubtitle": "Localizing with Support from the LEGO Foundation",
|
||||
"annualReport.2020.connectivityResourcesParagraph": "To support our glowing global reach and aid our COVID-19 response, the LEGO Foundation supported Scratch with a generous grant. With this funding, we were able to localize key resources and reach even more young people around the world.",
|
||||
"annualReport.2020.connectivityResourcesParagraph": "To support our growing global reach and aid our COVID-19 response, the LEGO Foundation supported Scratch with a generous grant. With this funding, we were able to localize key resources and reach even more young people around the world.",
|
||||
|
||||
"annualReport.2020.connectivityExample1Title": "Tutorial Images",
|
||||
"annualReport.2020.connectivityExample1Paragraph": "We created translations of the images for 25 Scratch tutorials in 12 languages—totalling over 1,000 new images!",
|
||||
|
||||
"annualReport.2020.connectivityExample2Title": "Gettting Started with Scratch",
|
||||
"annualReport.2020.connectivityExample2Title": "Getting Started with Scratch",
|
||||
"annualReport.2020.connectivityExample2Paragraph": "The Getting Started with Scratch video is the most highly accessed and viewed Scratch tutorial video, greeting new Scratchers when they first join the site. We were able to translate this video into 25 new languages and to update the 3 previous translations, including visuals, voiceovers, and subtitles.",
|
||||
|
||||
"annualReport.2020.connectivityExample3Title": "Scratch Editor",
|
||||
|
|
@ -253,7 +253,7 @@
|
|||
"annualReport.2020.supportersIntro": "Thank you to our generous supporters. Your contribution helps us expand creative learning opportunities for children of all ages, from all backgrounds, around the globe.",
|
||||
|
||||
"annualReport.2020.ourSupporters": "Our Supporters",
|
||||
"annualReport.2020.ourSupportersText": "We want to thank all Scratch supporters who, throughout the years, have helped us create amazing learning experiences for millions of young people around the world. The following list is based on giving to Scratch Foundation from January 1, 2020 to December 31, 2020.",
|
||||
"annualReport.2020.ourSupportersText": "We want to thank all Scratch supporters who, throughout the years, have helped us create amazing learning experiences for millions of young people around the world. The following list is based on giving to the Scratch Foundation from January 1, 2020 to December 31, 2020.",
|
||||
|
||||
"annualReport.2020.supportersFoundingTitle": "Founding Partners — $10,000,000+",
|
||||
"annualReport.2020.supportersFoundingText": "We are especially grateful to our Founding Partners who have each provided at least $10,000,000 in cumulative support, since the start of Scratch in 2003.",
|
||||
|
|
@ -275,12 +275,12 @@
|
|||
"annualReport.2020.leadershipBoardMember": "Board Member",
|
||||
"annualReport.2020.leadershipPresidentCEO": "President and CEO",
|
||||
"annualReport.2020.leadershipFormerPresident": "Former President",
|
||||
"annualReport.2020.leadershipFounderCEO": "Founder and CEO",
|
||||
"annualReport.2020.leadershipFormerChairCEO": "Former Chair and CEO",
|
||||
"annualReport.2020.leadershipFounderCEO": "Founder and Executive Chairman",
|
||||
"annualReport.2020.leadershipFormerChairCEO": "Former CEO and Chairwoman",
|
||||
"annualReport.2020.leadershipBoardSecretaryTreasurer": "Board Secretary & Treasurer",
|
||||
"annualReport.2020.leadershipBoardSecretary": "Board Secretary",
|
||||
"annualReport.2020.leadershipBoardTreasurer": "Board Treasurer",
|
||||
"annualReport.2020.leadershipScratchTeam": "Scratch Team",
|
||||
"annualReport.2020.leadershipScratchTeam": "2020 Scratch Team",
|
||||
"annualReport.2020.leadershipED": "Executive Director",
|
||||
|
||||
"annualReport.2020.teamThankYou": "Thank you to Mitch Resnick, Natalie Rusk, Rupal Jain, and other collaborators at the Lifelong Kindergarten Group at the MIT Media Lab for your tireless support of Scratch.",
|
||||
|
|
@ -344,7 +344,7 @@
|
|||
"annualReport.2020.altChileIcon": "The Scratch mascot",
|
||||
"annualReport.2020.altBrazilIcon": "A green swirl",
|
||||
"annualReport.2020.altIndiaIcon": "A star interlocked with a circle",
|
||||
"annualReport.2020.altUSAIcon": "A cartoon raspberry, the Raspberry Pi logo",
|
||||
"annualReport.2020.altUSAIcon": "A cartoon raspberry, the Raspberry Pi Foundation logo",
|
||||
|
||||
"annualReport.2020.altTutorial": "A Scratch tutorial in Spanish",
|
||||
"annualReport.2020.altGettingStarted": "A play button sits on top of the Scratch UI.",
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@
|
|||
"userId": 61415372
|
||||
},
|
||||
{
|
||||
"name": "Tasha",
|
||||
"name": "LaTasha",
|
||||
"userName": "LT7845",
|
||||
"userId": 68837085
|
||||
},
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
"James Hill",
|
||||
"Inversoft/CleanSpeak",
|
||||
"Paul T. Jones",
|
||||
"Kahn-Row Family Fund",
|
||||
"Kahn-Rowe Family Fund",
|
||||
"Wilson, Sonsini, Goodrich & Rosati"
|
||||
],
|
||||
"inspiration": [
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 620 KiB |
Loading…
Reference in a new issue